QCalendar
v5.0.0-rc.0
Timestamp Recipes

QCalendar emits and receives date-like strings, date-time strings, and Timestamp objects in slots and events. Use @timestamp-js/core when application logic needs deterministic range math, interval snapping, durations, or UTC storage boundaries.

The calendar stays focused on rendering and interaction. Timestamp owns the reusable date/time primitives.

Range Windows And Disabled Days

Use Timestamp range helpers to normalize unavailable periods before passing them to disabled-days, selected-start-end-dates, or a day-class function.

Timestamp Calendar Recipes


The important pieces are:

import {
  function createTimestampRange(start: Timestamp, end: Timestamp, useTime?: boolean): TimestampRange
Creates an inclusive Timestamp range and normalizes start/end order.
@paramstart First boundary.@paramend Second boundary.@paramuseTime Include time-of-day when ordering boundaries.@returnsFrozen inclusive Timestamp range.
createTimestampRange
,
function findRangeGaps(source: TimestampRange, occupied: TimestampRange[], useTime?: boolean): TimestampRange[]
Finds open gaps inside a source range after occupied ranges are removed. This is an alias for subtractRanges() with naming that reads naturally in booking, resource, and availability workflows.
@paramsource Source range.@paramoccupied Ranges that are not available.@paramuseTime Include time-of-day in the comparison.@returnsGap ranges.
findRangeGaps
,
function isTimestampInRange(timestamp: Timestamp, range: TimestampRange, useTime?: boolean): boolean
Checks whether a Timestamp falls inside an inclusive TimestampRange.
@paramtimestamp Timestamp object to test.@paramrange Inclusive range to test against.@paramuseTime Include time-of-day in the comparison.@returnsTrue when the timestamp is inside the range.
isTimestampInRange
,
function mergeRanges(ranges: TimestampRange[], useTime?: boolean): TimestampRange[]
Merges overlapping or touching TimestampRange values. Date-only ranges touch when the next range starts on the next calendar day. Time-aware ranges touch when the next range starts one millisecond after the previous range ends.
@paramranges Ranges to merge.@paramuseTime Include time-of-day in the comparison.@returnsMerged ranges sorted by start boundary.
mergeRanges
,
function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
,
} from '@timestamp-js/core' const const windowStart: TimestampwindowStart = function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-01')!
const const windowEnd: TimestampwindowEnd = function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-30')!
const const bookingWindow: TimestampRangebookingWindow = function createTimestampRange(start: Timestamp, end: Timestamp, useTime?: boolean): TimestampRange
Creates an inclusive Timestamp range and normalizes start/end order.
@paramstart First boundary.@paramend Second boundary.@paramuseTime Include time-of-day when ordering boundaries.@returnsFrozen inclusive Timestamp range.
createTimestampRange
(const windowStart: TimestampwindowStart, const windowEnd: TimestampwindowEnd)
const const blocked: TimestampRange[]blocked = function mergeRanges(ranges: TimestampRange[], useTime?: boolean): TimestampRange[]
Merges overlapping or touching TimestampRange values. Date-only ranges touch when the next range starts on the next calendar day. Time-aware ranges touch when the next range starts one millisecond after the previous range ends.
@paramranges Ranges to merge.@paramuseTime Include time-of-day in the comparison.@returnsMerged ranges sorted by start boundary.
mergeRanges
([
function createTimestampRange(start: Timestamp, end: Timestamp, useTime?: boolean): TimestampRange
Creates an inclusive Timestamp range and normalizes start/end order.
@paramstart First boundary.@paramend Second boundary.@paramuseTime Include time-of-day when ordering boundaries.@returnsFrozen inclusive Timestamp range.
createTimestampRange
(function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-03')!, function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-05')!),
function createTimestampRange(start: Timestamp, end: Timestamp, useTime?: boolean): TimestampRange
Creates an inclusive Timestamp range and normalizes start/end order.
@paramstart First boundary.@paramend Second boundary.@paramuseTime Include time-of-day when ordering boundaries.@returnsFrozen inclusive Timestamp range.
createTimestampRange
(function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-14')!, function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-18')!),
]) const const available: TimestampRange[]available = function findRangeGaps(source: TimestampRange, occupied: TimestampRange[], useTime?: boolean): TimestampRange[]
Finds open gaps inside a source range after occupied ranges are removed. This is an alias for subtractRanges() with naming that reads naturally in booking, resource, and availability workflows.
@paramsource Source range.@paramoccupied Ranges that are not available.@paramuseTime Include time-of-day in the comparison.@returnsGap ranges.
findRangeGaps
(const bookingWindow: TimestampRangebookingWindow, const blocked: TimestampRange[]blocked)
const const isAvailable: booleanisAvailable = function isTimestampInRange(timestamp: Timestamp, range: TimestampRange, useTime?: boolean): boolean
Checks whether a Timestamp falls inside an inclusive TimestampRange.
@paramtimestamp Timestamp object to test.@paramrange Inclusive range to test against.@paramuseTime Include time-of-day in the comparison.@returnsTrue when the timestamp is inside the range.
isTimestampInRange
(function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-10')!, const available: TimestampRange[]available[0]!)

Snap Scheduler Intervals

Use time-clicks-clamped when you want QCalendar to return the interval the pointer is inside. Use Timestamp rounding helpers when the application needs a different snapping rule than the visible interval grid.

The same pattern works for drag and drop, scheduler resources, and appointment builders:

import {
  function addDuration(timestamp: Timestamp, duration: TimestampDuration | number): Timestamp
Adds an elapsed duration to a Timestamp. This helper treats the Timestamp fields as UTC and returns a Timestamp built from UTC fields. Use addToDate() for calendar-unit arithmetic such as "one month from now".
@paramtimestamp Timestamp object to offset.@paramduration Duration object or signed milliseconds.@returnsOffset Timestamp.
addDuration
,
function createDuration(milliseconds: number): TimestampDuration
Creates a TimestampDuration from signed milliseconds.
@parammilliseconds Signed elapsed milliseconds.@returnsFrozen duration object.
createDuration
,
function durationBetween(start: Timestamp, end: Timestamp): TimestampDuration
Measures the elapsed duration between two Timestamp values. Timestamp fields are read as UTC so the result is deterministic across server and client runtimes.
@paramstart Start timestamp.@paramend End timestamp.@returnsFrozen duration object.
durationBetween
,
function formatDuration(duration: TimestampDuration | number, options?: FormatDurationOptions): string
Formats a duration as `HH:mm:ss` or `HH:mm:ss.SSS`. Hours include full days, so a two-day duration formats as `48:00:00`.
@paramduration Duration object or signed milliseconds.@paramoptions Formatting options.@returnsFormatted duration.
formatDuration
,
function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
,
function roundToInterval(timestamp: Timestamp, minutes: number): Timestamp
Rounds a Timestamp to the nearest interval.
@paramtimestamp Timestamp object to round.@paramminutes Interval size in minutes.@returnsRounded Timestamp.
roundToInterval
,
} from '@timestamp-js/core' const const clicked: Timestampclicked = function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-08 09:37')!
const const start: Timestampstart = function roundToInterval(timestamp: Timestamp, minutes: number): Timestamp
Rounds a Timestamp to the nearest interval.
@paramtimestamp Timestamp object to round.@paramminutes Interval size in minutes.@returnsRounded Timestamp.
roundToInterval
(const clicked: Timestampclicked, 30)
const const end: Timestampend = function addDuration(timestamp: Timestamp, duration: TimestampDuration | number): Timestamp
Adds an elapsed duration to a Timestamp. This helper treats the Timestamp fields as UTC and returns a Timestamp built from UTC fields. Use addToDate() for calendar-unit arithmetic such as "one month from now".
@paramtimestamp Timestamp object to offset.@paramduration Duration object or signed milliseconds.@returnsOffset Timestamp.
addDuration
(const start: Timestampstart, function createDuration(milliseconds: number): TimestampDuration
Creates a TimestampDuration from signed milliseconds.
@parammilliseconds Signed elapsed milliseconds.@returnsFrozen duration object.
createDuration
(90 * 60 * 1000))
const const label: stringlabel = function formatDuration(duration: TimestampDuration | number, options?: FormatDurationOptions): string
Formats a duration as `HH:mm:ss` or `HH:mm:ss.SSS`. Hours include full days, so a two-day duration formats as `48:00:00`.
@paramduration Duration object or signed milliseconds.@paramoptions Formatting options.@returnsFormatted duration.
formatDuration
(function durationBetween(start: Timestamp, end: Timestamp): TimestampDuration
Measures the elapsed duration between two Timestamp values. Timestamp fields are read as UTC so the result is deterministic across server and client runtimes.
@paramstart Start timestamp.@paramend End timestamp.@returnsFrozen duration object.
durationBetween
(const start: Timestampstart, const end: Timestampend))

Store UTC, Render Local

For event systems and server APIs, store instants in UTC and convert at the application boundary. QCalendar can keep rendering local wall-clock values after the app parses and formats the values explicitly.

import {
  function makeDateTime(timestamp: Timestamp): Date
Converts a Timestamp date and time into a host-local JavaScript Date.
@paramtimestamp Timestamp object to convert.@returnsHost-local JavaScript Date object.
makeDateTime
,
function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
,
function toUnixMilliseconds(timestamp: Timestamp): number
Converts a Timestamp into Unix milliseconds by reading its fields as UTC. This is deterministic across server and client runtimes. It does not read or convert the optional `timezone` suffix stored on the Timestamp.
@paramtimestamp Timestamp object to convert.@returnsUnix milliseconds.
toUnixMilliseconds
,
function fromUnixMilliseconds(milliseconds: number): Timestamp | null
Converts Unix milliseconds into an immutable Timestamp using UTC fields.
@parammilliseconds Unix milliseconds.@returnsTimestamp built from UTC fields, or `null` for invalid input.
fromUnixMilliseconds
,
} from '@timestamp-js/core' const const meeting: Timestampmeeting = function parseTimestamp(input: string, now?: Timestamp | null): Timestamp | null
Converts a supported date or date-time string into a formatted Timestamp object. If `now` is supplied, the returned timestamp also includes relative flags such as `past`, `current`, `future`, and `currentWeekday`.
@paraminput Date or date-time string, such as `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or an ISO-like value with optional milliseconds and timezone suffix.@paramnow Optional Timestamp used to calculate relative flags.@returnsFormatted Timestamp object, or `null` when the input cannot be parsed.
parseTimestamp
('2036-06-08T16:30:00.000Z')!
const const persisted: numberpersisted = function toUnixMilliseconds(timestamp: Timestamp): number
Converts a Timestamp into Unix milliseconds by reading its fields as UTC. This is deterministic across server and client runtimes. It does not read or convert the optional `timezone` suffix stored on the Timestamp.
@paramtimestamp Timestamp object to convert.@returnsUnix milliseconds.
toUnixMilliseconds
(const meeting: Timestampmeeting)
const const restored: Timestamprestored = function fromUnixMilliseconds(milliseconds: number): Timestamp | null
Converts Unix milliseconds into an immutable Timestamp using UTC fields.
@parammilliseconds Unix milliseconds.@returnsTimestamp built from UTC fields, or `null` for invalid input.
fromUnixMilliseconds
(const persisted: numberpersisted)!
const const localDate: DatelocalDate = function makeDateTime(timestamp: Timestamp): Date
Converts a Timestamp date and time into a host-local JavaScript Date.
@paramtimestamp Timestamp object to convert.@returnsHost-local JavaScript Date object.
makeDateTime
(const restored: Timestamprestored)

Use UTC helpers from Timestamp when server and client output must agree exactly. Use local helpers when the calendar should preserve the user’s wall-clock date and time.