Customizing Schedule Component
3 Replies
Hi Adnan,
Thanks for your update.
We have analyzed the mentioned requirement with the shared image and prepared a sample to meet your requirement by using Schedule control actionBegin and dataBound events, which can be downloaded from the following location.
In the above sample, we have maintained the field “OrderCost” in the event collection and based on this value displayed the total cost in the month cell footer within the dataBound event, in which we can get all the event details and processing each event StartTime and gets it work-cell details and then append the div (TotalCost displaying) element. Also, we have displayed the total cost display along with the more appointment indicator (i.e. in the same row instead next row) as shown in the below image. Please refer to the following code example used in the above sample to meet your requirement.
Total Cost Display Screenshot:
app.component.ts page:
|
import { Component, ViewEncapsulation } from '@angular/core';
import { MonthService, EventSettingsModel, ScheduleComponent, EJ2Instance, View } from '@syncfusion/ej2-ng-schedule';
import { createElement, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MonthService],
// specifies the template string for the Schedule component
template: `<ejs-schedule width='100%' height='550px' [selectedDate]="selectedDate" [(currentView)]="currentView" (actionBegin)="onActionBegin($event)" (dataBound)="onDataBound()"
[eventSettings]="eventSettings" ><e-views> <e-view option="Month"></e-view> </e-views> </ejs-schedule>`,
styles: [`
.total-cost-wrapper {
position: relative;
top: calc(100% - 6px);
left: 55px;
}
.total-cost {
text-align: center;
background-color: blue;
color: white;
bottom: 0px;
position: absolute;
width: 65%;
}`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
title = 'app';
public data: object[] = [
{
Id: 1,
Subject: 'JavaScript Book',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 13, 0),
OrderCost: 10,
}, {
Id: 2,
Subject: 'Learning Python',
StartTime: new Date(2018, 1, 12),
EndTime: new Date(2018, 1, 12),
IsAllDay: true,
OrderCost: 10,
}, {
Id: 3,
Subject: 'Let Us C',
StartTime: new Date(2018, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 0),
OrderCost: 40,
}, {
Id: 4,
Subject: 'Introduction Algorithm',
StartTime: new Date(2018, 1, 13, 9, 0),
EndTime: new Date(2018, 1, 13, 11, 0),
OrderCost: 25,
}, {
Id: 5,
Subject: 'Code Complete',
StartTime: new Date(2018, 1, 20, 9, 0),
EndTime: new Date(2018, 1, 20, 11, 0),
OrderCost: 20,
}, {
Id: 6,
Subject: 'Head First Java',
StartTime: new Date(2018, 1, 22, 14, 0),
EndTime: new Date(2018, 1, 22, 18, 0),
OrderCost: 10,
}, {
Id: 7,
Subject: 'Java 2',
StartTime: new Date(2018, 1, 8, 14, 0),
EndTime: new Date(2018, 1, 8, 15, 0),
Location: 'San-Francisco',
OrderCost: 15,
}, {
Id: 8,
Subject: 'Cracking the Coding Interview',
StartTime: new Date(2018, 1, 5, 9, 0),
EndTime: new Date(2018, 1, 5, 13, 0),
OrderCost: 30,
}, {
Id: 9,
Subject: 'C++ Primer',
StartTime: new Date(2018, 2, 1),
EndTime: new Date(2018, 2, 1),
IsAllDay: true,
OrderCost: 20,
}, {
Id: 10,
Subject: 'A Tour of C##',
StartTime: new Date(2018, 1, 14),
EndTime: new Date(2018, 1, 14),
IsAllDay: true,
OrderCost: 10,
}
];
public selectedDate: Date = new Date(2018, 1, 15);
public currentView: View = 'Month';
public eventSettings: EventSettingsModel = {
dataSource: this.data
};
onActionBegin(args: any) {
if (args.requestType == "eventCreate" || args.requestType == "eventChange" || args.requestType == "eventRemove") {
const scheduleElement: any = document.getElementsByClassName('e-schedule')[0];
const scheduleObj: ScheduleComponent = ((scheduleElement as EJ2Instance).ej2_instances[0] as ScheduleComponent);
if (scheduleObj.currentView == "Month") {
let costWrappers: any = scheduleObj.element.querySelectorAll('.total-cost-wrapper');
for (let elem of costWrappers) {
remove(elem);
}
}
}
}
onDataBound() {
const scheduleElement: any = document.getElementsByClassName('e-schedule')[0];
const scheduleObj: ScheduleComponent = ((scheduleElement as EJ2Instance).ej2_instances[0] as ScheduleComponent);
if (scheduleObj.currentView == "Month") {
let eventCollection: Object[] = scheduleObj.getCurrentViewEvents();
if (eventCollection.length > 0) {
let oldIndexDate: Date = new Date((<Date>(<{ [key: string]: Object }>eventCollection[0]).StartTime).getTime());
oldIndexDate.setHours(0, 0, 0, 0);
let costValue: number = 0;
for (let i: number = 0; i < eventCollection.length; i++) {
let eventData: any = <{ [key: string]: Object }>eventCollection[i];
let indexDate: Date = new Date((<Date>(eventData).StartTime).getTime());
indexDate.setHours(0, 0, 0, 0);
if (oldIndexDate.getTime() == indexDate.getTime()) {
costValue += isNullOrUndefined(eventData.OrderCost) ? 0 : eventData.OrderCost;
} else {
this.onElementRender(scheduleObj, oldIndexDate, costValue);
costValue = 0;
costValue += isNullOrUndefined(eventData.OrderCost) ? 0 : eventData.OrderCost;
oldIndexDate = indexDate;
}
if (i == eventCollection.length - 1) {
this.onElementRender(scheduleObj, oldIndexDate, costValue);
}
}
}
}
}
onElementRender(scheduleObj: ScheduleComponent, oldIndexDate: Date, costValue: number) {
let index: number = scheduleObj.getIndexOfDate(scheduleObj.activeView.renderDates, oldIndexDate);
let target: HTMLElement = scheduleObj.element.querySelectorAll('.e-work-cells')[index] as HTMLElement;
if (target.querySelectorAll('total-cost-wrapper').length == 0) {
let costWrapper: HTMLElement = createElement('div', { className: 'total-cost-wrapper' });
let costElement: HTMLElement = createElement('div', { className: 'total-cost' });
costElement.innerHTML = "Total: " + costValue.toString() + "$";
costWrapper.appendChild(costElement);
target.appendChild(costWrapper);
} else {
let costElement: HTMLElement = target.querySelector('total-cost-wrapper');
costElement.innerHTML = "Total: " + costValue.toString() + "$";
}
}
}
|
Kindly try with the above sample and let us know if you need any further assistance on this.
Regards,
M. Vinitha devi.
SIGN IN To post a reply.
