# FullCalendar Documentation

Markdown pages for the FullCalendar JavaScript calendar documentation.

## Getting Started

### [Introduction](intro.md) - How to get FullCalendar's code, initialize a calendar, and other basic principles.

- [Getting Started](getting-started.md) - How to initialize a calendar
- [Initialize with ES6 Build System](initialize-es6.md) - For non-trivial projects, it is recommended to use an ES6-compatible build system like Vite or Rollup along with a package manager like NPM or Yarn.
- [Initialize with Script Tags](initialize-globals.md) - Use pre-built bundles and HTML script tags
- [Initialize with Script Tags (ESM)](initialize-browser-esm.md) - Use FullCalendar as an ES module within a <script> tag, preferably with import maps. Example:
- [Plugin Index](plugin-index.md) - Aside from the vanilla JS package fullcalendar, there are UI-library connectors:
- [Handlers](handlers.md) - How to attach handlers to your calendar, which execute when other things happen.
- [Methods](methods.md) - Methods provide ways to manipulate the calendar from JavaScript code.

#### More Advanced
- [View-Specific Options](view-specific-options.md) - You can specify options that apply only to specific calendar views.
- [Get/Set Options Dynamically](dynamic-options.md) - You can get/set calendar options after a calendar has already been initialized.
- [borderless settings](borderless.md) - Remove borders from the calendar's outer edge.
- [className](className.md) - Provides a ClassName Input for the calendar's root element.
- [ClassName Inputs](classname-input.md) - CSS class names can be injected into FullCalendar's DOM in various places via settings like eventClass, toolbarClass, dayCellClass, and many others. They accept a simple string:
- [Content Injection](content-injection.md) - Custom content can be injected into FullCalendar's DOM in various places. This content can be provided in the following formats. These examples use eventContent from the event render hooks:
- [render](render.md) - Will initially render a calendar, or if it is already rendered, will rerender it.
- [destroy](destroy.md) - Restores the container element to the state before FullCalendar was initialized.
- [rerenderDelay](rerenderDelay.md) - The amount of milliseconds to wait before rerendering anything on a calendar.
- [Calendar::render](Calendar-render.md) - Initially render the calendar, or rerender it after initialization.
- [Calendar::batchRendering](Calendar-batchRendering.md) - A way to group operations that cause rerenders.

### [Premium Plugins](premium.md) - FullCalendar Premium (also known as "FullCalendar Scheduler") is a collection of plugins released under a different license than the standard plugins. Each plugin offers additional functionality:

### [Date Library](date-library.md)

- [Date Parsing](date-parsing.md) - FullCalendar's API accepts date information in many places, such as when you set the initialDate or define an event's start/end.
- [Date Objects](date-object.md) - FullCalendar's API exposes Date objects in many places such as dateClick or a View object's activeStart/activeEnd.
- [Duration Object](duration-object.md) - A duration is a way to express an amount of time that has passed. It can also be used to express a time-of-day, in other words, the amount of time that has passed since the start of the day.
- [Date Formatting](date-formatting.md) - The term "date formatting" means taking a Date object and converting it into a string. The string can either be a standard string format like ISO8601 (ex: '2018-05-01') or it can be something more custom that you can display to users.
- [temporal-polyfill](temporal-polyfill.md) - The temporal-polyfill package is now a peer dependency of all the FullCalendar packages. This means you are required to install it.

#### Util Methods
- [formatDate](formatDate.md) - A utility function that formats a date into a string.
- [formatRange](formatRange.md) - Formats two dates, a start and an end, into a string. A separator string, most likely a dash, will be intelligently inserted between the two dates.
- [Calendar::formatDate](Calendar-formatDate.md) - A method that formats a date into a string. It inherits the locale and time zone settings of the calendar it's called on.
- [Calendar::formatIso](Calendar-formatIso.md) - Formats a date into an ISO8601 string. Outputs a UTC offset appropriate to the calendar it's called on.
- [Calendar::formatRange](Calendar-formatRange.md) - Formats two dates, a start and an end, into a string. A separator string, most likely a dash, will be intelligently inserted between the two dates. Inherits the time zone and locale settings of the calendar it's called on.

#### Plugins
- [Moment Formatting Plugin](format-moment.md) - FullCalendar's Moment JS connector package lets you use moment formatting strings for all date-formatting settings. The plugin allows you to specify moment formatting strings wherever a date formatting input is expected.
- [Luxon Formatting Plugin](format-luxon3.md) - FullCalendar's Luxon connector package lets you use Luxon formatting strings for all date-formatting settings. The plugin allows you to specify luxon formatting strings wherever a date formatting input is expected.

## Overall Display

### [Toolbar](toolbar.md) - The area at the top and bottom of the calendar that contains buttons and other controls.

- [headerToolbar](headerToolbar.md) - Defines the buttons and title at the top of the calendar.
- [footerToolbar](footerToolbar.md) - Defines the controls at the bottom of the calendar.
- [titleFormat](titleFormat.md) - Determines the text that will be displayed in the headerToolbar's title.
- [buttons](buttons.md) - Defines buttons that can be used in headerToolbar/footerToolbar — both custom buttons and overrides for standard buttons.
- [buttonDisplay](buttonDisplay.md) - Controls whether toolbar buttons display an icon, text, or both.
- [toolbarElements](toolbarElements.md) - Defines an arbitrary custom html element for use in headerToolbar or footerToolbar.
- [Toolbar Render Hooks](toolbar-render-hooks.md) - Customize the toolbar elements with ClassName Input settings.
- [CalendarController](CalendarController.md) - Some of the UI-framework integrations provide a "Calendar Controller" object that let you use calendar data outside the calendar itself. This is especially useful for rendering fully-custom toolbar UIs.

### [Theme](theming.md) - It is possible to change the look of the calendar (colors, fonts, etc)

