DOCSEARCHbyAlgolia
Submit Docs

FullCalendar Documentation

repository·main·Indexed 40 days ago

https://github.com/fullcalendar/fullcalendar-docs

Official documentation for the FullCalendar project, including guides on event objects, event sources (JSON feeds, Google Calendar, and custom functions), and API callbacks like eventClick.

Tokens
141.5K
Snippets
432
Records
656
Agent score
48%

What's inside FullCalendar

  1. Overview of Event Data in FullCalendar

    main
    FullCalendar supports multiple ways to load and manage event data. You can provide events as a static array, a JSON feed, or via a function. Once loaded, events can be dynamically manipulated using various methods to update, remove, or refetch them. The system also supports advanced event requesting (lazy fetching) and data parsing/transformation to ensure your data matches the expected calendar format.

  2. Control Resource Display in FullCalendar

    main

    The Resource Display feature allows you to control the visual aspects of resources within FullCalendar views (such as Timeline or Vertical Resource views). This includes managing resource ordering, filtering resources based on events, and customizing the text or rendering of resource elements.

    Note: This feature is part of the Premium version of FullCalendar.

  3. Use Resource Display features

    main

    Resource Display allows you to control the visual aspects of resources in FullCalendar, including their ordering and text content. Note that these features are part of the premium offering.

    Key capabilities include:

    • Ordering: Customizing the sequence in which resources appear.
    • Filtering: Controlling which resources are displayed based on event presence.
    • Custom Rendering: Using render hooks to modify the appearance and lifecycle of resource labels and lanes.

  4. Use Resource Data in FullCalendar

    main
    Resource Data allows you to define specific entities (like rooms, employees, or equipment) that events can be assigned to. This enables resource-based views such as Resource Timeline or Resource Day. You can populate the calendar with resources using several methods: providing a static array, a JSON feed, or a function that returns data. Once loaded, you can manipulate this data using the Calendar API methods.

  6. Control event appearance in FullCalendar

    main
    You can customize the visual appearance of events in FullCalendar using a variety of configuration options. These options allow you to control colors (background, border, and text), time formatting, and how event details (like end times) are displayed. Additionally, you can use render hooks to inject custom HTML, CSS classes, or lifecycle logic into individual events.

  7. Configure Date Navigation in FullCalendar

    main

    FullCalendar provides several settings and methods to control and manipulate the current dates displayed in a view.

    Configuration Settings

    You can control the initial state and behavior of date navigation using these settings:

    • defaultDate: Sets the initial date shown when the calendar is first loaded.
    • dateIncrement: Defines how much the date changes when using increment/decrement methods.
    • dateAlignment: Determines how dates are aligned within the view.
    • validRange: Restricts the range of dates that can be navigated to (e.g., preventing users from navigating to the past or far future).

    Navigation Methods

    You can programmatically navigate the calendar using the following methods:

    • calendar.prev(): Move to the previous period (day, week, month, etc., depending on the current view).
    • calendar.next(): Move to the next period.
    • calendar.prevYear(): Move back one year.
    • calendar.nextYear(): Move forward one year.
    • calendar.today(): Jump to the current date.
    • calendar.gotoDate(date): Jump to a specific date.
    • calendar.incrementDate(amount): Increment the current date by a specific amount.
    • calendar.getDate(): Retrieve the current date being displayed in the view.

  9. Manage view dates with Date Navigation methods and settings

    main

    FullCalendar provides a set of methods and settings to control and query the current dates displayed in a view. This includes navigating between periods (prev/next), jumping to specific dates (gotoDate, today), and adjusting the date increment or alignment.

    Key configuration settings include:

    • defaultDate: Sets the initial date for the view.
    • dateIncrement: Determines how much the date changes when navigating.
    • dateAlignment: Controls how dates are aligned within the view.
    • validRange: Restricts the range of dates the calendar can navigate to.

    Key methods include:

    • prev() / next(): Move to the previous or next period.
    • prevYear() / nextYear(): Move to the previous or next year.
    • today(): Jump to the current system date.
    • gotoDate(date): Jump to a specific date.
    • incrementDate(amount, unit): Increment the current date by a specific amount and unit.
    • getDate(): Retrieve the current date of the view.

  10. Interact with the current view using the View API

    main

    FullCalendar provides a suite of settings, methods, and callbacks to manage and interact with the active view. The View API allows you to:

    • Configure the defaultView.
    • Access the current view-object.
    • Use methods like Calendar.changeView to switch between different view types.
    • Utilize lifecycle callbacks such as viewSkeletonRender, viewSkeletonDestroy, datesRender, and datesDestroy to perform custom logic when views or dates are rendered or removed.

  12. What is the Scheduler Plugin?

    main

    The Scheduler plugin is a premium extension for FullCalendar that adds two specialized views for managing resources (e.g., rooms, staff, or equipment):

    • Timeline View: Optimized for displaying a large number of resources.
    • Vertical Resource View: Optimized for displaying a smaller number of resources.

    Note: Scheduler is a premium plugin and requires a separate license from the core FullCalendar library.