FullCalendar is a JavaScript library that seamlessly integrates with such popular JavaScript frameworks as Vue, React, Angular.
For more, please visit the plugin's official site .<div id="lpx-calendar"></div>
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("lpx-calendar");
var getDate = (day, time?) => {
var date = "";
if (time) {
const [hours, mins, secs] = time.split(":");
var curDate = new Date(
new Date().getFullYear(),
new Date().getMonth(),
day,
hours,
mins,
secs
);
date = new Date(curDate.getTime() - curDate.getTimezoneOffset() * 60000)
.toISOString()
.split("Z")[0];
return date;
}
var curDate = new Date(
new Date().getFullYear(),
new Date().getMonth(),
day
);
date = new Date(curDate.getTime() - curDate.getTimezoneOffset() * 60000)
.toISOString()
.split("T")[0];
return date;
};
const events = [
{
title: "Meeting",
start: getDate(12, "10:30:00"),
end: getDate(12, "11:30:00"),
},
{
title: "Long Event",
start: getDate(5),
end: getDate(7),
backgroundColor: "var(--lpx-info)",
borderColor: "var(--lpx-info)",
},
{
title: "All Day Event",
start: getDate(24),
end: getDate(24),
backgroundColor: "var(--lpx-secondary)",
borderColor: "var(--lpx-secondary)",
eventDisplay: "list-item",
},
{
title: "Conference",
start: getDate(20),
end: getDate(22),
backgroundColor: "var(--lpx-warning)",
borderColor: "var(--lpx-warning)",
},
{
title: "Meeting",
start: getDate(18, "09:30:00"),
end: getDate(18, "10:00:00"),
},
{
title: "Repeating Event",
start: getDate(18, "11:00:00"),
end: getDate(18, "12:00:00"),
},
{
title: "Repeating Event",
start: getDate(18, "13:00:00"),
end: getDate(18, "14:00:00"),
},
{
title: "Repeating Event",
start: getDate(18, "15:00:00"),
end: getDate(18, "16:00:00"),
},
{
title: "Repeating Event",
start: getDate(18, "16:00:00"),
end: getDate(18, "17:00:00"),
},
{
title: "Repeating Event",
start: getDate(18, "17:00:00"),
end: getDate(18, "18:00:00"),
},
{
title: "Click for Google",
start: getDate(15),
url: "http://google.com/",
},
{
title: "Repeating Event",
start: getDate(8, "14:30:00"),
borderColor: "var(--lpx-warning)",
},
{
title: "Repeating Event",
start: getDate(26, "16:30:00"),
borderColor: "var(--lpx-warning)",
},
{
title: "Repeating Event",
start: getDate(28, "11:30:00"),
borderColor: "var(--lpx-warning)",
},
];
var calendar = new FullCalendar.Calendar(calendarEl, {
firstDay: "1",
editable: true,
dayMaxEvents: true,
// themeSystem: 'bootstrap5',
buttonText: {
month: "Month",
week: "Week",
day: "Day",
},
headerToolbar: {
left: "dayGridMonth,timeGridWeek,timeGridDay",
center: "prev,title,next",
right: "addEvent",
},
customButtons: {
addEvent: {
text: "Add Event",
},
},
events,
});
calendar.render();
});