Data Binding

27 Mar 201824 minutes to read

Appointment Fields

The below listed names are the appointment fields which holds the appropriate column names from the dataSource.

Field name	Description
id	Binds the id field name for indexing and performing CRUD operation on the appointments. It’s optional.
startTime	Binds the appointment start time field name which is mandatory and also its related validation rules.
startTimeZone	Binds the name of the start timezone field in the dataSource and also its related validation rules. If the startTimeZone field is not mentioned, then the appointment makes use of the Scheduler timeZone or System timeZone.
endTime	Binds the appointment end time field name which is mandatory and also its related validation rules.
endTimeZone	Binds the name of the end timezone field in the dataSource and also its related validation rules. If the endTimeZone field is not mentioned, then the appointment makes use of the Scheduler timeZone or System timeZone.
subject	Binds the appointment subject field name which holds the summary of the appointment and also its related validation rules.
location	Binds the name of the location field and also its related validation rules. It indicates the appointment location/occurrence place. This field needs to be bind to the Scheduler, when an API showLocationField is set to true.
description	Binds the appointment description field name and also its related validation rules.
allDay	Binds the name of the `allDay` field. It accepts the boolean value and indicates whether the appointment is an all-day appointment or not.
categorize	Binds the name of the categorize field and also its related validation rules. It indicates the category or status value (red categorize, green, yellow and so on).
priority	Binds the name of the priority field, its related validation rules and also indicates the priority (high, low, medium and none) of the appointments. This field should be bind to the Scheduler, when prioritySettings.enable is set to true.
resourceFields	Binds one or more fields in the resource collection. It maps the resource field names with the appointments, denoting to which resource the appointments actually belongs.
recurrence	Binds the name of the recurrence field. It accepts the boolean value and indicates whether the appointment is a recurrence appointment or not.
recurrenceRule	Binds the name of the recurrenceRule field. It holds the recurrence pattern associated with the appointments.
recurrenceId	Binds the recurrence Id field which acts as a parent id for Scheduler recurrence appointments.
recurrenceExDate	Binds the recurrence Exception field which accepts the recurrence Exception date values.

The below example depicts the appointment fields accepting the string type mapper fields,

HTML

<ej-schedule id="Schedule1" [currentDate]=currentdate [showLocationField]=showLocation [categorizeSettings.enable]=enableCategorize [prioritySettings.enable]=enablePriority [appointmentSettings.dataSource]=scheduleData appointmentSettings.id="Id" appointmentSettings.subject="Subject" appointmentSettings.startTime="StartTime" appointmentSettings.endTime="EndTime" appointmentSettings.allDay="AllDay" appointmentSettings.recurrence="Recurrence" appointmentSettings.recurrenceRule="RecurrenceRule" appointmentSettings.resourceFields="OwnerId" appointmentSettings.categorize="Categorize" appointmentSettings.priority="Priority" appointmentSettings.location="location" [group]=group>
    <e-resources>
        <e-resource field="OwnerId" title="Owner" name="Owners" [resourceSettings]=resourceData></e-resource>
    </e-resources>
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public scheduleData: any;
    public currentDate: Date;
    public group: any;
    public allowMultiple: Boolean;
    public resourceData: any;
    public showLocation: Boolean;
    public enableCategorize: Boolean;
    public enablePriority: Boolean;
    constructor() {
        this.showLocation = true;
        this.enableCategorize = true;
        this.enablePriority = true;
        this.scheduleData = [{
            Id: 1,
            Subject: "Music Class",
            StartTime: new Date(2017, 5, 4, 1, 30),
            StartTimeZone: "UTC +05:30",
            EndTime: new Date(2017, 5, 4, 1, 30),
            EndTimeZone: "UTC +05:30",
            Description: "Never Give up on Obstacles",
            location: "US",
            AllDay: false,
            Recurrence: true,
            RecurrenceRule: "FREQ=WEEKLY;BYDAY=MO,TU;INTERVAL=1;COUNT=15",
            Categorize: "1",
            Priority: "medium",
            OwnerId: 3,
            RecurrenceId: 1,
            RecurrenceExDate: null
        }];
        this.currentDate = new Date(2017, 5, 5);
        this.group = {
            resources: ['Owners']
        };
        this.resourceData = {
            dataSource: [{
                text: "Nancy",
                id: 1,
                color: "#f8a398"
            }, {
                text: "Steven",
                id: 3,
                color: "#56ca85"
            }, {
                text: "Michael",
                id: 5,
                color: "#51a0ed"
            }],
            text: 'text',
            id: 'id',
            color: 'color'
        };
    }
}

Appointment Field Validation

