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

jQuery

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>

Angular

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

app.component.html

app.component.ts

app.module.ts

<dx-calendar></dx-calendar>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCalendarModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCalendarModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

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

App.vue

<template>
    <DxCalendar>
    </DxCalendar>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxCalendar } from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    }
}
</script>

React

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

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Calendar } from 'devextreme-react/calendar';

function App() {
    return (
        <Calendar>
        </Calendar>
    );
}

export default App;

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.

jQuery

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;
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-calendar
    [min]="minDate"
    [max]="maxDate"
    [disabledDates]="disabledDates">
</dx-calendar>

// ...
export class AppComponent {
    changeYear(date: Date) {
        const thisDate = new Date();
        const thisYear = thisDate.getFullYear();
        return new Date(date.setFullYear(thisYear));
    };
    minDate = this.changeYear(new Date('2022-01-01T00:00:00.000Z'));
    maxDate = this.changeYear(new Date('2022-12-31T00:00:00.000Z'));
    disabledDates(data) {
        return data.view === 'month' && data.date.getDay() === 0;
    }
}

Vue

App.vue

<template>
    <DxCalendar
        :min="minDate"
        :max="maxDate"
        :disabled-dates="disabledDates"
    >
    </DxCalendar>
</template>

<script>
// ...
function changeYear(date) {
    const thisDate = new Date();
    const thisYear = thisDate.getFullYear();
    return new Date(date.setFullYear(thisYear));
}

export default {
    // ...
    data() {
        return {
            minDate: changeYear(new Date('2022-01-01T00:00:00.000Z')),
            maxDate: changeYear(new Date('2022-12-31T00:00:00.000Z'))
        }
    }б
    methods: {
        disabledDates(data) {
            return data.view === 'month' && data.date.getDay() === 0;
        }
    Ъ
}
</script>

React

App.js

// ...
const minDate = changeYear(new Date('2022-01-01T00:00:00.000Z'));
const maxDate = changeYear(new Date('2022-12-31T00:00:00.000Z'));

function App() {
    return (
        <Calendar
            minDate={minDate}
            maxDate={maxDate}
            disabledDates={disabledDates} 
        >
        </Calendar>
    );
};

function changeYear(date) {
    const thisDate = new Date();
    const thisYear = thisDate.getFullYear();
    return new Date(date.setFullYear(thisYear));
};

function disabledDates(data) {
    return data.view === 'month' && data.date.getDay() === 0;
};

export default App;

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).

jQuery

index.js

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

Angular

app.component.html

<dx-calendar ...
    zoomLevel="year"
>
</dx-calendar>

Vue

App.vue

<template>
    <DxCalendar ...
        zoom-level="year"
    >
    </DxCalendar>
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    return (
        <Calendar ...
            defaultZoomLevel="year"
        >
        </Calendar>
    );
}

export default App;

In the code above, the zoomLevel property has the default prefix. This prefix specifies that the Calendar handles property changes internally. For more information, refer to the following article: Uncontrolled Mode.

Add the Today Button

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

jQuery

index.js

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

Angular

app.component.html

<dx-calendar ...
    [showTodayButton]="true">
</dx-calendar>

Vue

App.vue

<template>
    <DxCalendar ...
        :show-today-button="true"
    >
    </DxCalendar>
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    return (
        <Calendar ...
            showTodayButton={true}
        >
        </Calendar>
    );
}

export default App;

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.

jQuery

index.js

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

Angular

app.component.html

<dx-calendar ...
    [showWeekNumbers]="true"
    weekNumberRule="firstDay"
>
</dx-calendar>

Vue

App.vue

<template>
    <DxCalendar ...
        :show-week-numbers="true"
        week-number-rule="firstDay"
    >
    </DxCalendar>
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    return (
        <Calendar ...
            showWeekNumbers={true}
            weekNumberRule="firstDay"
        >
        </Calendar>
    );
}

export default App;

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:

jQuery

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;
}

Angular

app.component.html

app.component.ts

app.component.css

<dx-calendar ...
    cellTemplate="cell"
>
    <span
        *dxTemplate="let cell of 'cell'"
        [ngClass]="getCellCssClass(cell.date, cell.view)"
    >
        {{ cell.text }}
    </span>
</dx-calendar>

// ...
export class AppComponent {
    // ...
    federalHolidays = [
        this.changeYear(new Date('2022-01-01T00:00:00.000Z')),
        this.changeYear(new Date('2022-01-17T00:00:00.000Z')),
        this.changeYear(new Date('2022-02-21T00:00:00.000Z')),
        this.changeYear(new Date('2022-05-30T00:00:00.000Z')),
        this.changeYear(new Date('2022-06-19T00:00:00.000Z')),
        this.changeYear(new Date('2022-07-04T00:00:00.000Z')),
        this.changeYear(new Date('2022-09-05T00:00:00.000Z')),
        this.changeYear(new Date('2022-10-10T00:00:00.000Z')),
        this.changeYear(new Date('2022-11-11T00:00:00.000Z')),
        this.changeYear(new Date('2022-11-24T00:00:00.000Z')),
        this.changeYear(new Date('2022-12-25T00:00:00.000Z'))
    ];

    getCellCssClass(date: any, view: any) {
        let cssClass = '';
        this.federalHolidays.forEach((item) => {
            if (date !== undefined) {
                if (date.getDate() === item.getDate() && date.getMonth() === item.getMonth() && view !== 'year') {
                    cssClass = 'holiday';
                }
            }
        });
        return cssClass;
    }
}

::ng-deep .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
    text-shadow: none;
    font-weight: bold;
    color: #ff3030;
}

Vue

App.vue

<template>
    <DxCalendar ...
        cell-template="custom"
    >
        <template #custom="{ data: cell }">
            <span :class="getCellCssClass(cell.date, cell.view)">
                {{ cell.text }}
            </span>
        </template>
    </DxCalendar>
</template>

<script>
// ...
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'))
];

export default {
    // ...
    methods: {
        getCellCssClass(date, view) {
            let cssClass = '';
            federalHolidays.forEach((item) => {
                if (date !== undefined) {
                    if (date.getDate() === item.getDate() && date.getMonth() === item.getMonth() && view !== 'year') {
                        cssClass = 'holiday';
                    }
                }
            });
            return cssClass;
        }
    }
}
</script>

<style>
.dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
    text-shadow: none;
    font-weight: bold;
    color: #ff3030;
}
</style>

React

App.js

index.css

// ...
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'))
];

function App() {
    return (
        <Calendar ...
            cellRender={CustomCell} 
        >
        </Calendar>
    );
};

// ...

function CustomCell(cell) {
    return (
        <span className={getCellCssClass(cell.date, cell.view)}>
            { cell.text }
        </span>
    );
};

function getCellCssClass(date, view) {
    let cssClass = '';
    federalHolidays.forEach((item) => {
        if (date !== undefined) {
            if (date.getDate() === item.getDate() && date.getMonth() === item.getMonth() && view !== 'year') {
                cssClass = 'holiday';
            }
        }
    });
    return cssClass;
};

export default App;

.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:

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery Calendar - Getting Started

jQuery

Angular

Vue

React

Create a Calendar

jQuery

Angular

Vue

React

Specify Available Dates

jQuery

Angular

Vue

React

Specify Available Views

jQuery

Angular

Vue

React

Add the Today Button

jQuery

Angular

Vue

React

Show Week Numbers

jQuery

Angular

Vue

React

Customize Cell Appearance

jQuery

Angular

Vue

React