FullCalendar - JavaScript Event CalendarFullCalendarDemosDocsSupportGetting HelpReporting BugsRequesting FeaturesContributingPricingDec 20 — v6.0.1 releasedThe Most PopularJavaScriptCalendarGet startedView demosView demos123456789101112131415161718npm 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 ReactFullCalendar provides a highly performant React component that accepts JSX for rendering nested contentLearn moreReactVueAngularJavaScriptPowerfulWith over 300 settings, and more being added every release, FullCalendar can do just about anything.Learn moreLightweightReduce your project's bundle size by using FullCalendar's modular plugins.Learn moreSome of our customersOver 1MNPM downloads per monthOver 20MCDN downloads per monthOver 13KGitHub stargazersOpen Source...With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core.Learn moreSupercharged.Level-up by purchasing premium plugins and support.Learn more10% of profits donated to effective charitiesDoes your company use FullCalendar? Tell us »© 2022  FullCalendar LLCGitHubLicenseBlogRoadmap