Managing Dates and Time

Enable Time Selection

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.

TS Live Example

import { Calendar, type Options } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

const options: Options = {
  selectionTimeMode: 12,
};

const calendar = new Calendar('#calendar', options);
calendar.init();

24-Hour Day

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

TS Live Example

Open

import { Calendar, type Options } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

const options: Options = {
  selectionTimeMode: 24,
};

const calendar = new Calendar('#calendar', options);
calendar.init();

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.

TS Live Example

Open

import { Calendar, type Options } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

const options: Options = {
  selectionTimeMode: 12,
  selectedTime: '03:44 AM',
};

const calendar = new Calendar('#calendar', options);
calendar.init();

Managing Time Range

You can set the possible time range.

TS Live Example

Open

import { Calendar, type Options } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

const options: Options = {
  selectionTimeMode: 12,
  timeMinHour: 6,
  timeMaxHour: 21,
  timeMinMinute: 10,
  timeMaxMinute: 40,
};

const calendar = new Calendar('#calendar', options);
calendar.init();

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.

TS Live Example

Open

import { Calendar, type Options } from 'vanilla-calendar-pro';

import 'vanilla-calendar-pro/styles/index.css';

const options: Options = {
  selectionTimeMode: 12,
  timeControls: 'range',
  timeStepHour: 5,
  timeStepMinute: 5,
};

const calendar = new Calendar('#calendar', options);
calendar.init();