How to display the total events duration on each day?
This knowledge base article explains how to display the total event duration on each day.
Step 1: Create an Angular resource Scheduler by referring to the following UG link.
https://ej2.syncfusion.com/angular/documentation/schedule/resources/#grouping-single-level-resources
Step 2: Bind eventRendered, renderCell and dataBinding events as shown in the following code example.
<ejs-schedule #scheduleObj cssClass='schedule-group' width='100%' height='550px' [group]="group" [selectedDate]="selectedDate" (renderCell)='onRenderCell($event)' [eventSettings]="eventSettings" (dataBinding)='dataBinding($event)' (eventRendered)='eventRendered($event)'> <e-views> <e-view option="Day"></e-view> <e-view option="Week"></e-view> <e-view option="Month"></e-view> <e-view option="Agenda"></e-view> </e-views> <e-resources> <e-resource field='AirlineId' title='Airline Name' name='Airlines' [allowMultiple]='allowMultiple' [dataSource]='resourceDataSource' textField='AirlineName' idField='AirlineId' colorField='AirlineColor'> </e-resource> </e-resources> </ejs-schedule>
Step 3: Define the functions to the corresponding events to display and update the event duration on each day for every CRUD actions, as shown in the following code example.
onRenderCell(args: RenderCellEventArgs): void {
if (args.elementType === 'dateHeader' || args.elementType === 'monthCells') {
let ele: Element = document.createElement('div');
ele.id = this.scheduleObj.getResourcesByIndex(args.groupIndex).resourceData.AirlineId as any;
ele.innerHTML = this.getDuration(args);
(args.element).appendChild(ele.firstChild);
}
}
getDuration: Function = (args: any) => {
var id = this.scheduleObj.getResourcesByIndex(args.groupIndex).resourceData.AirlineId as any;
id = id + '_' + args.date.getDate() + '_' + args.date.getMonth();
return '<div id=' + id + '></div>'
}
eventRendered() {
let totalEvents = this.scheduleObj.eventsData;
var dm = new DataManager({ json: totalEvents });
let resources = this.scheduleObj.resources[0].dataSource;
var dates = this.scheduleObj.getCurrentViewDates();
(resources as any).forEach(function (resource) {
var datasource = dm.executeLocal(
new Query().where("AirlineId", "equal", resource.AirlineId)
);
dates.forEach(function (date) {
var hours = 0;
var id = resource.AirlineId.toString() + '_' + (date as any).getDate() + '_' + (date as any).getMonth();;
var startDate, endDate;
startDate = new Date(date as Date);
endDate = new Date(date as Date);
endDate = new Date((endDate as any).setHours(23, 59, 59));
let predicate: Predicate = new Predicate("StartTime", 'greaterthanorequal', startDate).
and(new Predicate("EndTime", 'greaterthanorequal', startDate)).
and(new Predicate("StartTime", 'lessthan', endDate)).
or(new Predicate("StartTime", 'lessthanorequal', startDate).
and(new Predicate("EndTime", 'greaterthan', startDate)));
let data: Object[] = new DataManager({ json: datasource }).executeLocal(new Query().where(predicate));
data.forEach(function (data) {
hours += Math.abs((data as any).EndTime - (data as any).StartTime) / 36e5;
});
document.getElementById(id).innerHTML = hours + " Hours";
});
});
}
dataBinding(args) {
if (args.result.length == 0) {
let resources = this.scheduleObj.resources[0].dataSource;
var dates = this.scheduleObj.getCurrentViewDates();
(resources as any).forEach(function (resource) {
dates.forEach(function (date) {
var id = resource.AirlineId.toString() + '_' + (date as any).getDate() + '_' + (date as any).getMonth();
document.getElementById(id).innerHTML = 0 + " Hours";
});
});
}
}
Step 4: Run the sample, and the event duration will be displayed on the event-rendered day as shown below.
Figure 1: Displaying duration on initial load.
Figure 2: Displaying duration after CRUD action.
Please refer the example from the following GitHub link: Displaying event duration on each day