It is possible to validate the required fields of the appointment window from client-side before submitting it, by adding appropriate validation rules to each fields. The appointment fields have been extended to accept both String and object type values. Therefore, in order to perform validations, it is necessary to specify object values for the appointment fields.

Refer the appointment fields specified with validation rules from the following code example.

HTML

<ej-schedule id="Schedule1" [categorizeSettings.enable]=enableCategorize appointmentSettings.id="Id" [appointmentSettings.subject]=subject [appointmentSettings.description]=description appointmentSettings.startTime="StartTime" appointmentSettings.endTime="EndTime" appointmentSettings.allDay="AllDay" appointmentSettings.recurrence="Recurrence" appointmentSettings.recurrenceRule="RecurrenceRule" [appointmentSettings.categorize]=categorize>
</ej-schedule>>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public enableCategorize: Boolean;
    public subject: Object;
    public description: Object;
    public categorize: Object;
    constructor() {
        this.enableCategorize = true;
        this.subject = { field: "Subject", validationRules: { required: true } };
        this.description = { field: "Description", validationRules: { required: true, minlength: 5, maxlength: 500 } };
        this.categorize = { field: "Categorize", validationRules: { required: true, messages: { required: "Categories are required." } } };
    }
}

Binding to JSON Data Array

To bind the Scheduler events data as array of JSON objects, refer the below code example.

Example - Array of JSON Data Binding

HTML

<ej-schedule id="Schedule1" width="100%" height="525px" [currentDate]=currentDate [appointmentSettings.dataSource]=dataSource>
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public dataSource: Object[];
    public currentDate: Date;
    constructor() {
        this.currentDate = new Date(2017, 10, 5);
        this.dataSource = [{
            Id: 1,
            Subject: "Music Class",
            StartTime: new Date("2017/11/7 06:00 AM"),
            EndTime: new Date("2017/11/7 07:00 AM")
        }, {
            Id: 2,
            Subject: "School",
            StartTime: new Date("2017/11/7 9:00 AM"),
            EndTime: new Date("2017/11/7 02:30 PM")
        }];
    }
}

Binding Remote Data Service

The appointment data can be bound to the Scheduler through the Odata remote services, where the service URL is mapped with Data manager and then configured to the Schedule dataSource API.

HTML

<ej-schedule id="Schedule1" width="100%" height="525px" [currentDate]=currentDate [appointmentSettings.dataSource]=dataManager
        [appointmentSettings.query]=query>
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public dataManager;
    public query;
    public currentDate: Date;
    constructor() {
        this.currentDate = new Date(2017, 5, 5);
        this.dataManager = ej.DataManager({
            // referring data from remote service (url binding)
            url: "http://js.syncfusion.com/ejServices/api/Schedule/LoadData",
            crossDomain: true
        });
        // query to fetch the records from the specified table “Events”
        this.query = ej.Query().from("Events").take(10);
    }
}

OData V4

The OData v4 is an improved version of OData protocols and the DataManager can also retrieve and consume appointment data from OData v4 services.

HTML

<ej-schedule id="Schedule1" width="100%" height="525px" [currentDate]=currentDate [appointmentSettings.dataSource]=dataManager
        appointmentSettings.subject="ShipName" appointmentSettings.startTime="OrderDate" appointmentSettings.endTime="RequiredDate"
        appointmentSettings.description="ShipAddress">
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public dataManager;
    public currentDate: Date;
    constructor() {
        this.currentDate = new Date(1997, 2, 23);
        this.dataManager = ej.DataManager({
            //OData v4 service 
            url: "http://services.odata.org/V4/Northwind/Northwind.svc/Orders/",
            adaptor: new ej.ODataV4Adaptor()
        });
    }
}

WebAPI Binding

The Schedule appointment data can be bound through the Web API service and it is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML.

HTML

<ej-schedule id="Schedule1" width="100%" height="525px" [currentDate]=currentDate [appointmentSettings.dataSource]=dataManager>
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public dataManager;
    public currentDate: Date;
    constructor() {
        this.currentDate = new Date(2017, 5, 5);
        this.dataManager = ej.DataManager({
            // get the required appointments from Web API service
            url: "http://js.syncfusion.com/ejServices/api/Schedule/LoadData",
            // enable cross domain
            crossDomain: true
        });
    }
}

The server-side code to retrieve the appointments are as follows.

C#

// To retrieve the appointments from database and bind it to Scheduler
public IEnumerable<Event> GetData(String CurrentDate, String CurrentView, String CurrentAction)
{
    return new NORTHWNDEntities().Events.ToList();
}

Loading Data on Demand

