Fullcalendar is the most popular Javascript Calendar. It's powerful and lightweight and suitable for just about anything. For more info see the official siteand the Github repository.
Basic Example
Here's how a basic Fullcalendar will looks like with data populated.
"use strict";
// Class definition
var KTGeneralFullCalendarBasicDemos = function () {
// Private functions
var exampleBasic = function () {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
height: 800,
contentHeight: 780,
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: true,
now: TODAY + 'T09:25:00', // just for demo
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
initialView: 'dayGridMonth',
initialDate: TODAY,
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
navLinks: true,
events: [
{
title: 'All Day Event',
start: YM + '-01',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "fc-event-danger fc-event-solid-warning"
},
{
title: 'Reporting',
start: YM + '-14T13:30:00',
description: 'Lorem ipsum dolor incid idunt ut labore',
end: YM + '-14',
className: "fc-event-success"
},
{
title: 'Company Trip',
start: YM + '-02',
description: 'Lorem ipsum dolor sit tempor incid',
end: YM + '-03',
className: "fc-event-primary"
},
{
title: 'ICT Expo 2017 - Product Release',
start: YM + '-03',
description: 'Lorem ipsum dolor sit tempor inci',
end: YM + '-05',
className: "fc-event-light fc-event-solid-primary"
},
{
title: 'Dinner',
start: YM + '-12',
description: 'Lorem ipsum dolor sit amet, conse ctetur',
end: YM + '-10'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00',
description: 'Lorem ipsum dolor sit ncididunt ut labore',
className: "fc-event-danger"
},
{
id: 1000,
title: 'Repeating Event',
description: 'Lorem ipsum dolor sit amet, labore',
start: YM + '-16T16:00:00'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW,
description: 'Lorem ipsum dolor eius mod tempor labore',
className: "fc-event-primary"
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00',
description: 'Lorem ipsum dolor eiu idunt ut labore'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, ut labore'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00',
className: "fc-event-warning",
description: 'Lorem ipsum conse ctetur adipi scing'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, conse ctetur'
},
{
title: 'Dinner',
start: TOMORROW + 'T05:00:00',
className: "fc-event-solid-danger fc-event-light",
description: 'Lorem ipsum dolor sit ctetur adipi scing'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00',
className: "fc-event-primary",
description: 'Lorem ipsum dolor sit amet, scing'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28',
className: "fc-event-solid-info fc-event-light",
description: 'Lorem ipsum dolor sit amet, labore'
}
],
eventContent: function (info) {
var element = $(info.el);
if (info.event.extendedProps && info.event.extendedProps.description) {
if (element.hasClass('fc-day-grid-event')) {
element.data('content', info.event.extendedProps.description);
element.data('placement', 'top');
KTApp.initPopover(element);
} else if (element.hasClass('fc-time-grid-event')) {
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
} else if (element.find('.fc-list-item-title').lenght !== 0) {
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
}
}
}
});
calendar.render();
}
return {
// Public Functions
init: function () {
exampleBasic();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarBasicDemos.init();
});<div id="kt_docs_fullcalendar_populated"></div>
2024©
Keenthemes
