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()
FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.
Learn moreWith over 300 settings, and more being added every release, FullCalendar can do just about anything.
Learn moreWith over 10 years of open source and over 100 contributors, FullCalendar will always have a free and open source core.
Learn more