- [Color Palettes](color-palettes.md) - The 5 stock themes come with their own "palettes", which define color values:
- [Shadcn](shadcn.md) - Shadcn is a React component framework.
- [MUI](mui.md) - MUI's Material UI is a React component framework.
- [Custom Themes](custom-themes.md) - At its heart, the theme system is a collection of class-name props — one for each element in the calendar. Each prop accepts a string or a function that receives state and returns a string.
- [Render Hook Index](render-hook-index.md) - A quick index of render-hook articles that expose ClassName Input, Content Injection Input, and mount lifecycle hooks.

### [Sizing](sizing.md) - How to control the dimensions of the calendar.

- [height](height.md) - Sets the height of the entire calendar, including header and footer.
- [contentHeight](contentHeight.md) - Sets the height of the view area of the calendar.
- [aspectRatio](aspectRatio.md) - Sets the width-to-height aspect ratio of the calendar.
- [expandRows](expandRows.md) - If the rows of a given view don't take up the entire height, they will expand to fit.
- [tableHeaderSticky](tableHeaderSticky.md) - Whether to fix the date-headers at the top of the calendar to the viewport while scrolling.
- [footerScrollbarSticky](footerScrollbarSticky.md) - Whether to fix the view's horizontal scrollbar to the bottom of the viewport while scrolling.

## Views

### [Month View](month-view.md) - The Month view is a specific type of DayGrid view called dayGridMonth. Either install via script tags or ES build system. Then initialize the calendar in JavaScript:


#### Month-View-specific Options
- [fixedWeekCount](fixedWeekCount.md) - Determines the number of weeks displayed in a month view.
- [showNonCurrentDates](showNonCurrentDates.md) - In month view, whether dates in the previous or next month should be rendered at all.

### [TimeGrid View](timegrid-view.md) - A TimeGrid view displays one-or-more horizontal days as well as an axis of time, usually midnight to midnight, on the vertical axis.

- [Week Number Header Render Hooks](week-number-header-render-hooks.md) - In TimeGrid view, week numbers appear in the header above the time axis. Customize their appearance with these hooks.
- [All-Day Header Render Hooks](all-day-header-render-hooks.md) - Customize the cell in the header area of TimeGrid view that labels the all-day section.
- [All-Day Divider Render Hooks](all-day-divider-render-hooks.md) - Customize the divider line beneath the all-day section in TimeGrid view.
- [Day-Lane Render Hooks](day-lane-render-hooks.md) - In TimeGrid view, a "day lane" is the vertical column of time slots for a given day. Customize its appearance with these hooks.

#### TimeGrid-specific Options
- [eventMinHeight](eventMinHeight.md) - In timeGrid view, the minimum height an event is allowed to be.
- [eventShortHeight](eventShortHeight.md) - In timeGrid view, the height threshold for when an event has a "short" style.
- [slotEventOverlap](slotEventOverlap.md) - Determines if timed events in TimeGrid view should visually overlap.
- [slotMinHeight](slotMinHeight.md) - Determines how tall each of the time-axis slots will be. Specified as a number of pixels.
- [allDaySlot](allDaySlot.md) - Determines if the "all-day" slot is displayed at the top of the calendar.
- [eventPrintLayout](eventPrintLayout.md) - Controls how events are rendered in TimeGrid view when printing. Browsers, especially Firefox, have a tough time displaying absolutely-positioned elements across pages, which makes TimeGrid view especially problematic for print.

### [List View](list-view.md) - A list view displays events in a simple vertical list for a specific interval of time. If there are no events during a specific interval of time, the "No events to display" screen is displayed, which can be customized via render hooks. There are 4 preset list views: listDay, listWeek, listMonth, and listYear. They can be initialized in an ES6 setup like so:

- [List Day Render Hooks](list-day-render-hooks.md) - Customize the container elements for each day's section in List view. For the day-header row itself, see List Day Header Render Hooks.
- [List Day Header Render Hooks](list-day-header-render-hooks.md) - In List view, a "day header" is the row that displays the date above a group of events. Customize its appearance with these hooks. For the container elements of each day's section, see List Day Render Hooks.
- [No-Events Render Hooks](no-events-render-hooks.md) - In list view, the “No events to display” message.

#### List-View-specific Options
- [listDayFormat](listDayFormat.md) - A Date Formatter that affects the text on the left side of the day headings in list view.
- [listDayAltFormat](listDayAltFormat.md) - A Date Formatter that affects the text on the right side of the day headings in list view.

### [DayGrid View](daygrid-view.md) - A DayGrid view displays one or more cells, each representing a day.

- [Inline Week Number Render Hooks](inline-week-number-render-hooks.md) - In DayGrid view, week numbers appear inline within the day cells. Customize their appearance with these hooks.

#### Daygrid-specific Options
- [dayCellFormat](dayCellFormat.md) - In DayGrid view, controls the date text shown in each day cell.
- [monthStartFormat](monthStartFormat.md) - When a dayGrid view is programmed to span across months, the text format for the first cell of each month.

### [Multi-Month Stack](multimonth-stack.md) - You can create a specific type of Multi-Month Grid with a single column. The user must scroll to see months beyond the first.

### [Multi-Month Grid](multimonth-grid.md) - The Multi-Month view displays multiple individual months.

- [Single Month Render Hooks](single-month-render-hooks.md) - Customize the appearance of each individual month within Multi-Month view.
- [Single Month Header Render Hooks](single-month-header-render-hooks.md) - In Multi-Month view, the month header is the title element above each month grid (e.g. "January 2025").

#### Multimonth-specific Options
- [multiMonthMaxColumns](multiMonthMaxColumns.md) - The maximum columns of months that Multi-Month Grid will attempt to render.
- [singleMonthMinWidth](singleMonthMinWidth.md) - Multi-Month Grid will not allow each mini-month to be become smaller than this pixel value. This value includes padding.
- [singleMonthTitleFormat](singleMonthTitleFormat.md) - In Multi-Month views, the format of the text above each month.

### [Timeline View](timeline-view.md) - FullCalendar Premium provides a view called "timeline view" with a customizable horizontal time-axis and resources as rows.

- [Resource Column Header Render Hooks](resource-column-header-render-hooks.md) - The "resource column header" is above the resource data and displays the text "Resources" by default.
- [Resource Column Divider Render Hooks](resource-column-divider-render-hooks.md) - Customize the divider line between the resource datagrid area and the timeline area.
- [Resource Header Row Render Hooks](resource-header-row-render-hooks.md) - Customize the header rows of the resource datagrid area in Timeline view.
- [Resource Row Render Hooks](resource-row-render-hooks.md) - Customize the body rows of the resource datagrid area in Timeline view. Does not apply to resource-group header rows within the body.
- [Resource Cell Render Hooks](resource-cell-render-hooks.md) - In Resource Timeline view, "resource cells" are the cells in the resource area on the left side of the view. Each cell corresponds to a column field (such as the resource title or a custom column from resourceColumns). These hooks also fire for resource-group cells — when info.resource is absent, the cell belongs to a group row rather than an individual resource.
- [Resource Expander Render Hooks](resource-expander-render-hooks.md) - In hierarchical Resource Timeline view, customize the indent and expander elements that appear in front of each resource row.
- [Resource Lane Render Hooks](resource-lane-render-hooks.md) - A resource "lane" is an element in resource-timeline view. It runs horizontally across the timeline slots for each resource.
- [Resource Group Header Render Hooks](resource-group-header-render-hooks.md) - In resource timeline view, a resource group "header" is where a group's name is displayed, at the top of each row group.
- [Resource Group Lane Render Hooks](resource-group-lane-render-hooks.md) - In resource timeline view, a resource group "lane" is the horizontal area running along the time slots.
- [Non-Resource Timeline Render Hooks](timeline-render-hooks.md) - Customize elements specific to Timeline view without resources.

#### Timeline-specific Options
- [resourceGroupField](resourceGroupField.md) - Visually groups resources by certain criteria.
- [resourceColumnsWidth](resourceColumnsWidth.md) - Determines the width of the area that contains the list of resources.
- [resourceColumns](resourceColumns.md) - Turns the resource area from a plain list of titles into a grid of data.
- [resourcesInitiallyExpanded](resourcesInitiallyExpanded.md) - Whether child resources should be expanded when the view loads.
- [slotMinWidth](slotMinWidth.md) - Determines how wide each of the time-axis slots will be. Specified as a number of pixels.
- [eventMinWidth](eventMinWidth.md) - In timeline view, the minimum width an event is allowed to be.
- [Timeline View with no Resources](timeline-view-no-resources.md) - You might like the way the time axis operates in Timeline view, but you simply don't want to display resource rows. If this is the case, you can initialize a plain timeline view in an ES6 setup like so:

### [Vertical Resource View](vertical-resource-view.md) - FullCalendar Premium provides TimeGrid view and DayGrid view with the ability to display resources as columns. For example, a TimeGrid day resource view can be initialized in an ES6 setup like so:

- [datesAboveResources](datesAboveResources.md) - Determines if resourceTimeGrid or resourceDayGrid views should render their date headings above their resource headings.
- [Resource DayGrid View](resource-daygrid-view.md) - A DayGrid view like dayGridDay can be given resource functionality. It is initialized in an ES6 setup like so:

### [Custom Views](custom-views.md) - It's possible to take a pre-defined view that FullCalendar provides and create your own view that spans a different periods of time. You can even code your own view from scratch with JS.


#### Techniques
- [Custom Views via Settings](custom-view-with-settings.md) - It is possible to customize an existing available view by tweaking settings.
- [Custom Views via JS](custom-view-with-js.md) - For advanced developers, FullCalendar provides an API for building custom views with the unlimited flexibility of JavaScript code.

#### Duration Settings
- [duration](duration.md) - Sets the exact duration of a custom view.
- [dayCount](dayCount.md) - Sets the exact number of days displayed in a custom view, regardless of weekends or hiddenDays.
- [visibleRange](visibleRange.md) - Sets the exact date range that is visible in a view.

### [View API](view-api.md) - FullCalendar provides settings, methods, and callbacks for interacting with and switching the current view.

- [initialView](initialView.md) - The initial view when the calendar loads.
- [View Object](view-object.md) - A View object contains information about a calendar view, such as title and date range. This information about the current view is passed into nearly every handler.
- [Calendar::view](Calendar-view.md) - Access the View Object for the current view.
- [Calendar::changeView](Calendar-changeView.md) - Immediately switches to a different view.
- [View Render Hooks](view-render-hooks.md) - viewClass - a ClassName Input for the root view element. Called whenever the view changes.
- [Table Render Hooks](table-render-hooks.md) - Customize the table-structured layout used across views.
- [Highlight Render Hooks](highlight-render-hooks.md) - Customize the highlight element that appears when the user is selecting a date range.
- [Filler Render Hooks](filler-render-hooks.md) - Customize the space-filling element used to maintain layout alignment — in the all-day section to offset the scrollbar width of the timed section, and in Resource Timeline view when resource rows don't fill the full height.

## Date & Time

### [Date & Time Display](date-display.md) - Settings that control presence/absense of dates as well as their styling and text. These settings work across a variety of different views.

