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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grouped events without hours

Thread ID:





145317 Jun 17,2019 01:53 PM UTC Jun 20,2019 03:13 AM UTC Angular - EJ 2 3
Tags: Schedule
Asked On June 17, 2019 01:53 PM UTC


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 [Syncfusion]
Replied On 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. 

Replied On June 19, 2019 01:22 PM UTC

Thanks a lot for your answer !

Karthigeyan Krishnamurthi [Syncfusion]
Replied On June 20, 2019 03:13 AM UTC

Most welcome 😊 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon