Documentation

Getting Started

NPM and ES6 Module Imports

• Install FullCalendar version 5.X core package and all the plugins you want to use:

  $ npm install @fullcalendar/core@^5.5.0 @fullcalendar/daygrid@^5.5.0 –-save

  Copy

• Install SwipeCalendar:

  $ npm install swipecalendar –-save

  Copy

• Import SwipeCalendar and its FullCalendar’s plugins dependencies:

  
  import dayGridPlugin from '@fullcalendar/daygrid';
  import SwipeCalendar from 'swipecalendar';

  Copy

• Add a placeholder in your HTML:

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

  Copy

• Initialize SwipeCalendar:

  
  document.addEventListener('DOMContentLoaded', function() {
  
      var calendarEl = document.getElementById('calendar');
  
      calendar = new SwipeCalendar(calendarEl, {
          // SwipeCalendar specific options
          swipeLicenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX',
          swipeEffect: 'slide',
          swipeSpeed: 250,
          swipeTitlePosition: 'center',
  
          // FullCalendar options and callbacks
          plugins: [dayGridPlugin],
          height: '100%',
      });
  });

  Copy

Manual Installation

• Download FullCalendar version 5.X from its GitHub repository.

• Download SwipeCalendar from the dist folder of its GitHub repository.

• Include FullCalendar’s CSS and JS files in your HTML:

  
  <link href='fullcalendar/main.css' rel='stylesheet' />
  <script src='fullcalendar/main.js'></script>
  

  Copy

• Include the SwipeCalendar JS file in your HTML:

  <script src='dist/swipeCalendar.min.js'></script>

  Copy

• Add a placeholder in your HTML:

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

  Copy

• Initialize SwipeCalendar:

  
  document.addEventListener('DOMContentLoaded', function() {
  
      var calendarEl = document.getElementById('calendar');
  
      calendar = new SwipeCalendar(calendarEl, {
          // SwipeCalendar specific options
          swipeLicenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX',
          swipeEffect: 'slide',
          swipeSpeed: 250,
          swipeTitlePosition: 'center',
  
          // FullCalendar options and callbacks
          initialView: 'dayGridMonth',
          height: '100%',
      });
  });

  Copy

SwipeCalendar Options

SwipeCalendar supports the same API as FullCalendar. This means that you can initialize SwipeCalendar with the same options and callbacks used in FullCalendar.

For the list of available options, please refer to the FullCalendar documentation.

In addition to the FullCalendar options, SwipeCalendar also defines the following options: