Scheduler - Time Format

Switch between 12-hour and 24-hour time display.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :time-format="timeFormatOptions">
    <!-- Scheduler parts -->
</Scheduler.Root>

Time formatting is configured on the root. Scheduler uses the same format for gutters, event time text, overlays, and any view that displays time labels.

#Formatting Options

timeFormatOptions controls hour, minute, and 12-hour or 24-hour output.

import type { TimeFormatOptions } from '@primeui/vue-scheduler';

const timeFormatOptions: TimeFormatOptions = {
    format: '24h',
    showMinutes: 'always',
    showAMPM: false,
    rangeDisplay: 'compact',
    use24HourSlots: true
};

format supports 12h, 24h, and auto; showMinutes supports always and non-zero; rangeDisplay supports full, compact, and locale. Keep the object named when the same display rule should apply to gutters, event labels, and overlays.

#12 Hour

AM and PM labels affect compact event text, toolbar output, and slot labels.

Loading Demo...

#24 Hour

Use 24-hour output when the schedule needs compact operational labels. Slot math, range formatting, and event placement use the same date values.

Loading Demo...

#API

Key input is timeFormat with format, showAMPM, showMinutes, showSeconds, rangeDisplay, and use24HourSlots.