JavaScript plugin to display a calendar of events.
Event calendar component depends on FullCalendar plugin. Make sure to link to FullCalendar css and js files in your document:
Use this page as a reference.
You can pass almost any calendar option to data-calendar-options='{}'
Usefull links
Premium version
We used open source free version of the plugin for demo purpose. However, you can purchase a premium license to level-up the plugin functionality with premium plugins and support. Check the prices.
<!-- Event calendar example -->
<div class="calendar" data-calendar-options='{
"initialDate": "2022-08-01",
"headerToolbar": {
"left": "prev,next today",
"center": "title",
"right": "dayGridMonth,timeGridWeek,listWeek"
},
"eventTimeFormat": {
"hour": "2-digit",
"minute": "2-digit",
"hour12": false
},
"events": [
{
"title": "Stretching",
"start": "2022-08-01T16:30",
"end": "2022-08-01T18:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-purple"]
},
{
"title": "For pregnant",
"start": "2022-08-02T07:30",
"end": "2022-08-02T09:40",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-warning"]
},
{
"title": "Healthy back",
"start": "2022-08-02T12:00",
"end": "2022-08-02T13:30",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-info"]
},
{
"title": "Relax yoga",
"start": "2022-08-02T18:45",
"end": "2022-08-02T20:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-danger"]
},
{
"title": "Beginners",
"start": "2022-08-03T11:00",
"end": "2022-08-03T13:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-success"]
}
]
}'></div>// Event calendar example
.calendar(data-calendar-options=`{
"initialDate": "2022-08-01",
"headerToolbar": {
"left": "prev,next today",
"center": "title",
"right": "dayGridMonth,timeGridWeek,listWeek"
},
"eventTimeFormat": {
"hour": "2-digit",
"minute": "2-digit",
"hour12": false
},
"events": [
{
"title": "Stretching",
"start": "2022-08-01T16:30",
"end": "2022-08-01T18:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-purple"]
},
{
"title": "For pregnant",
"start": "2022-08-02T07:30",
"end": "2022-08-02T09:40",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-warning"]
},
{
"title": "Healthy back",
"start": "2022-08-02T12:00",
"end": "2022-08-02T13:30",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-info"]
},
{
"title": "Relax yoga",
"start": "2022-08-02T18:45",
"end": "2022-08-02T20:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-danger"]
},
{
"title": "Beginners",
"start": "2022-08-03T11:00",
"end": "2022-08-03T13:00",
"classNames": ["event-custom-style", "bg-light", "text-nav", "border-0", "rounded-1", "p-2", "ps-3", "border-start", "border-5", "border-success"]
}
]
}`)