How To

The following section explains how the Calendar can be easily customized in various aspects.

JSON Data binding with Calendar

In most of the real cases, the model data will be available with JSON format only. Here we have showcased Calendar component by setting JSON string to value property. In this JSON, we have used ISO formatted date string which is frequently used date format to get proper date and time value without any misreading. Also our Calendar component supports the ISO formatted date value, so parsed JSON value can be directly set to Calendar model.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component } from '@angular/core';
export interface User {
    selectedDate: Date;
}
export interface JSONUser {
    selectedDate: string;
}
@Component({
    selector: 'app-container',
    template: `
    <!-- To Render Calendar -->
    <ejs-calendar id="calendar" [(value)]='user.selectedDate' (change)='onChange($event)'></ejs-calendar>
    <div class="valuestring">
    <b>User model</b>:  <br/>{{user | json }}
    <br/><br/>
    <b>JSON Data</b>: <br/>{{ model_result }}
    <br/><br/>
    </div>`
})
export class AppComponent {
    public user: User;
    public JSONData: JSONUser = JSON.parse('{ "selectedDate": "2018-12-18T08:56:00+00:00"}');
    public model_result: string = JSON.stringify(this.JSONData);

    constructor() {}
    public ngOnInit() {
        this.user = this.JSONData;
    }
    onChange(args) {
        this.JSONData.selectedDate = args.value;
        this.model_result = JSON.stringify(this.JSONData);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 650px;
    margin: 0 auto;
}
#calendar {
display: inline-block;
}
.valuestring {
display: inline-block;
background:#f3f3f3;
border:1px solid #c6c4c43f;
padding:10px;
}
.valuestring {
    float: right;
}

Two-way binding

The following example demonstrates how to achieve two-way binding by binding the value to the first Calendar component by using property binding and binding the model data using ngModel by using model binding to the Calendar component. The value of the Calendar will get change, when their is any change in the property value or model value.

The two-way binding can also be achieved only by using property binding or model binding in the Calendar component.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
    selector: 'app-container',
    template: `
        <!-- two-way binding using the value binding and model binding in the Calendar --->
        <ejs-calendar id="firstcalendar" #ejCalendar [(value)]='value'></ejs-calendar>
        <ejs-calendar id="secondcalendar" #ejCalendars [(ngModel)]='value'></ejs-calendar>
        `
})
export class AppComponent {
    value: Date;
    constructor() {
        this.value = new Date('1/1/2020');
    }
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 530px;
    margin: 0 auto;
}

#firstcalendar,#secondcalendar{
     display: inline-block;
     margin-right:15px;
}

/* custom -styles */

.e-btn.e-clear { /* csslint allow: adjoining-classes*/
    margin-right: 81px;
}

Custom event Emitter

The two-way binding in Calendar can also be achieved using the custom event binding and property binding in the controls present in two different components. To create custom event, we need to create an instance of event emitter.

In the following example, property binding is used to share the data from the parent component to the child component using @input directive and custom event binding is used to share the data from the child component by using @output directive.

Source
Preview
app.component.ts
app.module.ts
child.component.ts
main.ts
styles.css
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
    selector: 'my-app',
    template: `
  <div class="parentelement">
  <span><h4>Parent Component</h4></span>
   <div class="datevalue">
   <ejs-calendar id="calendar" #calendar (change)="deposit()" [value]="value" width="200px"></ejs-calendar>
   </div>
   </div>
   <child [xvalue]="value" (valueChange)="valuecheck($event)"> </child>
  `,
})
export class ParentComponent {
    @ViewChild('calendar')
    public calendar: CalendarComponent;
    value: Date;
    constructor() {
        this.value = new Date("2/1/2020");
    }
    deposit() {
        this.value = this.calendar.value;
    }
    valuecheck(args: any) {
        this.value = args;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the CalendarModule for the Calendar component
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { ParentComponent }  from './app.component';
import { ChildComponent }  from './child.component';

@NgModule({
  //declaration of ej2-angular-calendars module into NgModule
  imports:      [ BrowserModule, CalendarModule ],
  declarations: [ ParentComponent,  ChildComponent ],
  bootstrap:    [ ParentComponent]
})
export class AppModule { }
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core'
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
  selector: 'child',
  template: `
  <br>
  <span><h4>Child Component</h4></span>
  <div class="childelement"> 
    <ejs-calendar id="date2" #child (change)="ValueChange()" [value]="xvalue" width="200px"></ejs-calendar>
  </div>
  `,
})
export class ChildComponent {
  @ViewChild('child')
  public DateValue: CalendarComponent;
  @Input() xvalue: Date;
  @Output() valueChange = new EventEmitter();