- [Day-Header Render Hooks](day-header-render-hooks.md) - Customize the header elements above the day cells in daygrid and timegrid views with the following options. Also, the title elements for each day in list view. For the timeline view, see the slot header render hooks.
- [Day-Header Row Render Hooks](day-header-row-render-hooks.md) - Customize the row that contains day header cells in DayGrid and TimeGrid views.
- [Day-Header Divider Render Hooks](day-header-divider-render-hooks.md) - Customize the divider line beneath the day header cells in DayGrid & TimeGrid views.
- [Day-Row Render Hooks](day-row-render-hooks.md) - Customize the horizontal day row in table-based date layouts.
- [Day-Cell Render Hooks](day-cell-render-hooks.md) - Customize the day cells in DayGrid view and the all-day section of TimeGrid view with the following options. For TimeGrid day lanes (the time-slot columns), see Day-Lane Render Hooks.
- [Slot Header Render Hooks](slot-header-render-hooks.md) - Customize the slot header elements — where the date/time text is displayed — in timegrid and timeline views.
- [Slot Header Row Render Hooks](slot-header-row-render-hooks.md) - Customize the row that contains slot header cells in TimeGrid and Timeline views.
- [Slot Header Divider Render Hooks](slot-header-divider-render-hooks.md) - Customize the divider line between the slot header column (time labels) and the slot lanes in TimeGrid and Timeline views.
- [Slot Lane Render Hooks](slot-lane-render-hooks.md) - Customize the slot lane elements in timegrid and timeline views. The lane is the long span of content next to the slot's date/time text. In timegrid view, this is the horizontal space that passes under all of the days. In timeline view, this is the vertical space that passes through the resources.

#### Whole-day Settings
- [weekends](weekends.md) - Whether to include Saturday/Sunday columns in any of the calendar views.
- [hiddenDays](hiddenDays.md) - Exclude certain days-of-the-week from being displayed.
- [dayHeaders](dayHeaders.md) - Whether the day headers should appear. For the Month, TimeGrid, and DayGrid views.
- [dayHeaderFormat](dayHeaderFormat.md) - Determines the text that will be displayed on the calendar's column headings.
- [dayMinWidth](dayMinWidth.md) - If specified, when the calendar gets narrow enough where day cells can no longer meet their dayMinWidth, horizontal scrollbars will appear.
- [dayNarrowWidth](dayNarrowWidth.md) - When a day column becomes narrower than this pixel width, FullCalendar switches to "narrow" date text/layout variants.

#### Time-Axis Settings
- [slotDuration](slotDuration.md) - The frequency for displaying time slots.
- [slotHeaderInterval](slotHeaderInterval.md) - The frequency that the time slots should be labelled with text.
- [slotHeaderFormat](slotHeaderFormat.md) - Determines the text that will be displayed within a time slot.
- [slotMinTime](slotMinTime.md) - Determines the first time slot that will be displayed for each day.
- [slotMaxTime](slotMaxTime.md) - Determines the last time slot that will be displayed for each day. In line with the discussion about the Event object, it is important to stress that this should be specified as an exclusive end time.
- [scrollTime](scrollTime.md) - Determines how far forward the scroll pane is initially scrolled.
- [scrollTimeReset](scrollTimeReset.md) - Whether the view should scroll to scrollTime every time the date range changes.

#### Methods
- [scrollToTime](scrollToTime.md) - Programatically scroll the current view to the given time.

#### Callbacks
- [datesSet](datesSet.md) - Called after the calendar's date range has been initially set or changed in some way and the DOM has been updated.

### [Date Navigation](date-navigation.md) - Methods and settings that determine the view's current dates.

- [initialDate](initialDate.md) - The initial date displayed when the calendar first loads.
- [dateIncrement](dateIncrement.md) - How far into the future/past the calendar navigates when prev/next is executed.
- [dateAlignment](dateAlignment.md) - Determines the first visible day of a custom view.
- [validRange](validRange.md) - Limits which dates the user can navigate to and where events can go.

#### Methods
- [Calendar::prev](Calendar-prev.md) - Moves the calendar one step back (by a month or week for example).
- [Calendar::next](Calendar-next.md) - Moves the calendar one step forward (by a month or week for example).
- [Calendar::prevYear](Calendar-prevYear.md) - Moves the calendar back one year.
- [Calendar::nextYear](Calendar-nextYear.md) - Moves the calendar forward one year.
- [Calendar::today](Calendar-today.md) - Moves the calendar to the current date.
- [Calendar::gotoDate](Calendar-gotoDate.md) - Moves the calendar to an arbitrary date.
- [Calendar::incrementDate](Calendar-incrementDate.md) - Moves the calendar forward/backward an arbitrary amount of time.
- [Calendar::getDate](Calendar-getDate.md) - Returns a Date for the current date of the calendar.

### [Date Nav Links](date-nav-links.md) - Turns various datetime text into clickable links that the user can use for navigation.

- [navLinks](navLinks.md) - Determines if day names and week names are clickable.
- [navLinkClass](navLinkClass.md) - A ClassName Input for each navLink element.
- [navLinkDayClick](navLinkDayClick.md) - Determines what happens upon a day heading nav-link click.
- [navLinkWeekClick](navLinkWeekClick.md) - Determines what happens upon a week-number nav-link click.

### [Week Numbers](week-numbers.md) - Display week numbers in various parts of your calendar views.

- [weekNumbers](weekNumbers.md) - Determines if week numbers should be displayed on the calendar.
- [weekNumberCalculation](weekNumberCalculation.md) - The method for calculating week numbers that are displayed with the weekNumbers setting.
- [weekTextLong](weekTextLong.md) - Like weekTextShort but only used when the date-formatting week setting is set to 'long'.
- [weekTextShort](weekTextShort.md) - The short heading text for week numbers. Also affects weeks in date formatting.
- [weekNumberFormat](weekNumberFormat.md) - Controls the week number text.

### [Date Clicking & Selecting](date-clicking-selecting.md) - Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device.

