Inline Calendar
Inline Calendar
This plugin is specially developed for the Qoduby template. It is extremely simple to use. For example usage, you can review the example below.
v1.0.0
We used some 3rd party plugins while developing the Qoduby template. We have customized these plugins according to our template. You can view examples of this plugin below.
Example
const calenderContainer = document.getElementsByClassName('calendar-container');
if (calenderContainer.length > 0) {
// Start Date
const startMonth = '2023-05-01';
// Marked days and class
const markedDays = [
['2023-04-04', 'bg-warning-subtle text-warning'],
['2023-04-05', 'bg-warning-subtle text-warning'],
['2023-04-06', 'bg-warning-subtle text-warning'],
['2023-04-07', 'bg-warning-subtle text-warning'],
['2023-04-16', 'bg-primary-subtle text-primary'],
['2023-04-19', 'bg-success-subtle text-success'],
['2023-04-24', 'bg-info-subtle text-info'],
['2023-04-25', 'bg-info-subtle text-info'],
['2023-05-04', 'bg-warning-subtle text-warning'],
['2023-05-05', 'bg-warning-subtle text-warning'],
['2023-05-06', 'bg-warning-subtle text-warning'],
['2023-05-07', 'bg-warning-subtle text-warning'],
['2023-05-16', 'bg-primary-subtle text-primary'],
['2023-05-19', 'bg-success-subtle text-success'],
['2023-05-24', 'bg-info-subtle text-info'],
['2023-05-25', 'bg-info-subtle text-info'],
['2023-06-04', 'bg-warning-subtle text-warning'],
['2023-06-05', 'bg-warning-subtle text-warning'],
['2023-06-06', 'bg-warning-subtle text-warning'],
['2023-06-07', 'bg-warning-subtle text-warning'],
['2023-06-16', 'bg-primary-subtle text-primary'],
['2023-06-19', 'bg-success-subtle text-success'],
['2023-06-24', 'bg-info-subtle text-info'],
['2023-06-25', 'bg-info-subtle text-info'],
];
// Month names
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// Week names
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
// Init Calendar
const myCalendar = new Calendar(startMonth, markedDays, months, days);
}
<div class="calendar-container"></div>