full-calendar basic example

by DeanOutlaw

HTML

<script src="https://www.mical.work/websites/js/fc/vendor/rrule.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/core/main.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/interaction/main.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/daygrid/main.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/timegrid/main.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/list/main.js"></script>
<script src="https://www.mical.work/websites/js/fc/packages/rrule/main.js"></script>
<link rel="stylesheet" href="https://www.mical.work/websites/js/fc/packages/core/main.css">
<link rel="stylesheet" href="http://www.mical.work/websites/js/fc/packages/daygrid/main.css">
<link rel="stylesheet" href="https://www.mical.work/websites/js/fc/packages/timegrid/main.css">
<link rel="stylesheet" href="https://www.mical.work/websites/js/fc/packages/list/main.css">
<div id='calendar'></div>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
      });