fullcalendar

Easily render a full-sized drag & drop calendar with a combination of standard plugins

6.1.15
latest
Source
npm

Version published: 5 months ago

Maintainers: 1

Created: 10 years ago

What is fullcalendar?

FullCalendar is a JavaScript calendar library that provides a full-sized, drag-and-drop calendar. It is highly customizable and can be used to display events, handle user interactions, and integrate with various data sources.

What are fullcalendar's main functionalities?

Display a Basic Calendar

This code initializes a basic calendar using FullCalendar with the dayGrid plugin to display a month view.


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth'
});
calendar.render();

Add Events to the Calendar

This code demonstrates how to add events to the calendar. Events can have a title, start date, and optionally an end date.


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Event 1', start: '2023-10-01' },
    { title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
  ]
});
calendar.render();

Handle Event Clicks

This code shows how to handle event clicks. When an event is clicked, an alert is shown with the event's title, and the event's border color is changed.


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Event 1', start: '2023-10-01' },
    { title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
  ],
  eventClick: function(info) {
    alert('Event: ' + info.event.title);
    // change the border color just for fun
    info.el.style.borderColor = 'red';
  }
});
calendar.render();

Drag and Drop Events

This code enables drag-and-drop functionality for events. The 'editable' property is set to true, allowing users to drag and drop events to different dates.


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  editable: true,
  events: [
    { title: 'Event 1', start: '2023-10-01' },
    { title: 'Event 2', start: '2023-10-05', end: '2023-10-07' }
  ]
});
calendar.render();

Other packages similar to fullcalendar

FullCalendar Standard Bundle

Easily render a full-sized drag & drop calendar with a combination of standard plugins

This fullcalendar package bundles these plugins:

Usage with CDN or ZIP archive

Load the index.global.min.js file and use the FullCalendar global namespace:

<!DOCTYPE html>
<html>
  <head>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
    <script>

      document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar')
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        })
        calendar.render()
      })

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

Usage with NPM and ES modules

npm install fullcalendar

import { Calendar } from 'fullcalendar'

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar')
  const calendar = new Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  })
  calendar.render()
})

Keywords

FAQs

What is fullcalendar?

Is fullcalendar well maintained?

Package last updated on 12 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install