FullScheduler — Handling calendar DOM - Full Guide

Docs, demos, API

DOM HandlingGhost-aware (v1.0.52+)

resizeDayContainerByDatelive previewsanimated resize (v1.0.67+)

This section collects examples for controlling the calendar’s DOM layer. First up — the helper: api.resizeDayContainerByDate(date | index, 'up' | 'down' | number, opts?), which adjusts the container height for a specific day (useful when events appear/disappear dynamically or you want to force a larger “capacity”).

type ResizeOpts = {
  targetDateAsDayNumber?: boolean; // interpret 'target' as 1-based day index
  step?: number;                   // px step for 'up'/'down' (default 100)
  animated?: boolean;              // enable CSS height transition
  durationMs?: number;             // default 250
  easing?: string;                 // default 'ease'
};

resizeDayContainerByDate(
  target: Date | string | number,   // Date/string or 1-based index (with targetDateAsDayNumber: true)
  dirOrHeight: 'up' | 'down' | number,
  opts?: ResizeOpts
): void;

api.resizeDayContainerByDate(new Date(), 520, {
  animated: true,
  durationMs: 300,
  easing: 'ease-in-out'
})

// Step-based resize (+100 px)
api.resizeDayContainerByDate(new Date(), 'down', { animated: true })

// Reset to default height
api.resizeDayContainerByDate(new Date(), 0)

Interactive demoLive

Target dayHeight (px)

Log0 entries

Actions will appear here…