or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

event-rendering.mdindex.mdplugin-definition.mdview-components.md
tile.json

plugin-definition.mddocs/

Plugin Definition

The main plugin export that registers day grid view functionality with FullCalendar core. Provides predefined view configurations for different time spans and integrates with the FullCalendar plugin system.

Capabilities

Default Plugin Export

Main plugin definition created via createPlugin() that registers day grid views and components.

/**
 * Main day grid plugin for FullCalendar
 * Contains view definitions and component registrations
 */
declare const plugin: PluginDef;
export default plugin;

The plugin is created with the following configuration:

interface PluginConfig {
  name: string;
  initialView: string;
  views: {
    [viewName: string]: ViewSpec;
  };
}

View Definitions

The plugin automatically registers five view types with FullCalendar:

interface ViewSpecs {
  dayGrid: {
    component: typeof DayTableView;
    dateProfileGeneratorClass: typeof TableDateProfileGenerator;
  };
  dayGridDay: {
    type: 'dayGrid';
    duration: { days: 1 };
  };
  dayGridWeek: {
    type: 'dayGrid';
    duration: { weeks: 1 };
  };
  dayGridMonth: {
    type: 'dayGrid';
    duration: { months: 1 };
    fixedWeekCount: true;
  };
  dayGridYear: {
    type: 'dayGrid';
    duration: { years: 1 };
  };
}

Usage Examples:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

// Basic month view
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth'
});

// Week view with custom options
const weekCalendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridWeek',
  dayMaxEvents: 3
});

// Year view for overview
const yearCalendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridYear',
  height: 600
});

View Type Details

dayGrid (Base View)

  • Component: DayTableView
  • Date Profile Generator: TableDateProfileGenerator
  • Purpose: Base view type that other grid views extend

dayGridDay (Single Day)

  • Duration: 1 day
  • Purpose: Shows a single day in grid format
  • Use Case: Detailed daily schedule view

dayGridWeek (Weekly Grid)

  • Duration: 1 week
  • Purpose: Shows a week in grid format
  • Use Case: Weekly planning and schedule overview

dayGridMonth (Monthly Grid)

  • Duration: 1 month
  • Fixed Week Count: true (always shows 6 weeks)
  • Purpose: Traditional monthly calendar view
  • Use Case: Standard monthly calendar display

dayGridYear (Yearly Grid)

  • Duration: 1 year
  • Purpose: Shows year overview in grid format
  • Use Case: Annual planning and date selection

Plugin Integration

The plugin integrates with FullCalendar's plugin system:

interface PluginDef {
  name: string;
  initialView?: string;
  views?: { [viewName: string]: ViewSpec };
  viewConfigs?: { [viewName: string]: ViewConfigHash };
  cmdFormatter?: CmdFormatterFunc;
  eventRefiners?: RefinersHash;
  eventDefMutationAppliers?: EventDefMutationAppliers;
  eventDragMutationMassagers?: EventDragMutationMassagers;
  eventDefMemberAdders?: EventDefMemberAdders;
  displayEventEnd?: boolean;
  // ... additional plugin hooks
}

CSS Integration

The plugin automatically imports its stylesheet:

import './index.css';

This provides default styling for:

  • Grid layout and spacing
  • Event display styles
  • Interactive element styling
  • Responsive design classes

Plugin Creation Utilities

Helper functions for creating and configuring the day grid plugin.

/**
 * Builds day table render range with week snapping and fixed week options
 * @param props - Configuration for range building including current range, snapping options
 * @returns Date range adjusted for table rendering with proper week boundaries
 */
function buildDayTableRenderRange(props: {
  currentRange: DateRange;
  snapToWeek: boolean;
  fixedWeekCount: boolean;
  dateEnv: DateEnv;
}): DateRange;