DOCSEARCHbyAlgolia
Submit Docs

FullCalendar Documentation

website·Indexed 40 days ago

https://fullcalendar.io/docs

A comprehensive JavaScript calendar component with integrations for React, Preact, and other front-end frameworks. Features include ES6 build system support, customizable toolbars, date parsing and formatting, and a variety of plugins including premium scheduler options.

Tokens
111.2K
Snippets
562
Records
823
Agent score
74%

What's inside FullCalendar

  1. Overview of FullCalendar Toolbar components

    The Toolbar is the area at the top and bottom of the FullCalendar instance used to house buttons and other controls. It consists of two primary sections: the headerToolbar (top) and the footerToolbar (bottom). Developers can customize these areas using several configuration options:

    • headerToolbar and footerToolbar: Define the layout of buttons and titles.
    • titleFormat: Controls the text displayed in the header title.
    • buttons: Used to create custom buttons or override standard ones.
    • buttonDisplay: Determines if buttons show icons, text, or both.
    • toolbarElements: Allows the insertion of arbitrary custom HTML elements into the toolbars.
    • CalendarController: Provided by some UI-framework integrations to allow rendering fully-custom toolbar UIs outside the calendar itself.

  2. Overview of FullCalendar Premium plugins

    FullCalendar Premium (also known as "FullCalendar Scheduler") provides advanced functionality through a set of specialized plugins:

    • Timeline View: Displays a large number of resources with dates and times spanning horizontally.
    • Vertical Resource View: Displays resources as columns.
    • Print Optimization: Enhances the visual layout of the calendar when printed.

  3. Overview of FullCalendar View API

    FullCalendar provides a set of settings, methods, and callbacks to manage the current calendar view. Key capabilities include setting the starting view on load, programmatically switching views, accessing the current view's metadata (such as title and date range) via the View Object, and customizing the UI using various render hooks (View, Table, Highlight, and Filler).

  4. Customize the now-indicator line element in TimeGrid and Timeline views

    FullCalendar provides several hooks to customize the 'now-indicator' line that appears over day columns in TimeGrid and Timeline views. These hooks allow for styling via CSS classes, injecting custom content, or executing logic when the element mounts or unmounts.

  5. Use FullCalendar with TypeScript

    FullCalendar and the Scheduler plugin support TypeScript, allowing developers to use a type-aware superset of JavaScript that compiles down to standard JavaScript.

  6. Dynamically assign classes to toolbar buttons

    When buttonClass is defined as a function, it receives an info object containing metadata about the specific button. This allows for conditional styling based on the button's state, name, or role.
    buttonClass: function(info) {
  // info properties:
  // info.name: button name (e.g., 'prev', 'next', 'today', 'dayGridMonth')
  // info.text: localized display text
  // info.isPrimary: true if styled as primary action
  // info.isSelected: true if currently active
  // info.isDisabled: true if disabled
  // info.isIconOnly: true if no text is rendered
  // info.buttonGroup: object with { hasSelection: boolean } or null

  if (info.isSelected) {
    return 'btn-active';
  }
  if (info.name === 'today') {
    return 'btn-today';
  }
  return 'btn-default';
}

  7. Customize the now-indicator header in TimeGrid and Timeline views

    FullCalendar provides several hooks to customize the 'now-indicator' arrow element that appears in the time axis of TimeGrid and Timeline views. These hooks allow for styling via CSS classes, injecting custom content, or executing logic when the element mounts or unmounts.

  8. Manipulate FullCalendar using JavaScript methods

    FullCalendar provides a set of methods that allow developers to programmatically control the calendar. These methods must be called on a Calendar object that has already been initialized.
    // Example: Move the calendar to the next month/week/day
calendar.next();

  9. Understand the FullCalendar View Object properties

    The View object contains information about the current calendar view and is passed into nearly every handler. These properties are read-only; to modify them, you must create a custom view with settings.

    Key properties include:

    • type: The string name of the available view.
    • title: The text displayed in the headerToolbar (e.g., "September 2009").
    • activeStart: A Date object representing the first visible day (may be before the 1st of the month in month view).
    • activeEnd: A Date object representing the last visible day (exclusive).
    • currentStart: A Date object representing the start of the interval the view is trying to represent (e.g., the 1st of the month in month view), disregarding hidden days.
    • currentEnd: A Date object representing the end of the interval the view is trying to represent (exclusive), disregarding hidden days.
    • calendar: A reference to the master Calendar Object that the view belongs to.

  10. Access view properties (props) in custom views

    Both the configuration object and the Preact component approach receive a props object. This object contains essential information about the current view, such as the dateProfile. For a complete list of available properties in the props object, refer to the View.ts file in the FullCalendar source code on GitHub.

  11. Understand the FullCalendar Event Model lifecycle

    FullCalendar uses a two-step process for events: first, event data is provided as a plain JavaScript object (via arrays, JSON feeds, or the addEvent method). This plain object is then 'parsed' into a formal Event Object. The Event Object is the primary entity used throughout the API, providing methods for dynamic manipulation and being exposed in render hooks.

  12. Handle events being dropped onto another calendar with eventLeave

    The eventLeave callback is triggered when an event is about to be dropped from one calendar onto another. It is fired before the receiving calendar's drop and eventReceive callbacks, and before the eventRemove callback on the source calendar.

    The callback receives an info object containing:

    • event: The Event object that is leaving the calendar.
    • relatedEvents: An array of other related Event objects that are also leaving (e.g., recurring event instances or events sharing the same groupId).
    • revert: A function that can be called to cancel the action and reverse the event leave.
    • view: The current View object.
    • draggedEl: The HTML element that was being dragged.
    var calendar = new FullCalendar.Calendar(calendarEl, {
  eventLeave: function(info) {
    console.log('Event is leaving:', info.event);
    
    // Example: Prevent the event from leaving based on a condition
    if (someCondition) {
      info.revert();
    }
  }
});