JavaScript/jQuery Calendar - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Calendar component allows users to select a date within a specified date range. This tutorial shows how to add this component to your application and configure its core features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-calendar.

Create a Calendar

Add DevExtreme to your jQuery application and use the following code to create a Calendar component:

index.js
index.html
  • $(function() {
  • $("#calendar").dxCalendar({ });
  • });
  • <html>
  • <head>
  • <!-- ... -->
  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
  • <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
  • <script type="text/javascript" src="index.js"></script>
  • </head>
  • <body>
  • <div id="calendar"></div>
  • </body>
  • </html>

Specify Available Dates

Use the min and max properties to specify the range of available dates. You can also use the disabledDates property to disable certain dates. For example, the code below disables all Sundays and limits the range of dates to the current year.

index.js
  • $(function() {
  • function changeYear(date) {
  • const thisDate = new Date();
  • const thisYear = thisDate.getFullYear();
  • return new Date(date.setFullYear(thisYear));
  • };
  •  
  • $("#calendar").dxCalendar({
  • min: changeYear(new Date('2022-01-01T00:00:00.000Z')),
  • max: changeYear(new Date('2022-12-31T00:00:00.000Z')),
  • disabledDates: function(data) {
  • return data.view === 'month' && data.date.getDay() === 0;
  • }
  • });
  • });

Specify Available Views

Set the zoomLevel property to specify which calendar view (month, year, decade, or century) the component should display. To make certain calendar views inaccessible, specify the maxZoomLevel and minZoomLevel properties (not demonstrated in this tutorial).

index.js
  • $(function() {
  • $("#calendar").dxCalendar({
  • // ...
  • zoomLevel: "year"
  • });
  • });

Add the Today Button

Enable the showTodayButton property to add a Today button that selects the current date.

index.js
  • $(function() {
  • $("#calendar").dxCalendar({
  • // ...
  • showTodayButton: true
  • });
  • });

Show Week Numbers

To display a column with week numbers, assign true to the showWeekNumbers property. The default week number calculation rule depends on the locale. Use the weekNumberRule setting to specify another week numeration rule.

The following code enables week number column and adds a 'firstDay' week number rule. This rule states that week numeration starts from the first week that contains January 1.

index.js
  • $(function() {
  • $("#calendar").dxCalendar({
  • // ...
  • showWeekNumbers: true,
  • weekNumberRule: "firstDay"
  • });
  • });

Customize Cell Appearance

Use cellTemplate to customize cell appearance. For example, in the following code all the dates that are federal US hoildays become red in the month view:

index.js
index.css
  • $(function() {
  • // ...
  • const federalHolidays = [
  • changeYear(new Date('2022-01-01T00:00:00.000Z')),
  • changeYear(new Date('2022-01-17T00:00:00.000Z')),
  • changeYear(new Date('2022-02-21T00:00:00.000Z')),
  • changeYear(new Date('2022-05-30T00:00:00.000Z')),
  • changeYear(new Date('2022-06-19T00:00:00.000Z')),
  • changeYear(new Date('2022-07-04T00:00:00.000Z')),
  • changeYear(new Date('2022-09-05T00:00:00.000Z')),
  • changeYear(new Date('2022-10-10T00:00:00.000Z')),
  • changeYear(new Date('2022-11-11T00:00:00.000Z')),
  • changeYear(new Date('2022-11-24T00:00:00.000Z')),
  • changeYear(new Date('2022-12-25T00:00:00.000Z'))
  • ];
  •  
  • $("#calendar").dxCalendar({
  • // ...
  • cellTemplate: function(data) {
  • let cssClass = '';
  • $.each(federalHolidays, (_, item) => {
  • if (data.date !== undefined) {
  • if (data.date.getDate() === item.getDate() && data.date.getMonth() === item.getMonth() && data.view !== 'year') {
  • cssClass = 'holiday';
  • }
  • }
  • });
  • return `<span class='${cssClass}'>${data.text}</span>`;
  • }
  • });
  • });
  • .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
  • text-shadow: none;
  • font-weight: bold;
  • color: #ff3030;
  • }

You have configured basic Calendar features. For more information about this UI component and examples, refer to the following resources: