Grouped events without hours

[chevron]

Hello,

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

[Karthigeyan Krishnamurthi]

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. 

https://stackblitz.com/edit/angular-d2kwqa-4m25hy?file=app.component.html 

 

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 

[chevron]

Thanks a lot for your answer !

[Karthigeyan Krishnamurthi]

Most welcome 😊