Fullcalendar

FullCalendar is a full-sized drag & drop event calendar. This packages is an easily consumable combination of standard plugins. It makes the root namespace available as the FullCalendar browser global. View the docs »

<!-- plugin css file  -->
<link rel="stylesheet" href="assets/bundles/fullcalendar.min.css">

<!-- Plugin Js -->
<script src="assets/bundles/fullcalendar.bundle.js"></script>

<!-- Jquery Page Js -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('my_calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        timeZone: 'UTC',
        initialView: 'dayGridMonth',
        events: 'https://fullcalendar.io/demo-events.json',
        editable: true,
        selectable: true
    });

    calendar.render();
    });
</script>