Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

The official React Component for FullCalendar
https://github.com/fullcalendar/fullcalendar-react

calendar event full-sized fullcalendar react

Last synced: 2 days ago
JSON representation

The official React Component for FullCalendar

Awesome Lists containing this project

README

        

# FullCalendar React Component

The official [React](https://reactjs.org/) Component for [FullCalendar](https://fullcalendar.io)

## Installation

Install the React connector, the core package, and any plugins (like [daygrid](https://fullcalendar.io/docs/month-view)):

```sh
npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid
```

## Usage

Render a `FullCalendar` component, supplying [options](https://fullcalendar.io/docs#toc) as props:

```jsx
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

const events = [
{ title: 'Meeting', start: new Date() }
]

export function DemoApp() {
return (


Demo App




)
}

// a custom render function
function renderEventContent(eventInfo) {
return (
<>
{eventInfo.timeText}
{eventInfo.event.title}
>
)
}
```

## Links

- [Documentation](https://fullcalendar.io/docs/react)
- [Example Project](https://github.com/fullcalendar/fullcalendar-examples/tree/main/react)

## Development

You must install this repo with [PNPM](https://pnpm.io/):

```
pnpm install
```

Available scripts (via `pnpm run `):

- `build` - build production-ready dist files
- `dev` - build & watch development dist files
- `test` - test headlessly
- `test:dev` - test interactively
- `lint`
- `clean`