NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript Calendar and Time Selection UI controls

Calendar is a JavaScript control that can be effortlessly included into your app or web page.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

This widget allows your end users to select days, months, years and even exact time. According to your needs, you can enable year or month mode, or just use Timepicker for time setting. Particular dates and periods can be disabled. Calendar is a configurable control that allows adding custom buttons to it.

Month and year modes

According to your needs, Calendar can display either months or years.

Try to select a month or a year

Disabled dates

You can disable a particular date or period using a single line of code. This feature can be used to mark vacation days or days on which no activities can be assigned.

Additional icons

Webix Calendar provides helpful 'Today' and 'Clear' buttons. They allow a user to select the current date and remove selection correspondingly.

Click on the 'Today' button to set the current date

Localized Calendar

Webix Calendar can be easily localized, which means translating names of months and days to any language. Moreover, this JavaScript widget can show the number of the week and can be easily adapted to the local starting day of the week.

Click on the 'fr-FR' button to change the locale

Datepicker

When you work with a form, it may be pretty inconvenient to insert dates manually. The main purpose of Datepicker is to simplify this task. It allows choosing the required year, month and day with ease. After clicking on a form field with a small calendar icon, a pop-up window with a calendar will appear on the screen. By default the calendar displays the current date.

Select dates in different formats

Timepicker

Webix provides two ways of time selection. Firstly, you can enable the built-in Timepicker, that will be displayed as a clock icon below the calendar of the Datepicker control. As an alternative, you can use a separate time selector.

Try to change the time

Date Range and Date Range Picker

With DateRange and DateRangePicker controls you can select date range and pick the dates from multiple calendars like on a booking site.

Select a date range

TimeBoard

Webix TimeBoard is another control for time management designed to make the process of time selection even more precise and handy. It can be used standalone or in tandem with DatePicker.

Select a time range