Enable Time Selection

When upgrading from a version without extensions, keep your existing options and callbacks. For ESM, add the named import and register time in the constructor with extensions: [time]. Do not call the extension. Importing or registering it does not enable the feature by itself.

import { Calendar, time } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [time],
  selectionTimeMode: 24,
}).init();

By default, time selection is disabled, but you can easily enable it and configure it according to your needs.

12-Hour Day with AM/PM

You can enable the 12-hour time format and add AM/PM markers.

24-Hour Day

If you need a 24-hour time format without AM/PM, you can configure it as follows.

Setting Your Own Time

You can set the initial time when initializing the calendar. For a 24-hour day, you do not need to specify the AM/PM marker.

Managing Time Range

You can set the possible time range.

Managing Time Step

In addition to everything else, you can configure the time step for minutes and hours. You can also disable the ability to manually enter time in the input field.