- [selectable](selectable.md) - Allows a user to highlight multiple days or timeslots by clicking and dragging.
- [selectMirror](selectMirror.md) - Whether to draw a "placeholder" event while the user is dragging.
- [unselectAuto](unselectAuto.md) - Whether clicking elsewhere on the page will cause the current selection to be cleared.
- [unselectCancel](unselectCancel.md) - A way to specify elements that will ignore the unselectAuto option.
- [selectOverlap](selectOverlap.md) - Determines whether the user is allowed to select periods of time that are occupied by events.
- [selectConstraint](selectConstraint.md) - Limits user selection to certain windows of time.
- [selectAllow](selectAllow.md) - Exact programmatic control over where the user can select.
- [selectMinDistance](selectMinDistance.md) - The minimum distance the user's mouse must travel after a mousedown, before a selection is allowed.

#### Callbacks
- [dateClick](dateClick.md) - Triggered when the user clicks on a date or a time.
- [select](select-callback.md) - Triggered when a date/time selection is made.
- [unselect](unselect-callback.md) - Triggered when the current selection is cleared.

#### Methods
- [Calendar::select](Calendar-select.md) - A method for programmatically selecting a period of time. It accepts two different signatures:
- [Calendar::unselect](Calendar-unselect.md) - A method for programmatically clearing the current selection.

### [Now Indicator](now-indicator.md) - You can display a marker that represents the exact current time in both TimeGrid view and Timeline view.

- [nowIndicator](nowIndicator.md) - Whether or not to display a marker indicating the current time.
- [now](now.md) - Explicitly sets the "today" date of the calendar. This is the day that is normally highlighted in yellow.
- [Now-Indicator Header Render Hooks](now-indicator-header-render-hooks.md) - Customize the now-indicator "arrow" element that appears in the time axis of TimeGrid view and Timeline view.
- [Now-Indicator Line Render Hooks](now-indicator-line-render-hooks.md) - Customize the now-indicator "line" element that appears over the day columns of TimeGrid view and Timeline view.
- [Now-Indicator Dot Render Hooks](now-indicator-dot-render-hooks.md) - Customize the now-indicator "dot" element that appears alongside the now-indicator line in the time axis of TimeGrid view and Timeline view.

### [Business Hours](business-hours.md) - Emphasize a view's "business hours" (aka "working hours").

- [businessHours](businessHours.md) - Emphasizes certain time slots on the calendar. By default, Monday-Friday, 9am-5pm.
- [businessHours-per-resource](businessHours-per-resource.md) - The main businessHours settings can be applied more granularly to individual resources via the businessHours property on the Resource input
- [Business Hours Render Hooks](business-hours-render-hooks.md) - Customize the elements that shade non-business hours.

## Events

### [Event Model](event-model.md)

- [Event Parsing](event-parsing.md) - When you give your calendar event data, whether it's through an array, a json feed, or the addEvent method, you specify the event as a plain JavaScript object with properties. This object then gets "parsed" into a proper Event Object that is then exposed in other parts of the API, like the event render hooks method.
- [Event Object](event-object.md) - A JavaScript object that FullCalendar uses to store information about a calendar event. It is exposed in various places of the API such as getEventById and provides methods for dynamic manipulation. It was originally parsed from a plain object.
- [Recurring Events](recurring-events.md) - A recurring event is an event that happens more than once, on a repeating schedule. When a repeating event is turned into individual event instances with individual dates, it is called "expanding" the event.
- [RRule Plugin](rrule-plugin.md) - The RRule plugin is a connector to the rrule js library. It is powerful for specifying recurring events, moreso than FullCalendar's built-in simple event recurrence.

#### Event Data Parsing
- [eventDataTransform](eventDataTransform.md) - A hook for transforming custom data into a standard Event object.
- [defaultAllDay](defaultAllDay.md) - Determines the default value for each Event Object's allDay property when it is unspecified.
- [defaultAllDayEventDuration](defaultAllDayEventDuration.md) - A fallback duration for all-day Event Objects without a specified end value.
- [defaultTimedEventDuration](defaultTimedEventDuration.md) - A fallback duration for timed Event Objects without a specified end value.
- [forceEventDuration](forceEventDuration.md) - A flag to force assignment of an event's end if it is unspecified.

#### Methods
- [Calendar::getEvents](Calendar-getEvents.md) - Retrieves events that FullCalendar has in memory.
- [Calendar::getEventById](Calendar-getEventById.md) - Returns a single event with the matching id.
- [Calendar::addEvent](Calendar-addEvent.md) - Adds a new event to the calendar.
- [Event::setProp](Event-setProp.md) - Modifies any of the non-date-related properties of an Event Object.
- [Event::setExtendedProp](Event-setExtendedProp.md) - Modifies a single property in an Event Object's extendedProps hash.
- [Event::setStart](Event-setStart.md) - Sets an event's start date.
- [Event::setEnd](Event-setEnd.md) - Sets an event's end date.
- [Event::setDates](Event-setDates.md) - Sets an event's start date, end date, and allDay properties at the same time.
- [Event::setAllDay](Event-setAllDay.md) - Sets whether an event is considered all-day.
- [Event::moveStart](Event-moveStart.md) - Will move an event's start date by a specific period of time.
- [Event::moveEnd](Event-moveEnd.md) - Will move an event's end date by a specific period of time.
- [Event::moveDates](Event-moveDates.md) - Will move an event's start and end dates by a specific period of time.
- [Event::formatRange](Event-formatRange.md) - Formats an event's dates into a string.
- [Event::remove](Event-remove.md) - Removes an event from the calendar.
- [Event::getResources](Event-getResources.md) - Gets the Resources associated with the given event.
- [Event::setResources](Event-setResources.md) - Sets the Resources associated with the given event.
- [Event::toPlainObject](Event-toPlainObject.md) - Serializes an Event API Object to a plain object that would be fit for JSON.stringify.

#### Callbacks
- [eventAdd](eventAdd.md) - Called after an event has been added to the calendar.
- [eventChange](eventChange.md) - Called after an event has been modified in some way.
- [eventRemove](eventRemove.md) - Called after an event has been removed from the calendar.
- [eventsSet](eventsSet.md) - Called after event data is initialized OR changed in any way.

