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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ScheduleComponent - renders as shrinked

Thread ID:

Created:

Updated:

Platform:

Replies:

150566 Jan 11,2020 10:51 AM UTC Feb 7,2020 08:39 AM UTC React - EJ 2 5
loading
Tags: Schedule
Vinayak
Asked On January 11, 2020 10:51 AM UTC

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 [Syncfusion]
Replied On January 13, 2020 07:09 AM UTC

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


Kindly try the above and revert us for further assistance. 

Regards, 
Vengatesh 


Vinayak
Replied On February 5, 2020 05:51 AM UTC

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 [Syncfusion]
Replied On February 6, 2020 05:49 AM UTC

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
Replied On February 6, 2020 12:43 PM UTC

Hi Vengatesh,

Attaching class file of component and images for reference.
PFA

Attachment: Shrink_scheduler_issue_2f278c1a.zip

Vengatesh Maniraj [Syncfusion]
Replied On February 7, 2020 08:39 AM UTC

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. 


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. 


CONFIRMATION

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