  ValueChange() {
  this.xvalue = this.DateValue.value;
  this.valueChange.emit(this.DateValue.value);
  }
}
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 598px;
    margin: 0 auto;
    height: 250px;
}

child, .parentelement{
    display:inline-block;
    text-align: center;
}
child{
    margin-left:35px;
}
h4{
    margin:0 0 5px 0;
}

Set clear button

The following steps illustrate how to configure clear button in Calendar UI.

  1. On created event of Calendar add the required elements to have clear button. Here we have used div with Essential JS 2 Button component.

  2. Use the e-footer class to the div tag to act as the footer.

  3. Use button to clear the selected date from the calendar.

  4. Bind the required event handler to the button tag to clear the value.

Below is the code example.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
    selector: 'app-container',
    styleUrls: ['styles.css'],
    template: `
        <!-- Bind created event to add the clear button --->
        <ejs-calendar #ejCalendar (created)='onCreate($event)'></ejs-calendar>
        `
})
export class AppComponent {
    @ViewChild('ejCalendar') ejCalendar: CalendarComponent;
    onCreate() {
        let clearBtn: HTMLElement = document.createElement('button');
        let footerElement: HTMLElement = document.getElementsByClassName('e-footer-container')[0];
        //creates the custom element for clear button
        clearBtn.className = 'e-btn e-clear e-flat';
        clearBtn.textContent = 'Clear';
        footerElement.prepend(clearBtn);
        this.ejCalendar.element.appendChild(footerElement);
        let proxy = this;
        // custom click handler to update the value property with null values.
        document.querySelector('.e-footer-container .e-clear').addEventListener('click', function() {
            proxy.ejCalendar.value = null;
        })
    });
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

/* custom -styles */

.e-btn.e-clear { /* csslint allow: adjoining-classes*/
    margin-right: 81px;
}

Show other months dates

The following example demonstrates how to show dates in other months.

The below styles changes the Calendar’s other month dates to visible state from its hidden state.

.e-calendar .e-content tr.e-month-hide {
    display: table-row;
}

