The Most PopularJavaScript
Calendar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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()
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'
      }
    }
  }

Built for React

FullCalendar provides a highly performant React component that accepts JSX for rendering nested content

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 2M

NPM downloads per month

Over 70M

CDN downloads per month

Over 17K

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