### [Event Sources](event-source.md)

- [events (as an array)](events-array.md) - An array of Event Objects that will be displayed on the calendar.
- [events (as a json feed)](events-json-feed.md) - A URL of a JSON feed that the calendar will fetch Event Objects from.
- [events (as a function)](events-function.md) - A custom function for programmatically generating Events.
- [events from Google Calendar](google-calendar.md) - FullCalendar can display events from a public Google Calendar.
- [events from an iCalendar feed](icalendar.md) - FullCalendar can display events from a public iCalendar feed.
- [Event Source Object](event-source-object.md) - An "event source" is anything that provides FullCalendar with data about events.
- [eventSources](eventSources.md) - A way to specify multiple event sources.
- [eventSourceSuccess](eventSourceSuccess.md) - A function that gets called when fetching succeeds. It can transform the response. Gets called for any type of Event source.
- [eventSourceFailure](eventSourceFailure.md) - Called when any of the event sources fails. Probably because an AJAX request failed.
- [initialEvents](initialEvents.md) - This is exactly like specifying event as an array except that if the supplied value changes, the calendar will NOT be updated to reflect. Only applicable to declarative front-end frameworks such as React, Vue, and Angular.

#### Event Requesting
- [startParam](startParam.md) - A parameter of this name will be sent to each JSON event feed. It describes the start of the interval being fetched.
- [endParam](endParam.md) - A parameter of this name will be sent to each JSON event feed. It describes the exclusive end of the interval being fetched.
- [timeZoneParam](timeZoneParam.md) - A parameter of this name will be sent to each JSON event feed. It describes the timezone of the startParam and endParam values, as well as the desired timezone of the returned events.
- [lazyFetching](lazyFetching.md) - Determines when event fetching should occur.
- [loading](loading.md) - Triggered when event or resource fetching starts/stops.

#### Methods
- [Calendar::getEventSources](Calendar-getEventSources.md) - Retrieves all Event Source Objects.
- [Calendar::getEventSourceById](Calendar-getEventSourceById.md) - Retrieves a specific Event Source Object.
- [Calendar::addEventSource](Calendar-addEventSource.md) - Dynamically adds an event source.
- [Calendar::refetchEvents](Calendar-refetchEvents.md) - Refetches events from all sources and rerenders them on the screen.
- [EventSource::refetch](EventSource-refetch.md) - Causes this event source to fetch its event data again.
- [EventSource::remove](EventSource-remove.md) - Removes all events associated with this source and prevents it from being fetched again.

### [Event Display](event-display.md) - How to control the appearance of events on your calendar.

- [eventColor](eventColor.md) - Sets the color for all foreground events on the calendar. It does NOT apply to background events.
- [eventContrastColor](eventContrastColor.md) - Sets the contrast color for all events on the calendar. Used to color text and other elements that need to be visible against the event's background.
- [eventDisplay](eventDisplay.md) - Controls which preset rendering style events use. Possible values:
- [eventTimeFormat](eventTimeFormat.md) - Determines the time-text that will be displayed on each event.
- [displayEventTime](displayEventTime.md) - Whether or not to display the text for an event's date/time.
- [displayEventEnd](displayEventEnd.md) - Whether or not to display an event's end time.
- [nextDayThreshold](nextDayThreshold.md) - When an event's end time spans into another day, the minimum time it must be in order for it to render as if it were on that day.
- [eventOrder](eventOrder.md) - Determines the ordering events within the same day.
- [eventOrderStrict](eventOrderStrict.md) - Ensures the eventOrder setting is strictly followed.
- [eventSlicing](eventSlicing.md) - Controls whether multi-day events can be visually split when a "+more" link interrupts them in DayGrid.
- [progressiveEventRendering](progressiveEventRendering.md) - When to render multiple asynchronous event sources in an individual or batched manner.
- [backgroundEventColor](backgroundEventColor.md) - Sets the color for all background events on the calendar.
- [Event Render Hooks](event-render-hooks.md) - Customize the rendering of foreground events (NOT background events) with the following options:
- [Block Event Render Hooks](block-event-render-hooks.md) - Customize rectangular color-filled events — essentially all non-list events. These hooks apply in addition to the general Event Render Hooks. For more targeted hooks, see Row Event Render Hooks and Column Event Render Hooks.
- [Row Event Render Hooks](row-event-render-hooks.md) - Customize rectangular color-filled events that render horizontally — all-day events in DayGrid and TimeGrid views, as well as Timeline events. These hooks apply in addition to the general Event Render Hooks and Block Event Render Hooks.
- [Column Event Render Hooks](column-event-render-hooks.md) - Customize rectangular color-filled events that render vertically — timed events in TimeGrid view. These hooks apply in addition to the general Event Render Hooks and Block Event Render Hooks.
- [List Item Event Render Hooks](list-item-event-render-hooks.md) - Customize bullet-point style events — timed events in DayGrid view and events in List view. These hooks apply in addition to the general Event Render Hooks.
- [Background Event Render Hooks](background-event-render-hooks.md) - Customize the rendering of Background Events:

### [Event Clicking & Hovering](event-clicking-hovering.md) - Handlers to know when an event has been clicked or hovered over.

- [eventClick](eventClick.md) - Triggered when the user clicks an event.
- [eventMouseEnter](eventMouseEnter.md) - Triggered when the user mouses over an event. Similar to the native mouseenter.
- [eventMouseLeave](eventMouseLeave.md) - Triggered when the user mouses out of an event. Similar to the native mouseleave.

### [Event Dragging & Resizing](event-dragging-resizing.md) - How to enable and control where the user can drag-n-drop and resize events. Start by setting the editable setting to true. If you want to allow external elements to be dropped onto your calendar, visit the droppable, drop, and eventReceive articles.