.e-calendar .e-content td.e-other-month>span.e-day {
    display: inline-block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
        <!-- To show other months date refer the "styles.css". -->
        <ejs-calendar [value]='dateValue'></ejs-calendar>
        `
})
export class AppComponent {
    public dateValue: Date = new Date();
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* Example -styles */

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}


/* Custom -styles */


.e-calendar .e-content tr.e-month-hide { /* csslint allow: adjoining-classes*/
    display: table-row;
}

/* csslint ignore:start */
.e-calendar .e-content td.e-other-month>span.e-day {
/* csslint ignore:end */
    display: inline-block;
}

.e-calendar .e-content td.e-month-hide, /* csslint allow: adjoining-classes*/
.e-calendar .e-content td.e-other-month { /* csslint allow: adjoining-classes*/
    pointer-events: auto;
    touch-action: auto;
}

Select a sequence of dates in Calendar

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when isMultiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
import moment from 'moment';

@Component({
    selector: 'app-container',
    styleUrls: ['styles.css'],
    template: `
        <!-- Rendering the Calendar with Multi selection option--->
        <div class="wrapelement">
            <ejs-calendar #ejCalendar id="calendar" [isMultiSelection]='true' (change)="onChange($event)"></ejs-calendar>
            </div>
            <div class='btncontainer e-btn-group e-vertical'>
            <input type="radio" id="workweek" name="week" value="workweek" (click)="workWeek()" />
            <label class="e-btn" for="workweek">Work Week</label>
            <input type="radio" id="week" name="week" value="week" (click)="week()"/>
            <label class="e-btn" for="week">Week</label>
            </div>
        `
})
export class AppComponent {
    @ViewChild('ejCalendar')
    public CalendarInstance: CalendarComponent;
    /*selected current week dates when click the button*/
    workWeek() {
        if (this.CalendarInstance.element.classList.contains('week')) {
            this.CalendarInstance.element.classList.remove('week')
        }
        this.CalendarInstance.element.classList.add('workweek');
    }

    week() {
        if (this.CalendarInstance.element.classList.contains('workweek')) {
            this.CalendarInstance.element.classList.remove('workweek')
        }
        this.CalendarInstance.element.classList.add('week');
    }

    onChange(args) {
        var startOfWeek = moment(args.value).startOf('week');
        var endOfWeek = moment(args.value).endOf('week');
        if (this.CalendarInstance.element.classList.contains('workweek')) {
            getWeekArray(startOfWeek.day(1), endOfWeek.day(5), this);
        } else if (this.CalendarInstance.element.classList.contains("week")) {
            getWeekArray(startOfWeek, endOfWeek, this);
        }
    }

    function getWeekArray(startOfWeek, endOfWeek, obj) {
        var days = [];
        var day = startOfWeek;
        while (day <= endOfWeek) {
            days.push(day.toDate());
            day = day.clone().add(1, 'd');
        }
        obj.CalendarInstance.values = days;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-ng-calendars module
import { CalendarModule } from '@syncfusion/ej2-ng-calendars';
import { AppComponent } from './app.component';
import moment from 'moment';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-ng-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* Example -styles */

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
    height: 350px;
}

#wrapper {
    width: 450px;
    margin: 0 auto;
}

.wrapelement, .btncontainer {
    display: inline-block;
}

.btncontainer{
    display: inline-flex;
    margin: 120px 0 0 85px;
    float: right;
}

Skip a month in calendar

The following example demonstrates how to skip a month in a Calendar while clicking the previous and next icon. Here we have used the navigated event to skip a month using NavigateTo  method.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

@Component({
    selector: 'app-container',
    template: `
        <ejs-calendar #ejCalendar (navigated)='onNavigate($event)'></ejs-calendar>
        `
})

export class AppComponent {
    @ViewChild('ejCalendar') ejCalendar: CalendarComponent;
   //skips a month while cliking previous and next icon in month view.
   onNavigate(args):void {
    let date: Number;
    if ((<HTMLInputElement>event.currentTarget).classList.contains('e-next')) {
        //incrementing the month while clicking the next icon
        date = new Date(args.date.setMonth(args.date.getMonth() + 1));
    }
    if ((<HTMLInputElement>event.currentTarget).classList.contains('e-prev')) {
        //decrementing the month while clicking the previous icon
        date = new Date(args.date.setMonth(args.date.getMonth() - 1));
    }
    if (args.view == 'month') {
        this.ejCalendar.navigateTo('month', new Date('' + date));
    }
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Render Calendar with week number

You can enable the weekNumber in Calendar by using the weekNumber property.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
        <!-- Sets the weekNumber -->
        <ejs-calendar [value]='dateValue' weekNumber='true'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Date = new Date();
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Change the first day of week

The Calendar provides an option to change the first day of the week by using the

firstDayOfWeek property. Day of the week starts from 0(Sunday) to 6(Saturday).

By default, the first day of week will be based on culture.

The following example demonstrates the Calendar with Tuesday as first day of the week.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-container',
    template: `
        <!-- Sets the firstDayOfWeek -->
        <ejs-calendar [value]='dateValue' [firstDayOfWeek]='startWeek'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Date = new Date();
    public startWeek: number = 2;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);