The main plugin export provides the core time grid functionality for FullCalendar, registering three time-based view types with configurable options.
The main plugin definition that registers time grid views with FullCalendar core.
/**
* Main time grid plugin for FullCalendar
* Provides timeGrid, timeGridDay, and timeGridWeek views
*/
declare const plugin: PluginDef;
export default plugin;
interface PluginDef {
name: string;
initialView: string;
optionRefiners: Record<string, any>;
views: Record<string, ViewSpec>;
}Usage Examples:
import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
// Basic time grid setup
const calendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridWeek'
});
// Customized time grid configuration
const calendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridDay',
slotDuration: '00:15:00',
slotMinTime: '08:00:00',
slotMaxTime: '18:00:00',
allDaySlot: false
});
// Business hours time grid with event handling
const businessCalendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridWeek',
businessHours: {
daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
startTime: '09:00',
endTime: '17:00'
},
slotMinTime: '07:00:00',
slotMaxTime: '19:00:00',
slotDuration: '00:30:00',
events: [
{
title: 'Team Meeting',
start: '2023-12-01T10:00:00',
end: '2023-12-01T11:00:00'
},
{
title: 'Project Review',
start: '2023-12-01T14:30:00',
end: '2023-12-01T15:30:00'
}
],
eventClick: function(info) {
alert('Event: ' + info.event.title);
},
selectable: true,
selectMirror: true,
select: function(selectionInfo) {
// Handle time slot selection
console.log('Selected:', selectionInfo.start, selectionInfo.end);
}
});
// Multi-calendar setup with different time grids
const multiCalendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
initialView: 'timeGridWeek',
nowIndicator: true,
scrollTime: '09:00:00',
height: 'auto',
eventColor: '#378006',
eventTextColor: '#ffffff'
});Base configuration for all time grid views.
interface TimeGridViewSpec extends ViewSpec {
component: typeof DayTimeColsView;
usesMinMaxTime: true;
allDaySlot: boolean;
slotDuration: DurationInput;
slotEventOverlap: boolean;
}The timeGrid view provides:
Single day time grid view showing one day with hourly time slots.
interface TimeGridDayViewSpec extends TimeGridViewSpec {
type: 'timeGrid';
duration: { days: 1 };
}Usage Examples:
const calendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridDay',
events: [
{
title: 'Morning Meeting',
start: '2023-12-01T09:00:00',
end: '2023-12-01T10:30:00'
}
]
});Weekly time grid view showing seven days with hourly time slots.
interface TimeGridWeekViewSpec extends TimeGridViewSpec {
type: 'timeGrid';
duration: { weeks: 1 };
}Usage Examples:
const calendar = new Calendar(calendarEl, {
plugins: [timeGridPlugin],
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
}
});Controls the display of the all-day events section above the time grid.
interface AllDaySlotOption {
allDaySlot?: boolean; // Default: true
}Defines the frequency of time slots in the grid.
interface SlotDurationOption {
slotDuration?: DurationInput; // Default: '00:30:00'
}Controls whether events can visually overlap within time slots.
interface SlotEventOverlapOption {
slotEventOverlap?: boolean; // Default: true
}interface ViewSpec {
component?: ComponentType<any>;
type?: string;
duration?: DurationInput;
usesMinMaxTime?: boolean;
allDaySlot?: boolean;
slotDuration?: DurationInput;
slotEventOverlap?: boolean;
}
interface DurationInput {
years?: number;
months?: number;
weeks?: number;
days?: number;
hours?: number;
minutes?: number;
seconds?: number;
milliseconds?: number;
}