Vue Calendar - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery 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 covers 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/21.1.11/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/21.1.11/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;

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