Core view and table components for rendering day grid layouts. Handles layout management, scrolling, responsive design, and the component hierarchy from abstract views to individual cells.
Abstract base class for all grid-based calendar views. Manages layout modes, scrolling, and provides template methods for rendering.
/**
* Abstract base class for daygrid views and month view
* Manages width/height and provides layout templates
* @template State - Component state type
*/
abstract class TableView<State = Dictionary> extends DateComponent<ViewProps, State> {
protected headerElRef: RefObject<HTMLTableCellElement>;
/**
* Renders simple layout without horizontal scrolling
* @param headerRowContent - Header row content configuration
* @param bodyContent - Body content render function
* @returns Virtual DOM node for the simple layout
*/
renderSimpleLayout(
headerRowContent: ChunkConfigRowContent,
bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode
): VNode;
/**
* Renders layout with horizontal scrolling support
* @param headerRowContent - Header row content configuration
* @param bodyContent - Body content render function
* @param colCnt - Number of columns
* @param dayMinWidth - Minimum width per day column
* @returns Virtual DOM node for the scrollable layout
*/
renderHScrollLayout(
headerRowContent: ChunkConfigRowContent,
bodyContent: (contentArg: ChunkContentCallbackArgs) => VNode,
colCnt: number,
dayMinWidth: number
): VNode;
}Concrete implementation of TableView for day grid displays. Builds day table models and renders headers and bodies.
/**
* Day grid view implementation that renders calendar grids
* Extends TableView with day grid specific functionality
*/
class DayTableView extends TableView {
private buildDayTableModel: (dateProfile: DateProfile, dateProfileGenerator: DateProfileGenerator) => DayTableModel;
private headerRef: RefObject<DayHeader>;
private tableRef: RefObject<DayTable>;
/**
* Renders the complete day table view
* @returns Virtual DOM node representing the view
*/
render(): VNode;
}Main table component that wraps the table structure and delegates to Table component.
/**
* Day table component that renders calendar grid tables
* Handles day table model integration and event slicing
*/
class DayTable extends DateComponent<DayTableProps, ViewContext> {
private slicer: DayTableSlicer;
private tableRef: RefObject<Table>;
/**
* Renders the day table with events and interactions
* @returns Virtual DOM node for the table
*/
render(): VNode;
}
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;
}Core table component that renders the HTML table structure with scrolling and event handling.
/**
* Core table component that renders HTML table with events
* Manages scrolling, event limits, and table structure
*/
class Table extends DateComponent<TableProps> {
private elRef: RefObject<HTMLDivElement>;
private needsScrollReset: boolean;
/**
* Renders the HTML table with events and styling
* @returns Virtual DOM node for the table container
*/
render(): VNode;
/**
* Requests a scroll reset to show current date
*/
requestScrollReset(): void;
/**
* Executes pending scroll reset if needed
*/
flushScrollReset(): void;
}
interface TableProps extends TableRowsProps {
colGroupNode: VNode;
tableMinWidth: CssDimValue;
expandRows: boolean;
headerAlignElRef?: RefObject<HTMLElement>;
}Container component that renders multiple table rows with event distribution and interactions.
/**
* Component that renders multiple table rows with events
* Handles event distribution across rows and hit testing
*/
class TableRows extends DateComponent<TableRowsProps> {
private splitBusinessHourSegs: (segs: TableSeg[], rowCnt: number) => TableSeg[][];
private splitBgEventSegs: (segs: TableSeg[], rowCnt: number) => TableSeg[][];
private splitFgEventSegs: (segs: TableSeg[], rowCnt: number) => TableSeg[][];
private splitDateSelectionSegs: (segs: TableSeg[], rowCnt: number) => TableSeg[][];
private splitEventDrag: (ui: EventSegUiInteractionState | null, rowCnt: number) => EventSegUiInteractionState[];
private splitEventResize: (ui: EventSegUiInteractionState | null, rowCnt: number) => EventSegUiInteractionState[];
private rootEl: HTMLElement;
private rowRefs: RefMap<TableRow>;
private rowPositions: PositionCache;
private colPositions: PositionCache;
/**
* Renders all table rows with distributed events
* @returns Virtual DOM nodes for all rows
*/
render(): VNode;
/**
* Prepares hit testing by calculating row and column positions
*/
prepareHits(): void;
/**
* Queries hit information for given position coordinates
* @param positionLeft - X coordinate relative to table
* @param positionTop - Y coordinate relative to table
* @returns Hit information or null if no hit
*/
queryHit(positionLeft: number, positionTop: number): Hit | null;
}
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;
}Individual table row component that renders a row of cells with events and interactions.
/**
* Component that renders a single table row with cells and events
* Handles event distribution within the row and cell-level interactions
*/
class TableRow extends DateComponent<TableRowProps, TableRowState> {
private rootEl: HTMLElement;
private cellEls: HTMLTableCellElement[];
/**
* Renders the table row with cells and distributed events
* @returns Virtual DOM node for the table row
*/
render(): VNode;
/**
* Gets cell DOM elements for position calculations
* @returns Array of cell elements
*/
getCellEls(): HTMLTableCellElement[];
}
interface TableRowProps {
cells: DayTableCell[];
renderIntro?: () => VNode;
businessHourSegs: TableSeg[];
bgEventSegs: TableSeg[];
fgEventSegs: TableSeg[];
dateSelectionSegs: TableSeg[];
eventSelection: string;
eventDrag: EventSegUiInteractionState | null;
eventResize: EventSegUiInteractionState | null;
dayMaxEvents: boolean | number;
dayMaxEventRows: boolean | number;
clientWidth: number | null;
clientHeight: number | null;
dateProfile: DateProfile;
todayRange: DateRange;
showDayNumbers: boolean;
showWeekNumbers: boolean;
forPrint: boolean;
cellMinHeight?: number;
}
interface TableRowState {
framePositions: PositionCache | null;
}Individual table cell component that renders a single day cell with events and interactions.
/**
* Component that renders individual day cells within table rows
* Manages cell content, events, and user interactions for a single day
*/
class TableCell extends DateComponent<TableCellProps> {
private innerElRef: RefObject<HTMLDivElement>;
/**
* Renders the table cell with content and events
* @returns Virtual DOM node for the table cell
*/
render(): VNode;
}
interface TableCellProps {
elRef?: RefObject<HTMLTableCellElement>;
date: DateMarker;
dateProfile: DateProfile;
extraRenderProps?: Dictionary;
extraDataAttrs?: Dictionary;
extraClassNames?: ClassNamesGenerator<DayCellContentArg>;
extraDateSpan?: Dictionary;
innerElRef?: RefObject<HTMLDivElement>;
bgContent: VNode;
fgContentElRef?: RefObject<HTMLDivElement>;
fgContent: VNode;
moreCnt: number;
moreMarginTop: number;
showDayNumber: boolean;
showWeekNumber: boolean;
forceDayTop: boolean;
todayRange: DateRange;
eventSelection: string;
eventDrag: EventSegUiInteractionState | null;
eventResize: EventSegUiInteractionState | null;
singlePlacements: TableSegPlacement[];
minHeight?: number;
}Specialized date profile generator for grid layouts with week snapping and fixed week counts.
/**
* Date profile generator specialized for table/grid views
* Handles week snapping and fixed week count requirements
*/
class TableDateProfileGenerator extends DateProfileGenerator {
/**
* Builds render range with grid-specific adjustments
* @param currentRange - Current date range
* @param currentRangeUnit - Current range unit (day/week/month/year)
* @param isRangeAllDay - Whether the range represents all-day
* @returns Adjusted date range for grid rendering
*/
buildRenderRange(
currentRange: DateRange,
currentRangeUnit: string,
isRangeAllDay: boolean
): DateRange;
}
/**
* Builds day table render range with week snapping and fixed week options
* @param props - Configuration for range building
* @returns Date range adjusted for table rendering
*/
function buildDayTableRenderRange(props: {
currentRange: DateRange;
snapToWeek: boolean;
fixedWeekCount: boolean;
dateEnv: DateEnv;
}): DateRange;Helper functions for building table models and managing component lifecycle.
/**
* Builds a day table model from date profile and generator
* @param dateProfile - Current date profile
* @param dateProfileGenerator - Date profile generator instance
* @returns Configured DayTableModel
*/
function buildDayTableModel(
dateProfile: DateProfile,
dateProfileGenerator: DateProfileGenerator
): DayTableModel;Usage Examples:
import { DayTableView, TableDateProfileGenerator } from '@fullcalendar/daygrid/internal';
// Custom view extending DayTableView
class CustomDayGridView extends DayTableView {
render() {
// Custom rendering logic
return super.render();
}
}
// Custom date profile generator
class CustomTableDateProfileGenerator extends TableDateProfileGenerator {
buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay) {
const range = super.buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay);
// Custom range adjustments
return range;
}
}