How to JSON data binding with Calendar in Angular Calendar

31 Aug 20262 minutes to read

In many applications, data is commonly available in JSON format. You can bind JSON data to the Calendar component by assigning an ISO-formatted date string to the value property.

ISO-formatted date strings provide a standardized representation of date and time values, helping to avoid format inconsistencies during parsing.

The Calendar component supports ISO-formatted date values, so the date value obtained from parsed JSON data can be assigned directly to the Calendar value property.

The following example demonstrates how to bind a date value from JSON data to the Calendar component.

app.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';
export interface User {
    selectedDate: Date;
}
export interface JSONUser {
    selectedDate: string;
}
@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
    <!-- To Render Calendar -->
    <ejs-calendar id="calendar" [(value)]='user.selectedDate' (change)='onChange($event)'></ejs-calendar>
    <div class="valuestring">
    <b>User model</b>:  <br/>
    <br/><br/>
    <b>JSON Data</b>: <br/>
    <br/><br/>
    </div>`
})
export class AppComponent {
    public user?: User | any;
    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: any) {
        this.JSONData.selectedDate = args.value;
        this.model_result = JSON.stringify(this.JSONData);
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));