LYpMzEp

index.html

<div id='calendar'></div>

lypmzep.markdown

LYpMzEp

A Pen by Emmanuel ADEKPLOVI on CodePen.

License.

script.js

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid' ],
    timeZone: 'UTC',
    defaultView: 'dayGridMonth',
    events: 'https://fullcalendar.io/demo-events.json'
  });

  calendar.render();
});

scripts

<script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script>

style.css

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

styles

<link href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css" rel="stylesheet" />