The JavaScript Scheduler supports short time slots, long planning horizons, several levels of date headers, and custom time axes. The same resource timeline can show a detailed shift, a month of bookings, or a multi-year plan, with zoom and navigation connecting the different levels of detail.

Timeline Scale

Built-in time scales include hours, days, weeks, months, and years. A custom number of minutes supports shorter or non-standard intervals, such as fifteen-minute appointments or half-hour production steps.

The cell duration, displayed width, and header labels are separate choices. Short slots can sit under day and hour headers; daily cells can sit under month and week headers. Events keep their actual start and end values independently of the axis used to present them.

const timelineOptions = {
  scale: "CellDuration",
  cellDuration: 15,
  timeHeaders: [
    {groupBy: "Day", format: "ddd d MMM"},
    {groupBy: "Hour", format: "HH"}
  ]
};

Time Header Rows and Custom Content

JavaScript Scheduler Timeline Headers and Date Markers

Time header rows combine several levels of context, each with its own grouping unit and date format. Month, week, day, and hour labels can appear together without requiring the lowest-level cells to repeat all that information.

Header customization adds application-specific text, HTML, colors, icons, and actions. Headers can identify shifts, holidays, or other planning periods. Date separators mark a deadline across the schedule or only on the resource rows concerned.

Non-Continuous Timelines

JavaScript Scheduler Timeline with Non Working Hours Hidden

Non-business hours and days can be hidden, leaving only the time used for planning. Custom time-cell visibility can remove other periods, such as a regular break or shutdown.

The axis is shared by the resource rows. Resource-specific working hours can instead be shown through cell styling and validation while retaining the hours needed by other rows. Hiding time and preserving an event's working duration are separate capabilities; business-duration handling controls the latter.

Non-Linear and Manual Timelines

A manual timeline defines each cell's start, end, and optional width. Cells can have different durations: daily detail in the current month can lead into monthly cells farther ahead. A custom axis can also omit periods, combining non-linear and non-continuous time in the same view.

This extends the generated scales to planning calendars whose periods do not follow one regular interval.

Zoom, Navigation, and Date Markers

Zoom levels switch the date range, cell duration, width, and header configuration at runtime. Infinite scrolling shifts the date window as users reach its edge, while the application supplies events for the requested dates.

Global and resource-specific date separators keep review dates, deadlines, or inspections visible in the grid; the separators demo shows both forms. Alternative Scheduler view types can use days or months as rows for timesheet and year layouts.