---
title: Preact Component
title_for_landing: Preact
---

FullCalendar seamlessly integrates with the [Preact](https://preactjs.com/) JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar's standard API.

This package is released under an MIT license, the same license the standard version of FullCalendar uses. Useful links:

- [Bug report instructions](/reporting-bugs)
- Example project (TODO)
- Runnable project (TODO)

This guide does not go into depth about initializing a Preact project. Please consult the aforementioned example/runnable projects for that.

The first step is to install the FullCalendar-related dependencies:

```bash
npm install --save @fullcalendar/preact temporal-polyfill
```

The `temporal-polyfill` package is small and tree-shakable, and can be used as a global polyfill if you explicitly opt-in ([more info](temporal-polyfill)).

Next, choose one of the standard themes from [themes.fullcalendar.io](https://themes.fullcalendar.io), along with a [color palette](color-palettes). The examples below show a simplified way of importing the color palette (ex: `purple.css`), but please be aware, there are better ways to integrated with [dark mode](color-palettes#dark-mode).

You may then begin to write a parent component that leverages the `<FullCalendar>` component:

```jsx
import FullCalendar from "@fullcalendar/preact";
import themePlugin from "@fullcalendar/preact/themes/monarch"; // YOUR THEME
import dayGridPlugin from "@fullcalendar/preact/daygrid";

// stylesheets
import '@fullcalendar/preact/skeleton.css'; // ALWAYS NEED SKELETON
import '@fullcalendar/preact/themes/monarch/theme.css'; // YOUR THEME
import '@fullcalendar/preact/themes/monarch/palettes/purple.css'; // YOUR THEME'S PALETTE

export default function Calendar() {
  return (
    <FullCalendar
      plugins={[themePlugin, dayGridPlugin]}
      initialView="dayGridMonth"
    />
  );
}
```

You must initialize your calendar with at least one plugin that provides a view!

## Props

The `<FullCalendar>` component is equipped with [all of FullCalendar's options][docs toc]! Just pass them in as props. Example:

```jsx
<FullCalendar
  plugins={[dayGridPlugin]}
  initialView="dayGridMonth"
  weekends={false}
  events={[
    { title: "event 1", date: "2019-04-01" },
    { title: "event 2", date: "2019-04-02" },
  ]}
/>
```

Props for the `<FullCalendar>` component are set the same way for both Class and Functional Components.

## Callbacks

A callback function can be passed into a Preact component and it will be called when something happens. For example, the [dateClick](dateClick) handler is called whenever the user clicks on a date:

```jsx
export default function Calendar() {
  const handleDateClick = (arg) => {
    alert(arg.dateStr);
  };

  return (
    <FullCalendar
      plugins={[ /* ... */ ]}
      dateClick={handleDateClick}
    />
  );
}
```

## Content Injection

There are many settings throughout the API for injecting custom content, like the `eventContent` [event render hook](event-render-hooks). The [Content Injection article](content-injection) explains the general concept. When you're using the Preact implementation, it's possible to return Preact JSX nodes. Example:

```jsx
export default function Calendar() {
  return (
    <FullCalendar
      plugins={[ /* ... */ ]}
      eventContent={renderEventContent}
    />
  );
}

function renderEventContent(eventInfo) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  );
}
```

## Custom Toolbar Markup

You can completely customize the markup for the header or footer toolbars:

```jsx
import FullCalendar, { useCalendarController } from "@fullcalendar/preact";
// ...

export default function Calendar() {
  const controller = useCalendarController();
  const buttons = controller.getButtonState();

  return (
    <div>
      <div class='toolbar'>
        <button onClick={() => controller.today()}>{buttons.today.text}</button>
        <div class='toolbar-title'>{controller.view.title}</div>
      </div>
      <FullCalendar
        controller={controller}
        plugins={[ /* ... */ ]}
      />
    </div>
  );
}
```

More generally, this "controller" technique allows you to use a calendar's data outside the component itself. Learn about the [CalendarController API &raquo;](CalendarController)


## Custom Views with Components

It's possible to make calendar views that have custom rendering logic. The [Custom Views via JS](custom-view-with-js) article explains the general concept. When you're using the Preact connector, it's possible to specify a Preact component. Example:

```jsx
import FullCalendar, { sliceEvents } from "@fullcalendar/preact";
// ...

function CustomView(props) {
  let segs = sliceEvents(props, true); // allDay=true

  return (
    <>
      <div className="view-title">
        {props.dateProfile.currentRange.start.toUTCString()}
      </div>
      <div className="view-events">{segs.length} events</div>
    </>
  );
}

<FullCalendar
  views={{
    custom: CustomView
  }}
/>
```

## Calendar API

Hopefully you won't need to do it often, but sometimes it's useful to access the underlying `Calendar` object for raw data and methods.

This is especially useful for controlling the current date. The [initialDate](initialDate) prop will set the _initial_ date of the calendar, but to change it after that, you'll need to rely on the [date navigation methods](date-navigation).

To do something like this, you'll need to get ahold of the component's ref (short for "reference"). Once you do that, you call the `getApi` method of the "current" component instance:

```jsx
import { useRef } from 'preact/hooks';
import FullCalendar from '@fullcalendar/preact'
// ...

export default function Calendar() {
  const calendarRef = useRef(null)

  function goNext() {
    const calendarApi = calendarRef.current.getApi()
    calendarApi.next()
  }

  return (
    <>
      <button onClick={goNext}>Go Next!</button>
      <FullCalendar
        ref={calendarRef}
        plugins={[ /* ... */ ]}
      />
    </>
  )
}
```

## FullCalendar Premium

How do you use [FullCalendar Premium's](/pricing) plugins with Preact? They are no different than any other plugin. Just follow the same instructions as you did `dayGridPlugin` in the above example. You'll need an additional package however:

```sh
npm install --save @fullcalendar/preact-scheduler
```

Then, initialize your calendar. Make sure to include your [schedulerLicenseKey](schedulerLicenseKey):

```jsx
import FullCalendar from "@fullcalendar/preact";
import themePlugin from "@fullcalendar/preact/themes/monarch";
import resourceTimelinePlugin from "@fullcalendar/preact-scheduler/resource-timeline";

// stylesheets
import '@fullcalendar/preact/skeleton.css';
import '@fullcalendar/preact/themes/monarch/theme.css';
import '@fullcalendar/preact/themes/monarch/palettes/purple.css';

export default function Calendar() {
  return (
    <FullCalendar
      schedulerLicenseKey="XXX"
      plugins={[themePlugin, resourceTimelinePlugin]}
    />
  );
}
```