- [External Event Dragging](external-dragging.md) - It's possible to take elements that live outside of a calendar and make them drag-and-droppable. When they are dropped on a specific date of a calendar, a new event might be created and certain callbacks might fire. It is possible to achieve this using FullCalendar alone, without any third party libraries.
- [Dragging Between Calendars](other-calendar-dragging.md) - It's possible to initialize two or more separate Calendars, and then allow the user to drag events between the calendars!
- [Third-Party Dragging Libraries](third-party-dragging.md) - It's possible to leverage a third-party library to do your external element drag-n-drop instead of using FullCalendar. You might want to do this if you prefer the visual effects of another library, need "sorting" functionality, or need the ability to drag-n-drop between multiple containers, functionality that FullCalendar does not have.

#### Flags
- [editable](editable.md) - Determines whether the events on the calendar can be modified.
- [eventStartEditable](eventStartEditable.md) - Allow events' start times to be editable through dragging.
- [eventResizableFromStart](eventResizableFromStart.md) - Whether the user can resize an event from its starting edge.
- [eventDurationEditable](eventDurationEditable.md) - Allow events' durations to be editable through resizing.
- [eventResourceEditable](eventResourceEditable.md) - Determines whether the user can drag events between resources.
- [droppable](droppable.md) - Determines if external draggable elements or events from other calendars can be dropped onto the calendar.

#### Effects
- [eventDragMinDistance](eventDragMinDistance.md) - How many pixels the user's mouse/touch must move before an event drag activates.
- [dragRevertDuration](dragRevertDuration.md) - Time it takes for an event to revert to its original position after an unsuccessful drag.
- [dragScroll](dragScroll.md) - Whether to automatically scoll the scroll-containers during event drag-and-drop and date selecting.
- [snapDuration](snapDuration.md) - The time interval at which a dragged event will snap to the time axis. Also affects the granularity at which selections can be made.
- [allDayMaintainDuration](allDayMaintainDuration.md) - Determines how an event's duration should be mutated when it is dragged from a timed section to an all-day section and vice versa.

#### Control
- [eventOverlap](eventOverlap.md) - Determines if events being dragged and resized are allowed to overlap each other.
- [eventConstraint](eventConstraint.md) - Limits event dragging and resizing to certain windows of time.
- [eventAllow](eventAllow.md) - Exact programmatic control over where an event can be dropped.
- [dropAccept](dropAccept.md) - Provides a way to filter which external elements can be dropped onto the calendar.

#### Callbacks
- [eventDragStart](eventDragStart.md) - Triggered when event dragging begins.
- [eventDragStop](eventDragStop.md) - Triggered when event dragging stops.
- [eventDrop](eventDrop.md) - Triggered when dragging stops and the event has moved to a different day/time.
- [drop](drop.md) - Called when an external draggable element or an event from another calendar has been dropped onto the calendar.
- [eventReceive](eventReceive.md) - Called when an external draggable element with associated event data was dropped onto the calendar. Or an event from another calendar.
- [eventLeave](eventLeave.md) - Triggered when on a calendar when one if its events is about to be dropped onto another calendar.
- [eventResizeStart](eventResizeStart.md) - Triggered when event resizing begins.
- [eventResizeStop](eventResizeStop.md) - Triggered when event resizing stops.
- [eventResize](eventResize.md) - Triggered when resizing stops and the event has changed in duration.

### [Event Popover](event-popover.md) - When not all events will fit in a given day, you can display the excess events in a small window that will show up when the user clicks a "more" link.

- [dayMaxEventRows](dayMaxEventRows.md) - In dayGrid view, the max number of stacked event levels within a given day. This includes the +more link if present. The rest will show up in a popover.
- [dayMaxEvents](dayMaxEvents.md) - In, dayGrid view, the max number of events within a given day, not counting the +more link. The rest will show up in a popover.
- [eventMaxStack](eventMaxStack.md) - For timeline view, the maximum number of events that stack top-to-bottom. For timeGrid view, the maximum number of events that stack left-to-right.
- [moreLinkClick](moreLinkClick.md) - Determines the action taken when the user clicks on a "more" link created by the dayMaxEventRows or dayMaxEvents options.
- [popoverFormat](popoverFormat.md) - Determines the date format of title of the popover created by the moreLinkClick option.
- [More-Link Render Hooks](more-link-render-hooks.md) - These hooks apply to more-links across views. For subtype-specific styling, see Column More-Link Render Hooks and Row More-Link Render Hooks.
- [Column More-Link Render Hooks](column-more-link-render-hooks.md) - Column more-links appear in TimeGrid view when too many timed events overlap within a day column.
- [Row More-Link Render Hooks](row-more-link-render-hooks.md) - Row more-links appear in row-based layouts such as DayGrid rows and Timeline rows when too many events would otherwise be shown.

### [Background Events](background-events.md) - Events that appear as background highlights can be achieved by setting an Event Object's display property to "background":

## Resources

### [Resource Data](resource-data.md) - How to get resources onto your calendar and how to manipulate resource data thereafter.

- [resources (as an array)](resources-array.md) - Tells the calendar to display resources from an array input.
- [resources (as a JSON feed)](resources-json-feed.md) - Tells the calendar to fetch the resource list from a remote script.
- [resources (as a function)](resources-function.md) - A custom function for programmatically generating raw Resources objects.
- [Resource Parsing](resource-parsing.md) - All of the techniques for specifying resources accept an array of raw objects. These raw objects are "parsed" into proper Resource objects, which are accessible via methods like getResources and getResourceById.
- [Resource Object](resource-object.md) - Raw resource object are eventually parsed into proper resource objects, which are accessible via Calendar methods such as getResources and getResourceById. You can read their properties or manipulate them via methods.
- [Associating Events with Resources](resources-and-events.md) - How to specify which resources your events are assigned to.
- [refetchResourcesOnNavigate](refetchResourcesOnNavigate.md) - Whether to refetch and rerender resources when the user navigates to a different date or changes the view.
- [initialResources](initialResources.md) - This is exactly like specifying resources as an array except that if the supplied value changes, the calendar will NOT be updated to reflect. Only applicable to declarative front-end frameworks such as React, Vue, and Angular.

#### Methods
- [refetchResources](refetchResources.md) - Causes the resource data to be fetched and freshly rerendered.
- [getTopLevelResources](getTopLevelResources.md) - A method that retrieves only top-level Resources.
- [getResources](getResources.md) - A method that retrieves all Resources, including children, as a single flat list.
- [getResourceById](getResourceById.md) - A method that retrieves a specific Resource Object in memory.
- [addResource](addResource.md) - Allows programmatic rendering of a new resource on the calendar after the initial set of resources has already been displayed.
- [Resource::getParent](Resource-getParent.md) - Returns the parent Resource of a child resource.
- [Resource::getChildren](Resource-getChildren.md) - Returns a list of a resource's child resources.
- [Resource::getEvents](Resource-getEvents.md) - Retrieves a list of Event Objects that are associated with the given resource.
- [Resource::setProp](Resource-setProp.md) - Modifies any of the properties of a Resource Object.
- [Resource::setExtendedProp](Resource-setExtendedProp.md) - Modifies a single property in an Resource Object's extendedProps hash.
- [Resource::remove](Resource-remove.md) - Programmatically removes a resource from the calendar.
- [Resource::toPlainObject](Resource-toPlainObject.md) - Serializes a Resource API Object to a plain object that would be fit for JSON.stringify.

#### Callbacks
- [resourceAdd](resourceAdd.md) - Called after a resource has been added to the calendar.
- [resourceChange](resourceChange.md) - Called after a resource has been modified in some way.
- [resourceRemove](resourceRemove.md) - Called after a resource has been removed from the calendar.
- [resourcesSet](resourcesSet.md) - Called after resource data is initialized OR changed in any way.

### [Resource Display](resource-display.md) - Control the visual aspects of your resources, such as ordering and text.

- [resourceOrder](resourceOrder.md) - Determines the ordering of the resource list.
- [filterResourcesWithEvents](filterResourcesWithEvents.md) - When this setting is activated, only resources that have associated events will be displayed.
- [Resource Day Header Render Hooks](resource-day-header-render-hooks.md) - In Resource DayGrid and Resource TimeGrid views, a "resource day header" is the cell in the column header that displays a resource's name.

## International

### [Locale](localization.md) - You can tailor the calendar for certain languages (aka "locales"). The locale setting it the most important, as it sets the defaults of many other options at the same time.

- [locale](locale.md) - The locale and locales options allow you to localize certain aspects of the calendar:
- [direction](direction.md) - The direction that elements in the calendar are rendered. Either left-to-right or right-to-left.
- [firstDay](firstDay.md) - The day that each week begins.

### [timeZone](timeZone.md) - A time zone is a region of the world that serves as a context for displaying dates. It affects a Calendar instance in the following ways:

## Third Party

### [TypeScript Support](typescript.md) - It is possible to use FullCalendar and Scheduler with TypeScript, a type-aware superset of the JavaScript language that compiles down to JavaScript.

### [React Component](react.md) - FullCalendar seamlessly integrates with React, versions 17 - 19. It provides a component that exactly matches the functionality of FullCalendar's standard API.

### [Preact Component](preact.md) - FullCalendar seamlessly integrates with the Preact. It provides a component that exactly matches the functionality of FullCalendar's standard API.

### [Vue Component](vue.md) - FullCalendar seamlessly integrates with Vue 3. It provides a component that exactly matches the functionality of FullCalendar's standard API.

### [Angular Component](angular.md) - FullCalendar seamlessly integrates with Angular 16 - 22. It provides a component that exactly matches the functionality of FullCalendar's standard API.

### [Web Component](web-component.md) - FullCalendar comes as a Web Component (aka "Custom Element").

## Accessibility

### [Accessibility](accessibility.md) - FullCalendar leverages WAI-ARIA techniques for increased accessibility with keyboard usage and screen readers.

- [eventInteractive](eventInteractive.md) - Setting to true will cause all events to be focusable/tabbable. By default, only events that have an event.url property are tabbable.
- [headingLevel](headingLevel.md) - Controls the heading level of the calendar's toolbar title, affecting its position in the document's heading hierarchy.
- [Hints](hints.md) - Interactive HTML elements are annotated with aria-label and title attributes to make them more descriptive. It is possible to control the text of these attributes.

### [Touch Support](touch.md) - FullCalendar's Touch support includes smooth scrolling, time-range selection via long-press, and event drag-n-drop/resizing via long-press.

- [longPressDelay](longPressDelay.md) - For touch devices, the amount of time the user must hold down before an event becomes draggable or a date becomes selectable.
- [eventLongPressDelay](eventLongPressDelay.md) - For touch devices, the amount of time the user must hold down before an event becomes draggable.
- [selectLongPressDelay](selectLongPressDelay.md) - For touch devices, the amount of time the user must hold down before a date becomes selectable.

### [Optimizing for Print](print.md) - FullCalendar looks great on a computer screen, but by default it does not look very good for printing on a piece of paper. A web browser isn't able to convert certain things consistently, such as absolute positioning and scrollbars. Fortunately FullCalendar can render differently for print if you configure it to do so.

## Additional Pages

- [V7 JavaScript API Migration Guide](api-migration.md)

- [V7 Changelog](changelog.md)

- [V7 Custom CSS Migration Guide](css-migration.md)

- [schedulerLicenseKey](schedulerLicenseKey.md)

- [dragScrollEls](dragScrollEls.md)

- [Third Party Tools](third-party.md)