FullCalendar – full-sized JavaScript Calendar

Puneet Sharma

5 years ago

The FullCalendar Approach FullCalendar is great for displaying events, but it isn’t a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event’s name or other associated data. It is up to you to add this functionality through FullCalendar’s API.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/fullcalendar/index.html

SOURCE


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
  <title>
    Initialize Globals Demo - Demos | FullCalendar
  </title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
      font-size: 14px;
    }

    #calendar {
      max-width: 900px;
      margin: 40px auto;
    }
  </style>
  <link href='https://unpkg.com/@fullcalendar/core@4.4.1/main.min.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/daygrid@4.4.1/main.min.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/timegrid@4.4.1/main.min.css' rel='stylesheet' />
  <script src='https://unpkg.com/@fullcalendar/core@4.4.1/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/daygrid@4.4.1/main.min.js'></script>
  <script src='https://unpkg.com/@fullcalendar/timegrid@4.4.1/main.min.js'></script>

  <script>

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

      var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
        defaultView: 'dayGridMonth',
        defaultDate: '2020-05-07',
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: [
          {
            title: 'All Day Event',
            start: '2020-05-01'
          },
          {
            title: 'Long Event',
            start: '2020-05-07',
            end: '2020-05-10'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2020-05-09T16:00:00'
          },
          {
            groupId: '999',
            title: 'Repeating Event',
            start: '2020-05-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2020-05-11',
            end: '2020-05-13'
          },
          {
            title: 'Meeting',
            start: '2020-05-12T10:30:00',
            end: '2020-05-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2020-05-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2020-05-12T14:30:00'
          },
          {
            title: 'Birthday Party',
            start: '2020-05-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2020-05-28'
          }
        ]
      });

      calendar.render();
    });

  </script>

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

</html>

Features:

Powerful and Lightweight

Has over 100 customizable settings. Built as separate modules to keep filesize down.

Developer-Friendly

Has connectors for React, Vue, and Angular. Provides high-quality TypeScript definitions.

Open Source

All code is open source and hosted on GitHub. There is a non-free “premium” edition however.

Product website – https://fullcalendar.io/