JavaScript plugin to display a calendar of events.
The Event Calendar component relies on the FullCalendar plugin. Ensure that you have linked the necessary FullCalendar JavaScript files in your document. Below is the list of addons we used in this demo:
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 here.
<!-- Event calendar example -->
<div class="calendar" data-calendar-options='{
"initialDate": "2024-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": "2024-08-01T16:30",
"end": "2024-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": "2024-08-02T07:30",
"end": "2024-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": "2024-08-02T12:00",
"end": "2024-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": "2024-08-02T18:45",
"end": "2024-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": "2024-08-03T11:00",
"end": "2024-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>