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

Timeline Grouping

I want to customize some features in Timeline Grouping. 
For example: 
Can I add one or more extra columns after first column and before timeline starts where I can place event based icons on click of which I should be able to set some state



7 Replies

BS Balasubramanian Sattanathan Syncfusion Team December 5, 2019 01:54 PM UTC

Hi Vinayak, 
 
Greetings from Syncfusion Support. 
 
We have validated your requirement and prepared sample using resourceHeaderTemplate property like below code snippet. And also Kindly refer the below UG for more details 
 
resourceHeaderTemplate(props) { 
    return (<div className="template-wrap"> 
      <div className="room-name">{this.getRoomName(props)}</div> 
      <div className="room-type">{this.getRoomType(props)}</div> 
      <div className="room-capacity" onClick={this.onItemClick}>{this.getRoomCapacity(props)}</div> 
    </div>); 
} 
 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Balasubramanian S 



VI Vinayak December 9, 2019 02:04 PM UTC

Hi Balasubramanian,

Thanks for your reply.

1. As per your solution, the icons I placed in resourceHeaderTemplate replacing my header text. Please find attached image of my requirement.
2. Need to change the work hour highlighted color.
3. How can we show multiple timezones in single scheduler
4. setWorkHours doesn't work with grouping in ScheduleComponent When I remove group, new work hours gets set in scheduler (Timeline Grouping).



BS Balasubramanian Sattanathan Syncfusion Team December 10, 2019 11:43 AM UTC

Hi Vinayak, 
 
Thanks for the update. 
 
Q1 : As per your solution, the icons I placed in resourceHeaderTemplate replacing my header text. Please find attached image of my requirement. 
 
We didn’t get any images in your update. Could you please share the image again ? or Share more details of your requirement. 
 
Q2 : Need to change the work hour highlighted color. 
 
We can change the work hours highlighted color by using below CSS. And also we prepared sample that can be viewed by using below link. 
.timeline-resource.e-schedule .e-timeline-view .e-work-hours { 
  background-color: #ffccc6 !important; 
} 
 
 
Q3 : How can we show multiple timezone in single scheduler 
 
 
Q4 : setWorkHours doesn't work with grouping in ScheduleComponent When I remove group, new work hours gets set in scheduler (Timeline Grouping). 
 
We have checked your reported scenario at our end and we could reproduce your reported problem. So we logged the below bug report and fix will be included in our upcoming Volume 4 SP release which is expected to roll out by end of December 2019. 
 
 
We would appreciate your valuable patience until then 
 
Regards, 
Balasubramanian S


VI Vinayak December 11, 2019 09:39 AM UTC

Aplology.
Here is an attachment of required functionality for Q1.

Attachment: addmeeting_69f142bf.zip


VI Vinayak December 11, 2019 09:42 AM UTC

Q3 : How can we show multiple timezone in single scheduler 

Normaly scheduler shows single timezone. But before that default timezone, I want to show other timezones for time reference for that perticular zone.
Please find attached image for better understanding.

Attachment: multiple_timezones_880c3206.zip


VI Vinayak December 11, 2019 10:24 AM UTC

I want to show selected time duration of meeting in scheduler...just to highlight that duration.

Suppose I have set time of meeting as 3 PM to 5 PM and now I want to choose the attendee and meeting room and need to highlight that time duration on scheduler with red line, how can I achieve that.

Please refer the image attachment.


Attachment: timeline_highlight_7a0b7abb.zip


VD Vinitha Devi Murugan Syncfusion Team December 12, 2019 12:36 PM UTC

Hi Vinayak, 
 
Thanks for your update 
 
Q1:  Based on your shred requirement, we have added the text(icons) only on the first resource. Please refer below sample. 
  
 
Q2: We have prepared the below sample to display the different timezone time with it’s name using majorSlotTemplate option.  
  
  
Kindly try with the above sample and let us know, if you need any further assistance on this.  
 
Regards,   
M.Vinitha devi 


Loader.
Live Chat Icon For mobile
Up arrow icon