or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

tessl/npm-fullcalendar--daygrid

FullCalendar plugin for displaying events in day grid views (month, week, day, and year calendar layouts)

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@fullcalendar/daygrid@6.1.x

To install, run

npx @tessl/cli install tessl/npm-fullcalendar--daygrid@6.1.0

index.mddocs/

FullCalendar Day Grid Plugin

FullCalendar Day Grid Plugin provides day grid view functionality for displaying calendar events in month, week, day, and year grid layouts. It extends the core FullCalendar system with comprehensive grid-based calendar views featuring event rendering, date profile generation, and interactive calendar functionality.

Package Information

  • Package Name: @fullcalendar/daygrid
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @fullcalendar/core @fullcalendar/daygrid

Core Imports

import dayGridPlugin from '@fullcalendar/daygrid';

CommonJS:

const dayGridPlugin = require('@fullcalendar/daygrid');

For internal components (advanced usage):

import { DayTable, TableView, DayTableSlicer } from '@fullcalendar/daygrid/internal';

Basic Usage

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

const calendarEl = document.getElementById('calendar');
const calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [
    { title: 'Meeting', start: new Date() }
  ]
});

calendar.render();

Architecture

The Day Grid Plugin is built around several key components:

  • Plugin Definition: Main plugin export providing view configurations and component registrations
  • View System: Hierarchical view components from abstract TableView to specific DayTableView
  • Component Hierarchy: Seven-layer component structure from TableView down to individual TableCell
  • Event System: Comprehensive event rendering with placement algorithms and display modes
  • Date System: Specialized date profile generation for grid-based layouts with week snapping

Capabilities

Plugin Definition

Main plugin export that registers day grid views with FullCalendar core. Provides five predefined view types for different time spans.

declare const plugin: PluginDef;
export default plugin;

The plugin automatically registers these view types:

  • dayGrid: Base grid view
  • dayGridDay: Single day grid (1 day duration)
  • dayGridWeek: Weekly grid (1 week duration)
  • dayGridMonth: Monthly grid (1 month duration, fixed week count)
  • dayGridYear: Yearly grid (1 year duration)

Plugin Definition

View Components

Core view and table components for rendering day grid layouts. Handles layout management, scrolling, and responsive design.

abstract class TableView<State = Dictionary> extends DateComponent<ViewProps, State> {
  protected headerElRef: RefObject<HTMLTableCellElement>;
  renderSimpleLayout(
    headerRowContent: ChunkConfigRowContent,
    bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode
  ): VNode;
  renderHScrollLayout(
    headerRowContent: ChunkConfigRowContent,
    bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode,
    colCnt: number,
    dayMinWidth: number
  ): VNode;
}

class DayTableView extends TableView {
  render(): VNode;
}

View Components

Event Rendering

Event display and placement system supporting multiple display modes and overflow handling. Manages event positioning, visibility, and user interactions.

interface TableSegPlacement {
  seg: TableSeg;
  isVisible: boolean;
  isAbsolute: boolean;
  absoluteTop: number;
  marginTop: number;
}

function computeFgSegPlacement(
  segs: TableSeg[],
  dayMaxEvents: boolean | number,
  dayMaxEventRows: boolean | number,
  strictOrder: boolean,
  segHeights: { [segUid: string]: number },
  maxContentHeight: number | null,
  cells: DayTableCell[]
): {
  singleColPlacements: TableSegPlacement[][];
  multiColPlacements: TableSegPlacement[][];
  moreCnts: number[];
  moreMarginTops: number[];
};

Event Rendering

Types

interface TableSeg extends Seg {
  row: number;
  firstCol: number;
  lastCol: number;
}

interface TableSegPlacement {
  seg: TableSeg;
  isVisible: boolean;
  isAbsolute: boolean;
  absoluteTop: number;
  marginTop: number;
}

interface DayTableProps {
  dateProfile: DateProfile;
  dayTableModel: DayTableModel;
  nextDayThreshold: Duration;
  businessHours: EventStore;
  eventStore: EventStore;
  eventUiBases: EventUiHash;
  dateSelection: DateSpan | null;
  eventSelection: string;
  eventDrag: EventInteractionState | null;
  eventResize: EventInteractionState | null;
  colGroupNode: VNode;
  tableMinWidth: CssDimValue;
  renderRowIntro?: () => VNode;
  dayMaxEvents: boolean | number;
  dayMaxEventRows: boolean | number;
  expandRows: boolean;
  showWeekNumbers: boolean;
  headerAlignElRef?: RefObject<HTMLElement>;
  clientWidth: number | null;
  clientHeight: number | null;
  forPrint: boolean;
}

interface TableRowsProps {
  dateProfile: DateProfile;
  cells: DayTableCell[][];
  renderRowIntro?: () => VNode;
  showWeekNumbers: boolean;
  clientWidth: number | null;
  clientHeight: number | null;
  businessHourSegs: TableSeg[];
  bgEventSegs: TableSeg[];
  fgEventSegs: TableSeg[];
  dateSelectionSegs: TableSeg[];
  eventSelection: string;
  eventDrag: EventSegUiInteractionState | null;
  eventResize: EventSegUiInteractionState | null;
  dayMaxEvents: boolean | number;
  dayMaxEventRows: boolean | number;
  forPrint: boolean;
  isHitComboAllowed?: (hit0: Hit, hit1: Hit) => boolean;
}

interface TableProps extends TableRowsProps {
  colGroupNode: VNode;
  tableMinWidth: CssDimValue;
  expandRows: boolean;
  headerAlignElRef?: RefObject<HTMLElement>;
}