React Calendar - Getting Started
jQuery
Angular
Vue
React
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:
$(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/22.1.14/css/dx.light.css"> <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/22.1.14/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:
<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:
<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:
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
$(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
<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
<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
// ... 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
$(function() { $("#calendar").dxCalendar({ // ... zoomLevel: "year" }); });
Angular
<dx-calendar ... zoomLevel="year" > </dx-calendar>
Vue
<template> <DxCalendar ... zoom-level="year" > </DxCalendar> </template> <script> // ... </script>
React
// ... 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
$(function() { $("#calendar").dxCalendar({ // ... showTodayButton: true }); });
Angular
<dx-calendar ... [showTodayButton]="true"> </dx-calendar>
Vue
<template> <DxCalendar ... :show-today-button="true" > </DxCalendar> </template> <script> // ... </script>
React
// ... 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
$(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
<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
<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
// ... 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:
If you have technical questions, please create a support ticket in the DevExpress Support Center.