FullScheduler — Calendar Time & Date Guide

Docs, demos, API

Date & TimeRanges & presets

getDates (v1.0.33)setTimeRange / setDateRangeDays forward

This guide shows how to control the timeline hours and the visible date span — both at initialization and at runtime. You’ll also see handy presets, limits (62-day cap), and how to read the current window via api.getDates().

Runtime control

Adjust the date window and timeline hours dynamically. Use api.getDates() (v1.0.33) to keep your UI in sync.

import type { FullSchedulerUserApi } from 'fullscheduler'

/** Set a 7-day explicit span starting today (inclusive→exclusive). */
export const setWeek = (api: FullSchedulerUserApi<HappyEvent>): void => {
  const start = new Date(); start.setHours(0, 0, 0, 0)
  const end = new Date(start); end.setDate(start.getDate() + 7)
  api.setDateRange(start, end)
}

/** Set the timeline hours, 0..24 (24 renders up to 23:59:59). */
export const setHours = (api: FullSchedulerUserApi<HappyEvent>, from: number, to: number): void => {
  api.setTimeRange(from, to)
}

/** Rolling window: keep startDate, show N total days. */
export const setDays = (api: FullSchedulerUserApi<HappyEvent>, days: number): void => {
  api.setDaysForward(days)
}

/** Toggle view (days/month). */
export const toggleView = (api: FullSchedulerUserApi<HappyEvent>): void => {
  api.switchViewMode()
}

/** Read the currently visible span (v1.0.33). */
export const readVisible = (api: FullSchedulerUserApi<HappyEvent>): { startDate: Date; endDate: Date } => {
  return api.getDates()
}

Interactive demoLive

Change the hour and date ranges with auto-apply, presets, and range-aware seeding using our generateItems() util.

Init options (time & date)

Configure both hours and dates at startup:

import type { FullSchedulerApiInitOptions } from 'fullscheduler'

export const options: FullSchedulerApiInitOptions<HappyEvent> = {
  height: 560,
  theme: 'light',
  startDate: new Date(),
  endDate: new Date(new Date().setDate(new Date().getDate() + 7)),
  startHour: 8,
  endHour: 18,
  draggableEvents: true,
  resizableEvents: true,
  showCursorTime: true,
  throwErrors: false
}

startHour ∈ [0..23], endHour ∈ [1..24] and must be > startHour.
endHour = 24 renders until 23:59:59.
startDate and endDate define the visible days.
Default max range is 62 days (see “Constraints”).

Presets (examples)

Common hour presets:

import type { FullSchedulerUserApi } from 'fullscheduler'

/**
 * Set the visible timeline hours according to a named preset.
 * @param api - FullScheduler user API instance.
 * @param preset - One of 'all' | 'business' | 'compact'.
 * @remarks Uses switch for clarity and future extensibility.
 */
export const applyTimePreset = (
  api: FullSchedulerUserApi<HappyEvent>,
  preset: 'all' | 'business' | 'compact'
): void => {
  switch (preset) {
    case 'all':
      api.setTimeRange(0, 24)
      break
    case 'business':
      api.setTimeRange(8, 18)
      break
    case 'compact':
      api.setTimeRange(9, 15)
      break
    default:
      api.setTimeRange(8, 18)
      break
  }
}

Fill the current range with sample events

The generateItems() util uses the live window from api.getDates(), so you seed exactly what is visible.

import type { FullSchedulerUserApi } from 'fullscheduler'
import { generateItems } from '~/utils/generate-items'

/**
 * Seed events for the currently visible window.
 * Uses api.getDates() to match the on-screen span.
 */
export const fillCurrentRange = (api: FullSchedulerUserApi<HappyEvent>): void => {
  const { startDate, endDate } = api.getDates()
  const daysForward = Math.max(1, Math.ceil((+endDate - +startDate) / 86_400_000))
  const items = generateItems(40, {
    startDate,
    daysForward,
    density: 'biz',
    minDurationMinutes: 60,
    maxDurationMinutes: 150,
    seed: 42
  })
  api.setEvents(items)
}

Constraints & edge cases

Max date span: 62 days. You may use ignoreSafety: true, but it’s not recommended for performance.
endHour must be strictly greater than startHour.
Use setDaysForward(n) for rolling windows relative to startDate.
If you change the window a lot, consider auto-apply in the UI (see the demo).

Quick API cheatsheet

// Time
api.setTimeRange(8, 18)          // hours 08:00–18:00
api.setTimeRange(0, 24)          // full day (up to 23:59:59)

// Dates
api.setDateRange(new Date('2025-01-01'), new Date('2025-01-08'))
api.setDaysForward(7)            // rolling window from current startDate

// Read
const { startDate, endDate } = api.getDates()

// View
api.switchViewMode()             // days <-> month

// Events (flat storage, predicate-based)
api.setEvents([...])
api.addEvents([...])

// Update matching events with a partial patch (use data.id, label, etc.)
api.updateEvents(
  e => String(e.data?.id) === '123',
  { end: new Date(), data: { ...e.data, priority: 'high' } } // shallow-merge for data
)

// Delete matching events by predicate
api.deleteEvents(e => e.data?.status === 'cancelled')