We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grouped events without hours


I'd like to know how is it possible and how i could have a mode of  "grouped events" on the day without displaying hours. 

I want to display all the events in a day without displaying the hours, like an agenda but displayed by line and by ressource. And also show duration on the day in order to display the ocupation of the day. (ex. 3h on 8h of working time).

something like that: (see attached file).

Thanks by advance.

Attachment: calendarModeColine_92b9277a.7z

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team June 19, 2019 11:29 AM UTC

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. 

CH chevron June 19, 2019 01:22 PM UTC

Thanks a lot for your answer !

KK Karthigeyan Krishnamurthi Syncfusion Team June 20, 2019 03:13 AM UTC

Most welcome 😊 

Live Chat Icon For mobile
Up arrow icon