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: 5 days ago
JSON representation

The official React Component for FullCalendar

• Host: GitHub
• URL: https://github.com/fullcalendar/fullcalendar-react
• Owner: fullcalendar
• License: mit
• Created: 2018-12-03T21:32:44.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-07-12T21:47:35.000Z (4 months ago)
• Last Synced: 2024-10-02T00:43:15.699Z (about 1 month ago)
• Topics: calendar, event, full-sized, fullcalendar, react
• Language: JavaScript
• Homepage: https://fullcalendar.io/docs/react
• Size: 1.14 MB
• Stars: 2,043
• Watchers: 20
• Forks: 109
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

• best-of-react - GitHub - 1% open · ⏱️ 05.06.2024): (Other Components)

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`