The Most Popular JavaScript
Calendar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

npm install @fullcalendar/react
npm install @fullcalendar/daygrid

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

export const DemoApp = () => (
  <FullCalendar
    plugins={[dayGridPlugin]}
    initialView="dayGridMonth"
  />
)
npm install @fullcalendar/vue
npm install @fullcalendar/daygrid

<template>
  <FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth'
      }
    }
  }
npm install @fullcalendar/angular

import { Component } from '@angular/core'
import { CalendarOptions } from '@fullcalendar/angular'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth',
    events: [
      { title: 'event 1', date: '2019-04-01' },
      { title: 'event 2', date: '2019-04-02' }
    ]
  }
}
npm install @fullcalendar/core
npm install @fullcalendar/daygrid

import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

let calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek'
  }
})

calendar.render()

Built for React

FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.

Learn more

Powerful

With over 300 settings, and more being added every release, FullCalendar can do just about anything.

Learn more

Lightweight

Reduce your project's bundle size by using FullCalendar's modular plugins.

Learn more
Amazon
Amazon
Amazon
Amazon

Some of our customers

Amazon
Uber
Netflix
Intuit
Samsung
Yahoo
PayPal
Akamai
AstraZeneca
Pfizer
Cisco
Deloitte
Accenture
Nasa

Over 1M

NPM downloads per month

Over 20M

CDN downloads per month

Over 13K

GitHub stargazers

Open Source...

With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core.

Learn more

Supercharged.

Level-up by purchasing premium plugins and support.

Learn more