Load on demand feature allows the Scheduler to retrieve only the filtered appointment data (for the current Scheduler date range) from the service/database during loading time, and that too only for the current Scheduler view. There are 3 parameters made available on the server-side namely CurrentDate, CurrentView and CurrentAction through which only the necessary appointments are retrieved from the database and then assigned to the Scheduler dataSource. With this kind of Scheduler action, consuming only lesser data will reduce the usage of network bandwidth size and loading time.

The enableLoadOnDemand property is used to enable or disable the load on demand functionality of the schedule.

HTML

<ej-schedule id="Schedule1" width="100%" height="525px" [enableLoadOnDemand]="true" [currentDate]=currentDate [appointmentSettings.dataSource]=dataManager>
</ej-schedule>

TS

import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/schedule/schedule.component.html',
})
export class ScheduleComponent {
    public dataManager;
    public currentDate: Date;
    constructor() {
        this.currentDate = new Date(2017, 5, 5);
        this.dataManager = ej.DataManager({
            // get the required appointments from service
            url: "http://js.syncfusion.com/ejServices/api/Schedule/LoadCurrentData",
            // enable cross domain
            crossDomain: true
        });
    }
}

The server-side code to handle the load on demand is as follows.

C#

// retrieve the appointments based on the current date.
public IEnumerable<Event> GetData(String CurrentDate, String CurrentView, String CurrentAction)
{
    var dateString = Regex.Match(CurrentDate.ToString(), @"^(\w+\b.*?){4}").ToString(); 
    string format = "ddd MMM dd yyyy"; 
    DateTime dateTimeValue;
    try
    {
        dateTimeValue = DateTime.ParseExact(dateString, format, CultureInfo.InvariantCulture);
    }
    catch(FormatException)
    {
        var dateSplit = CurrentDate.Split(' ');//For IE<=10 Fri Mar 20 11:00:22 UTC+0530 2015
        if (dateSplit[2].Length == 1) dateSplit[2] = string.Concat("0", dateSplit[2]);
        dateString = string.Concat(dateSplit[0], ' ', dateSplit[1], ' ', dateSplit[2], ' ', dateSplit[dateSplit.Length - 1]);
        dateTimeValue = DateTime.ParseExact(dateString, format, CultureInfo.InvariantCulture);
    }
	// AppointmentRepository is a user-defined class within which the FilterAppointment method is defined. 
    AppointmentRepository rep = new AppointmentRepository();
    var data = rep.FilterAppointment(dateTimeValue, CurrentAction, CurrentView); 
    return data;
}

// Method to filter the appointments based on the date range
public List<Event> FilterAppointment(DateTime CurrentDate, String CurrentAction, String CurrentView)
{
    DateTime CurrDate = Convert.ToDateTime(CurrentDate);
    DateTime StartDate = FirstWeekDate(CurrDate.Date);
    DateTime EndDate = FirstWeekDate(CurrDate.Date);
    List<Event> appointmentList = new NORTHWNDEntities().Events.ToList();
    switch (CurrentView)
    {
        case "day":
            StartDate = CurrentDate;
            EndDate = CurrentDate;
            break;
        case "week":
            EndDate = EndDate.AddDays(7);
            break;
        case "workweek":
            EndDate = EndDate.AddDays(5);
            break;
        case "month":
            StartDate = CurrDate.Date.AddDays(-CurrDate.Day + 1);
            EndDate = StartDate.AddMonths(1);
            break;
    }
    appointmentList = new NORTHWNDEntities().Events.ToList().Where(app =>
    ((Convert.ToDateTime(app.StartTime).Date >= Convert.ToDateTime(StartDate.Date)) &&
    (Convert.ToDateTime(app.EndTime).Date <= Convert.ToDateTime(EndDate.Date)))).ToList();
    return appointmentList;
}

internal static DateTime FirstWeekDate(DateTime CurrentDate)
{
    try
    {
        DateTime FirstDayOfWeek = CurrentDate;
        DayOfWeek WeekDay = FirstDayOfWeek.DayOfWeek;
        switch (WeekDay)
        {
            case DayOfWeek.Sunday:
                break;
            case DayOfWeek.Monday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-1);
                break;
            case DayOfWeek.Tuesday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-2);
                break;
            case DayOfWeek.Wednesday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-3);
                break;
            case DayOfWeek.Thursday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-4);
                break;
            case DayOfWeek.Friday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-5);
                break;
            case DayOfWeek.Saturday:
                FirstDayOfWeek = FirstDayOfWeek.AddDays(-6);
                break;
        }
        return (FirstDayOfWeek);
    }
    catch
    {
        return DateTime.Now;
    }
}