Responsive JavaScript Calendar Component

Responsive JavaScript Calendar Component There are a lot of JavaScript Calendars and Date Pickers out there, but actually only a few can be very customizable to fit everyone's need. That's why we have created a Responsive JavaScript Calendar Component that is very customizable and extendable. You can see our calendar at work right in this page.

Build Your Calendar Online

Build Your Calendar Online Don't want to go through all the API documentations? We got the solution for you, now you can customize your own calendar using our online builder. Simply change what you want and you'll get all the code right away. You can also save your work for reference.

Features

  • Responsive & change layout automatically.
  • Create any numbers of months per calendar.
  • Set the weekend, days off, holidays (dates off), start day of the week.
  • Start and end date.
  • Multi selection with limits or without.
  • Skinnable (using CSS).
  • Can have any number of calendars in any page.
  • Optimized for best performance.

Useful Links

Examples

Creating a Basic Calendar View Code
Creating Multi Month Calendar View Code
In this example, will create a multiple months and multiple selection calendar.
Keyboard Navigation
Because the description of this example is long, we only included the title here. Click on the title to see the calendar and code.
Multiple Languages View Code
In this example, we'll create multiple calendars in different languages. This example is not available in the Lite version because additional languages are not loaded.
Dutch:

Arabic:

Chinese:
Range Calendar View Code
In this example, we'll create a range selection tool (start date and end date). This example requires the full version.
Start Date:

End Date:
Shared Calendar View Code
In this example, we'll create a single calendar that is shared by multiple input fields. This can be useful in an editable grid or if there are too many dates input fields.
Date:
Date:
Date:
Date:
Date:
Drag & Select View Code
In this example, we'll create a multi selectable calendar by dragging over dates. Drag a range of dates to select them and drag over them again to unselect them. The dates are sent to the server as individual dates (e.g. if you select a range of 5 days, the form will send 5 dates - not the start and end).
Get the Code
Download the latest version:
Download
API & Docs
View the complete API documentations and examples:
API & Docs
Licensing
We offer two types of licenses, personal and commercial. Find out more.
Donate
We thrive on your donations. If our scripts has helped, please donate.