The Most PopularJavaScript
Calendar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 moreReact
Vue
Angular
JavaScript
Powerful
With over 300 settings, and more being added every release, FullCalendar can do just about anything.
Learn moreSome of our customers
Over 2M
NPM downloads per monthOver 70M
CDN downloads per monthOver 17K
GitHub stargazersOpen Source...
With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core.
Learn more