Timeline Grouping

[Vinayak]

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

[Balasubramanian Sattanathan]

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>); 

} 

 

 

UG         : https://ej2.syncfusion.com/react/documentation/schedule/resources/#simple-resource-header-customization 

Sample : https://stackblitz.com/edit/react-fnwtze?file=index.js 

 

Kindly try the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Balasubramanian S 

[Vinayak]

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).

[Balasubramanian Sattanathan]

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; 

} 

 

Sample : https://stackblitz.com/edit/react-fnwtze-3cnxn4?file=index.js 

 

Q3 : How can we show multiple timezone in single scheduler 

 

https://ej2.syncfusion.com/react/demos/#/material/schedule/timezone 

https://ej2.syncfusion.com/react/documentation/schedule/timezone/ 

 

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. 

 

https://www.syncfusion.com/feedback/10666/setworkhours-method-is-not-working-properly-for-resources  

 

We would appreciate your valuable patience until then 

 

Regards, 

Balasubramanian S

[Vinayak]

Aplology.

Here is an attachment of required functionality for Q1.

Attachment: addmeeting_69f142bf.zip

[Vinayak]

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

[Vinayak]

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

[Vinitha Devi Murugan]

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. 

  

https://stackblitz.com/edit/react-7ya8fd-s3grba?file=index.js  

 

Q2: We have prepared the below sample to display the different timezone time with it’s name using majorSlotTemplate option.  

  

https://stackblitz.com/edit/react-jb6c65?file=index.js  

  

Kindly try with the above sample and let us know, if you need any further assistance on this.  

 

Regards,   

M.Vinitha devi