• third party plugins
  • Full Calendar

third party plugins

Tailwind CSS Full Calendar

FullCalendar is a versatile and feature-rich JavaScript calendar component that provides a dynamic and customizable interface for displaying events in a monthly, weekly, or daily view, making it ideal for scheduling and event management applications.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate FullCalendar JS with FlyonUI.

  • 1
    Installation

    Install fullcalendar using npm:

    npm install fullcalendar
  • 2
    Include FullCalendar JavaScript

    Add the following script to your page:

     <script src="../path/to/fullcalendar/index.global.js"></script>

    Note: A CDN link won't work here because we need to customize the default Vendor CSS to match FlyonUI's design.

  • 3
    Update Tailwind Configuration

    Add the path to the vendor and helper JS files in the content section of your Tailwind configuration file. Also, set vendors="true" in the FlyonUI config to ensure the override CSS is generated:

    module.exports = {
  content: [
    '../path/to/fullcalendar/**/*.js',  
  ],
  flyonui: {
    vendors: true // Enable vendor-specific CSS generation
  }
}
  • 4
    Initialize FullCalendar

    Add the initialization JavaScript code for FullCalendar after including the FullCalendar JS library:

    For more options and detailed configurations, refer to the FullCalendar JS documentation .

    const calendarDefault = new FullCalendar.Calendar(document.getElementById('calendar-container'), {
  initialView: 'dayGridMonth',
  events: [
        // Your events here
  ]
});
calendarDefault.render();
Class Name
Type
Description
fc-event-primaryModifierMakes event of primary variant.
fc-event-secondaryModifierMakes event of secondary variant.
fc-event-infoModifierMakes event of info variant.
fc-event-successModifierMakes event of success variant.
fc-event-warningModifierMakes event of warning variant.
fc-event-errorModifierMakes event of error variant.
fc-event-disabledModifierMakes disabled range to prevent events.

Basic usage

Default example

The following example demonstrates the usage of a default full calendar, initialized with the JavaScript code provided below.

Custom example

The following example demonstrates the usage of a custom functional full calendar with event modal, initialized with the JavaScript code provided below.