Angular 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

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

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.

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

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

app.component.html
  • <dx-calendar ...
  • zoomLevel="year"
  • >
  • </dx-calendar>

Add the Today Button

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

app.component.html
  • <dx-calendar ...
  • [showTodayButton]="true">
  • </dx-calendar>

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:

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

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