or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdinternal-components.mdmain-plugin.mdpositioning-utilities.md
tile.json

tessl/npm-fullcalendar--timegrid

Display events on time slots for the FullCalendar JavaScript library

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

To install, run

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

index.mddocs/

FullCalendar Time Grid Plugin

The FullCalendar Time Grid Plugin provides time-slot based calendar views that display events positioned according to their start and end times. It enables the rendering of events in time grid layouts like weekly and daily views with drag-and-drop functionality and precise time-aware event positioning.

Package Information

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

Core Imports

import timeGridPlugin from '@fullcalendar/timegrid';

For CommonJS:

const timeGridPlugin = require('@fullcalendar/timegrid');

For internal API access:

import { TimeColsView, DayTimeColsView, TimeCols } from '@fullcalendar/timegrid/internal';

Basic Usage

import { Calendar } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';

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

calendar.render();

Architecture

The Time Grid plugin is built around several key components:

  • Plugin Definition: Main plugin export providing time grid views (timeGrid, timeGridDay, timeGridWeek)
  • View Components: Core view classes (TimeColsView, DayTimeColsView) for rendering time-based layouts
  • Layout Components: Rendering components (TimeCols, DayTimeCols) for columns and time slots
  • Positioning System: Coordinate calculation and event placement utilities
  • Segment Management: Event slicing and positioning for optimal display

Capabilities

Main Plugin Export

Core plugin functionality providing time grid views for FullCalendar. Registers three main view types with configurable time slots and event display options.

declare const plugin: PluginDef;
export default plugin;

Main Plugin

Internal API Components

Advanced internal components for developers who need deeper integration or customization of time grid functionality. Includes view classes, rendering components, and utility functions.

export abstract class TimeColsView extends DateComponent<ViewProps>;
export class DayTimeColsView extends TimeColsView;
export class TimeCols extends DateComponent<TimeColsProps>;
export class DayTimeCols extends DateComponent<DayTimeColsProps>;
export class DayTimeColsSlicer {
  sliceRange(range: DateRange, dayRanges: DayRange[]): DayRange[];
}

export function buildTimeColsModel(
  dayRanges: DayRange[],
  breakOnWeeks: boolean
): TimeColsModel;

export function buildDayRanges(
  dayTableModel: DayTableModel,
  dateProfile: DateProfile,
  dateEnv: DateEnv
): DayRange[];

export interface TimeColsSeg extends Seg {
  col: number;
  start: DateMarker;  
  end: DateMarker;
}

export function splitSegsByCol(
  segs: TimeColsSeg[] | null, 
  colCnt: number
): TimeColsSeg[][];

export function splitInteractionByCol(
  ui: EventSegUiInteractionState | null, 
  colCnt: number
): EventSegUiInteractionState[];

export interface TimeSlatMeta {
  date: DateMarker;
  time: Duration;
  key: string;
  isoTimeStr: string;
  isLabeled: boolean;
}

export function buildSlatMetas(
  slotMinTime: Duration,
  slotMaxTime: Duration, 
  explicitLabelInterval: Duration | null,
  slotDuration: Duration,
  dateEnv: DateEnv
): TimeSlatMeta[];

Internal Components

Positioning and Layout Utilities

Specialized utilities for event positioning, coordinate calculations, and segment management within time grid views.

export class TimeColsSlatsCoords {
  constructor(positions: PositionCache, dateProfile: DateProfile, slotDuration: Duration);
  safeComputeTop(date: DateMarker): number | null;
  computeDateTop(when: DateMarker, startOfDayDate?: DateMarker): number;
  computeTimeTop(duration: Duration): number;
}

export function buildSlatMetas(
  slotMinTime: Duration,
  slotMaxTime: Duration,
  explicitLabelInterval: Duration | null,
  slotDuration: Duration,
  dateEnv: DateEnv
): TimeSlatMeta[];

Positioning Utilities

Types

interface PluginDef {
  name: string;
  initialView: string;
  optionRefiners: Record<string, any>;
  views: Record<string, ViewSpec>;
}

interface ViewSpec {
  component?: ComponentType<any>;
  type?: string;
  duration?: DurationInput;
  usesMinMaxTime?: boolean;
  allDaySlot?: boolean;
  slotDuration?: DurationInput;
  slotEventOverlap?: boolean;
}

interface ViewProps {
  dateProfile: DateProfile;
  businessHours: BusinessHoursInput;
  eventStore: EventStore;
  eventUiBases: EventUiHash;
  dateSelection: DateSpan | null;
  eventSelection: string;
  eventDrag: EventInteractionState | null;
  eventResize: EventInteractionState | null;
}

interface TimeColsProps {
  dateProfile: DateProfile;
  cells: TimeColsCell[];
  slotDuration: Duration;
  slatMetas: TimeSlatMeta[];
  businessHourSegs: TimeColsSeg[];
  bgEventSegs: TimeColsSeg[];
  fgEventSegs: TimeColsSeg[];
  dayMaxEvents: boolean | number;
  dayMaxEventRows: boolean | number;
  expandRows: boolean;
  showWeekNumbers: boolean;
  headerContent: ContentGenerator<VNode>;
  allDayContent: ContentGenerator<VNode>;
}

interface DayTimeColsProps extends TimeColsProps {
  dateProfile: DateProfile;
  axis: boolean;
  slotDuration: Duration;
  slatMetas: TimeSlatMeta[];
}

interface TimeColsCell {
  key: string;
  date: DateMarker;
}

interface DateProfile {
  currentRange: DateRange;
  validRange: DateRange | null;
  renderRange: DateRange;
  activeRange: DateRange | null;
  isRangeAllDay: boolean;
  isValid: boolean;
  dateIncrement: Duration;
  slotMinTime: Duration;
  slotMaxTime: Duration;
}

interface DateRange {
  start: DateMarker;
  end: DateMarker;
}

interface DayRange {
  start: DateMarker;
  end: DateMarker;
  firstCol: number;
  lastCol: number;
}

interface TimeColsModel {
  dayRanges: DayRange[];
  headerDates: DateMarker[];
  isWeekStarts: boolean[];
}

interface DayTableModel {
  headerDates: DateMarker[];
  rowCnt: number;
  colCnt: number;
  cells: DayTableCell[][];
}

interface DayTableCell {
  key: string;
  date: DateMarker;
  extraClassNames?: string[];
  extraAttrs?: Record<string, any>;  
}

interface Seg {
  event: EventApi;
  start: DateMarker;
  end: DateMarker;
  eventRange: EventRange;
}

interface EventSegUiInteractionState {
  affectedInstances: Record<string, EventInstance>;
  isEvent: boolean;
  segs: TimeColsSeg[];
}

interface PositionCache {
  els: HTMLElement[];
  tops: number[];
  getHeight(index: number): number;
}

type DateMarker = Date;
type Duration = {
  years?: number;
  months?: number;
  weeks?: number;  
  days?: number;
  hours?: number;
  minutes?: number;
  seconds?: number;
  milliseconds: number;
};

type DurationInput = Duration | string | number;

interface DateEnv {
  add(date: DateMarker, duration: Duration): DateMarker;
  format(date: DateMarker, formatter: any): string;
}

interface EventApi {
  id: string;
  title: string;
  start: Date | null;
  end: Date | null;
  allDay: boolean;
  display: string;
  backgroundColor: string;
  borderColor: string;
  textColor: string;
}

interface EventRange {
  def: EventDef;
  instance: EventInstance | null;
  range: DateRange;
  ui: EventUi;
}

interface EventDef {
  defId: string;
  sourceId: string;
  publicId: string;
  title: string;
  allDay: boolean;
  hasEnd: boolean;
  recurringDef: object | null;
  extendedProps: Record<string, any>;
}

interface EventInstance {
  instanceId: string;
  defId: string;
  range: DateRange;
  forcedStartTzo: number | null;
  forcedEndTzo: number | null;
}

interface EventUi {
  display: string;
  editable: boolean;
  startEditable: boolean;
  durationEditable: boolean;
  constraint: any;
  overlap: any;
  allow: any;
  backgroundColor: string;
  borderColor: string;
  textColor: string;
  classNames: string[];
}

type ComponentType<T> = (props: T) => VNode;
type ContentGenerator<T> = (args: any) => T;
type VNode = any;