tessl/npm-fullcalendar--daygrid

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

FullCalendar Day Grid Plugin

Name: tessl/npm-fullcalendar--daygrid
Author: tessl

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>;
}