Schedule Calendar
For the event calendar we use the fullcalendar plugin, this is a popular plugin for creating event schedules.
How to install ?
<script src="vendors/@fullcalendar/index.global.min.js"></script>
<!-- Calendar Event -->
<script>
const fullcalendars = document.getElementById('calendar');
if ( fullcalendars != null) {
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var date = new Date();
var dates = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) + '-' + date.getDate().toString().padStart(2, 0);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: dates,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: [
{
title: 'All Day Event',
start: '2021-10-01'
},
{
title: 'Long Event',
start: '2021-10-03',
end: '2021-10-06'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-10-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-10-16T16:00:00'
},
{
title: 'Conference',
start: '11',
end: '2021-10-13'
},
{
title: 'Meeting',
start: '2021-10-12T10:30:00',
end: '2021-10-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-10-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-10-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-10-20T07:00:00'
},
{
title: 'Evant with link',
url: 'http://google.com/',
start: '2021-10-28'
}
]
});
calendar.render();
});
}
</script>
Demo config available in src/js/vendor.js
function myCalendar();
Html code
<div id="calendar"></div>
For more documentation please check in here https://github.com/fullcalendar/fullcalendar.