https://github.com/fullcalendar/fullcalendar

Full-sized drag & drop event calendar in JavaScript
https://github.com/fullcalendar/fullcalendar

calendar event full-sized

Last synced: 5 days ago
JSON representation

Full-sized drag & drop event calendar in JavaScript

• Host: GitHub
• URL: https://github.com/fullcalendar/fullcalendar
• Owner: fullcalendar
• License: mit
• Created: 2009-11-22T23:16:51.000Z (about 15 years ago)
• Default Branch: main
• Last Pushed: 2024-08-13T19:22:10.000Z (5 months ago)
• Last Synced: 2024-10-29T20:26:17.108Z (2 months ago)
• Topics: calendar, event, full-sized
• Language: TypeScript
• Homepage: https://fullcalendar.io
• Size: 31 MB
• Stars: 18,608
• Watchers: 432
• Forks: 3,615
• Open Issues: 1,005
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-starred-test - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (TypeScript)
• awesome - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (TypeScript)
• stars - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (TypeScript)
• awesome-javascript - fullcalendar - Full-sized drag & drop event calendar - ★ 8430 (Form Widgets)
• awesome-starred - fullcalendar/fullcalendar - Full-sized drag & drop event calendar in JavaScript (others)
• StarryDivineSky - fullcalendar/fullcalendar
• stars - fullcalendar - sized drag & drop event calendar in JavaScript | fullcalendar | 18851 | (TypeScript)
• stars - fullcalendar - sized drag & drop event calendar in JavaScript | fullcalendar | 18815 | (TypeScript)

README

        
# FullCalendar

Full-sized drag & drop calendar in JavaScript

- [Project Website](https://fullcalendar.io/)

- [Documentation](https://fullcalendar.io/docs)

- [Changelog](CHANGELOG.md)

- [Support](https://fullcalendar.io/support)

- [License](LICENSE.md)

- [Roadmap](https://fullcalendar.io/roadmap)

Connectors:

- [React](https://github.com/fullcalendar/fullcalendar-react)

- [Angular](https://github.com/fullcalendar/fullcalendar-angular)

- [Vue 3](https://github.com/fullcalendar/fullcalendar-vue) |

  [2](https://github.com/fullcalendar/fullcalendar-vue2)

## Bundle

The [FullCalendar Standard Bundle](bundle) is easier to install than individual plugins, though filesize will be larger. It works well with a CDN.

## Installation

Install the FullCalendar core package and any plugins you plan to use:

```sh

npm install @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid

```

## Usage

Instantiate a Calendar with plugins and options:

```js

import { Calendar } from '@fullcalendar/core'

import interactionPlugin from '@fullcalendar/interaction'

import dayGridPlugin from '@fullcalendar/daygrid'

const calendarEl = document.getElementById('calendar')

const calendar = new Calendar(calendarEl, {

  plugins: [

    interactionPlugin,

    dayGridPlugin

  ],

  initialView: 'timeGridWeek',

  editable: true,

  events: [

    { title: 'Meeting', start: new Date() }

  ]

})

calendar.render()

```

## 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`

[Info about contributing code »](CONTRIBUTING.md)