Hi Chevron,
Syncfusion greetings.
We have prepared the below sample to display only hour and minute in event element. It is not possible to display the empty time in cell as shown in the image, alternatively we displayed the empty time for each resource.
eventRendered(args) {
let totalEvents = this.scheduleObj.eventsData;
let proxy = this.scheduleObj;
var dm = new DataManager({ json: totalEvents });
let resources = this.scheduleObj.resources[1].dataSource;
var dates = this.scheduleObj.getCurrentViewDates();
(resources as any).forEach(function (resource) {
var datasource = dm.executeLocal(
new Query().where("TaskId", "equal", resource.id)
);
dates.forEach(function (date) {
var hours = 0;
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)));
console.log(startDate); console.log(endDate)
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(resource.id).innerHTML = "Empty Time: " + (8 - hours);
});
});
}
onActionBegin(args: ActionEventArgs): void {
if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') {
let data: { [key: string]: Object } = (args.requestType === 'eventCreate') ? args.data[0] : args.data as { [key: string]: Object };
let groupIndex: number = this.scheduleObj.eventBase.getGroupIndexFromEvent(data);
if (!this.scheduleObj.isSlotAvailable(data.StartTime as Date, data.EndTime as Date, groupIndex as number)) {
args.cancel = true;
}
}
}
Note: Above customization will be applicable only for Day/Timeline Day view and in above sample no two events can be created with colliding time range.
Regards,
Karthi
