ScheduleComponent - renders as shrinked

[Vinayak]

I am using ScheduleComponent. 

When render with pre-populated appointments, the timeline shrinks. But when any state changes on any event it looks fine.

Please have a look at attachment.

Attachment: SyncfusionQueries_5f969f4b.zip

[Vengatesh Maniraj]

Hi Vinayak, 

Greetings from Syncfusion Support. 

We have validated the reported scenario at our end and we suspect the cause is occurs due to header time slot update. We suggest you to override the timeline slot’s width manually to overcome this problem like below, 

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col { 

    width: 60px; 

} 

Sample: https://stackblitz.com/edit/react-ejcazw?file=index.css 

Kindly try the above and revert us for further assistance. 

Regards, 

Vengatesh 

[Vinayak]

Hi Vengatesh,

I tried your css class, but it is not working.

Attaching view and code for your reference.

Attachment: Shrink_view_with_code_9a5980fa.zip

[Vengatesh Maniraj]

Hi Vinayak, 

Thanks for the update. 

In our last updated, we have provided the solution for Schedule layout which had rendered on DOM directly and there was no parent element for Schedule. We have checked your shared images at our end and we suspect that you have rendered the scheduler inside the Dialog. So that the provided CSS is not applied properly to the Scheduler at Dialog opening stage. So we suggest you to provide the proper root class for overriding CSS or else refresh the Schedule control once the Dialog has opened. Kindly try this at your end and still the issue persist please share your dialog codes to serve you better. 

Regards, 

Vengatesh. 

[Vinayak]

Hi Vengatesh,

Attaching class file of component and images for reference.

PFA

Attachment: Shrink_scheduler_issue_2f278c1a.zip

[Vengatesh Maniraj]

Hi Vinayak, 

Thanks for the update. 

We have checked the shared files and images at our end and we suspect that the provided CSS is not applied properly. Based on the provided details we have prepared the below sample and its working fine. So we suggest you to refresh the Schedule control once the meetingResource component got opened by making use of scheduleObj.refresh() or else use the proper CSS root class for below mentioned CSS classes. 

Sample: https://stackblitz.com/edit/react-q44zdo-trbej5?file=index.css 

CSS:  

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col, 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col, 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col { 

    width: 80px; 

} 

 

Output:
 

Kindly check the above and revert us for further assistance. 

Regards, 

Vengatesh.