# Salesforce Lightning Web Component (LWC)
> FullCalendar v7 documentation. Web version: https://fullcalendar.io/docs/salesforce-lwc
FullCalendar can run inside a [Salesforce Lightning Web Component](https://developer.salesforce.com/docs/platform/lwc/guide), letting you embed a calendar directly in a Lightning page, an App Builder component, or a Salesforce Experience Cloud site.
Rather than an NPM package, this integration is distributed as a **zip of Salesforce metadata** that you deploy to your org. It packages FullCalendar's global build as a static resource and wraps it in a `c-full-calendar` Lightning Web Component. FullCalendar renders its button icons as inline SVG rather than icon fonts, which avoids the font-loading and Content Security Policy restrictions that Salesforce's Lightning platform enforces on third-party resources.
Useful links:
- [Standard package readme](https://github.com/fullcalendar/fullcalendar/blob/main/packages/lwc-calendar/README.md)
- [Premium package readme](https://github.com/fullcalendar/fullcalendar-workspace/blob/main/premium/packages/lwc-scheduler/README.md)
- [Bug report instructions](https://fullcalendar.io/reporting-bugs)
This integration is newer than FullCalendar's other framework packages and feedback on the distribution approach is very welcome — please comment on [the tracking issue](https://github.com/fullcalendar/fullcalendar/issues/6196).
## Installation
Download the zip from the GitHub release. The file name carries the version number, so it changes with every release:
- **Download**: fullcalendar-lwc-7.1.0.zip
For premium, see [FullCalendar Premium](#fullcalendar-premium) below. To grab a different version, find it on the [releases page](https://github.com/fullcalendar/fullcalendar/releases) and download its `fullcalendar-lwc-*.zip` asset. LWC support was added in v7.0.1.
Then:
1. Unpack the zip.
2. Copy `force-app/main/default/` into the corresponding package directory of your SFDX project.
3. Deploy it:
```sh
sf project deploy start
```
The zip contains two components: `fullCalendar`, the low-level programmatic wrapper described in this article, and `fullCalendarDemo`, a [ready-made Lightning App Builder component](#lightning-app-builder-demo) you can drop onto a page.
## Basic Usage
In your own component's template, render the `c-full-calendar` tag and give it an `options` object:
```html
```
```js
import { LightningElement } from 'lwc'
export default class MyCalendar extends LightningElement {
calendarOptions = {
initialView: 'dayGridMonth',
events: [
{ title: 'event 1', date: '2026-04-01' },
{ title: 'event 2', date: '2026-04-02' },
],
}
}
```
Unlike the [React](https://fullcalendar.io/docs/react.md) and [Vue](https://fullcalendar.io/docs/vue.md) packages, you do **not** pass a `plugins` array. The static resource is FullCalendar's global build, so all standard plugins and views are already registered.
## Options
The `options` property accepts [all of FullCalendar's options](https://fullcalendar.io/docs/all) as plain key-value pairs, exactly as you would pass them to the `Calendar` constructor.
Three settings are instead supplied as their own attributes on the tag, because the component must load assets for them: `theme`, `theme-palette`, and `locale`.
```html
```
`locale` in particular must be set through the attribute rather than through `options` — the component loads the matching locale asset asynchronously before applying it. See the [localization article](https://fullcalendar.io/docs/localization.md) for what a locale affects.
Options can also be scoped to a single view, or to a type of view, through the `views` option. See [View-Specific Options](https://fullcalendar.io/docs/view-specific-options.md).
### Themes and Palettes
`theme` is one of the five [stock themes](https://fullcalendar.io/docs/stock-themes.md). `theme-palette` is optional; each theme falls back to its own default (shown in bold). See the [color palettes article](https://fullcalendar.io/docs/color-palettes.md) for what a palette controls.
- `classic` — a single built-in palette (`theme-palette` is ignored)
- `breezy` — amber, emerald, **indigo**, rose
- `forma` — **blue**, green, purple, red
- `monarch` — blue, green, **purple**, red, yellow
- `pulse` — blue, green, purple, **red**
## Handlers
Handler functions placed in `options` are called normally:
```js
calendarOptions = {
dateClick: (info) => {
console.log(info.dateStr)
},
}
```
In addition, the component re-dispatches FullCalendar's listeners as LWC custom events. LWC requires event names to be lowercase, so [eventClick](https://fullcalendar.io/docs/eventClick.md) becomes `oneventclick`:
```html
```
```js
handleEventClick(event) {
console.log(event.detail)
}
```
The argument FullCalendar would normally pass to the handler arrives on `event.detail`. Both mechanisms work at once — a re-dispatched event does not replace the function in `options`.
## Modifying Options
To change options after initialization, reassign the `options` object. The wrapper only reacts when the `options` object is **reassigned**. Mutating the existing object in place will not trigger an update. Spread it into a new object instead:
```js
toggleWeekends() {
this.calendarOptions = {
...this.calendarOptions,
weekends: !this.calendarOptions.weekends,
}
}
```
## Content Injection
There are many settings throughout the API for injecting custom content, like the `eventContent` [event render hook](https://fullcalendar.io/docs/event-render-hooks.md). Lightning Web Component templates can't be passed into the calendar, so these settings accept the same formats as vanilla JS: a string, HTML, DOM nodes, or a function returning any of those. See [the vanilla JS instructions](https://fullcalendar.io/docs/vanilla-js.md#content-injection).
## Calendar API
To access the underlying `Calendar` object for raw data and [methods](https://fullcalendar.io/docs/vanilla-js.md#calendar-api) — most commonly for [date navigation](https://fullcalendar.io/docs/date-navigation.md) — call `getCalendar()` on the component instance:
```js
const calendar = this.template.querySelector('c-full-calendar').getCalendar()
calendar.next()
```
## Additional Plugins
Any FullCalendar plugin that ships a global build can be loaded by giving the component an array of static-resource URLs through `plugin-urls`. The component loads each script and registers its plugins during initialization. This is how the [premium Scheduler runtime](#fullcalendar-premium) is added.
## Lightning App Builder Demo
The `fullCalendar` component is intended for programmatic composition and deliberately does not appear in Lightning App Builder. The zip also ships a **FullCalendar Demo** component that does, with representative toolbar, event, interaction, theme, palette, and locale configuration.
To try it after deploying:
1. In the deployed org, open **Setup** from the gear menu.
2. Use **Quick Find** to open **Lightning App Builder**, then click **New**.
3. Select **App Page**, enter a label such as **FullCalendar Demo**, select the standard **One Region** template, and click **Done**.
4. Under **Custom**, drag **FullCalendar Demo** onto the page and choose its **Theme** and **Locale**.
5. Click **Save** and **Activate**, create the Lightning tab if prompted, and add the page to a Lightning app such as **Sales**.
6. Open that app from the App Launcher and verify the calendar and its sample events.
Its source, `fullCalendarDemo`, is a good reference for writing an application-specific wrapper that supplies its own options, data, and handlers.
## FullCalendar Premium
[FullCalendar Premium's](https://fullcalendar.io/pricing) plugins come as a separate zip:
- **Download**: fullcalendar-scheduler-lwc-7.1.0.zip
Other versions are on the [premium releases page](https://github.com/fullcalendar/fullcalendar-workspace/releases). Install it the same way as the standard zip.
This zip is **self-sufficient** — it contains everything the standard zip does, so you don't install both. It deploys an identical `c-full-calendar` component and additionally ships the Scheduler runtime as the `fullCalendarSchedulerLib` static resource, so upgrading from the standard package requires no markup changes. (Deploying both does work, but only so the two can be demoed side by side.)
Point `plugin-urls` at the Scheduler runtime, and supply resources, a resource view, and your [schedulerLicenseKey](https://fullcalendar.io/docs/schedulerLicenseKey.md) through `options`:
```html
```
```js
import fullCalendarSchedulerLib from '@salesforce/resourceUrl/fullCalendarSchedulerLib'
pluginUrls = [`${fullCalendarSchedulerLib}/all/global.js`]
calendarOptions = {
initialView: 'resourceTimelineWeek',
schedulerLicenseKey: 'XXX',
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' },
],
events: [{ title: 'Meeting', start: '2026-07-15T10:00:00', resourceId: 'a' }],
}
```
Set `options.initialView` to a resource view yourself. Without it, the calendar renders the standard `dayGridMonth` default.
With the Scheduler runtime loaded, the component also re-dispatches the resource listeners — [resourcesSet](https://fullcalendar.io/docs/resourcesSet.md), [resourceAdd](https://fullcalendar.io/docs/resourceAdd.md), [resourceChange](https://fullcalendar.io/docs/resourceChange.md) and [resourceRemove](https://fullcalendar.io/docs/resourceRemove.md) — as `onresourcesset`, `onresourceadd`, `onresourcechange` and `onresourceremove`.
The premium zip has its own Lightning App Builder demo, **FullCalendar Scheduler Demo** (source: `fullCalendarSchedulerDemo`), which follows the same [steps as above](#lightning-app-builder-demo) but with resource timeline configuration.
## Known Limitations
- `theme-palette` and `plugin-urls` are read once, during initial render. Recreate the component to change them. `theme` may be changed at any time; the new theme's assets load asynchronously before being applied.
- Two calendars on the same page must not use the same theme with different palettes. Palette CSS variables are page-global per theme.
- The component relies on Salesforce static-resource loading, and on Lightning Web Security allowing FullCalendar's IIFE bundle to attach to its `window` global.