Refresh scheduler layout without refreshing data

[Luis]

Scheduler component has 100% height and width (same as parent component) and when resizing browser windows, the scheduler doesn't refresh the component layout and scroll get short, not allowing to reach late day events (farther 19 hours). This is fixed using refresh() but means requesting loadData endpoint again (excesive) and killing the component state (i.e. creation modal will close and lose date).

How can we refresh just the layout component without a complete refresh of data?

GIF: https://drive.google.com/file/d/1c1m7MmyrmuWtubXudtjaoAoOuc3T766H/view

Thanks in advance.

[Ravikumar Venkatesan]

Hi Luis, 

Greetings from Syncfusion support. 

We have validated your reported problem at our end and regret to let you know that currently, we were unable to refresh the Schedule layout alone. The Schedule will automatically adjusted its layout based on the browser window with our current architecture. So, could you kindly share the below details to serve you better? 

• Share the full Schedule rendering code that replicates the problem or
• Reproducing the problem in the below-shared sample or
• Share a sample that illustrates the problem.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-default-schedule-sample?file=app.component.html 

Also we have already feature request to provide a method to refresh the layout of the scheduler alone, which will be implemented in any of our upcoming releases. You can track the status, provide any specifications (if any), add your votes through the following feedback link. 

https://www.syncfusion.com/feedback/7734/option-to-provide-public-method-for-refreshing-schedule-layout-alone 

Regards, 

Ravikumar Venkatesan 

[Benjamin]

Hi! this is a really issue, because if initially the window has 900px x 900px the editor calculate dimensions (initially), then if we resize the window, the dimensions of the editor is not recalculated and we can see issues like cant input data or close editor (in the attached gif you can see the bad behaviour). Behaviour can be replicated on attached link to Stackblitz.

Attachment: needrefresh_f9fed485.zip

[Hareesh Balasubramanian]

Hi Benjamin, 

Thanks for the update. 

We can replicate your reported problem “editor window Is not responsive while resizing the browser window” which can be overcome by refreshing the editor window of our scheduler on browser resize. And for the same, we have prepared a sample which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-sample-wewe-zlrm2p?file=app.component.ts 

  constructor() { 

    window.onresize = () => { 

      this.schedule.eventWindow.refresh(); 

    }; 

  } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 

Hareesh 

[Benjamin]

Thanks you Hareesh, works fine refresh method of eventWindow but when we resize window the editor has been destroyed and the data is lost, i know exist a workaround saving the last active data event and open the editor again but exist other better method?

Regards

[Benjamin]

Hi again Hareesh, I'm afraid that we dont provide all context of the issue:

Actually we have scrolling only in the body of scheduler (we dont want that at scroll it lost scheduler header like dates, days and navigation bar), and in the provided stackblitz the header of scheduler is lost at scrolling a late hour. So, we change a little bit the provided example to see the behaviour that we want prevent (https://stackblitz.com/edit/angular-customized-sample-wewe-d1v7zc?file=app.component.html).

You can see in the Stackblitz that scheduler has height of 500px, by this way we can scroll only in the body of the scheduler (we want this). Then you can resize the console of stackblitz to change the window size of the scheduler, here you can see that we cant arrive to later hours, and has two scrolls (not very usefull to user).

Exist a method to refresh height of scrollbar? because is not being recalculated

 

Attachment: needrefresh2_349363ce.zip

[Hareesh Balasubramanian]

Hi Benjamin, 

Thanks for the update. 

We have modified our previously updated sample based on your shared queries, which can be viewed from the following link, 

https://stackblitz.com/edit/angular-customized-sample-wewe-zlrm2p?file=app.component.ts 

Q1: works fine refresh method of eventWindow but when we resize the window the editor has been destroyed and the data is lost, i know to exist a workaround saving the last active data event and open the editor again but exist other better method? 

The above query can be overcome by adjusting the editor window height dynamically based on the browser resizing event. 

  constructor() { 

    window.onresize = () => { 

      (document.querySelector('.e-schedule-dialog') as any).style.height = 

        (window.innerHeight - 100).toString() + 'px'; 

    }; 

  } 

Note: Based on the window min and max height the editor window will adjust and it can be customized like the below snippets. 

.e-schedule-dialog { 

  min-height: 200px !important; 

  max-height: 500px !important; 

} 

Q2: You can see in the Stackblitz that the scheduler has a height of 500px, by this way we can scroll only in the body of the scheduler (we want this). Then you can resize the console of stackblitz to change the window size of the scheduler, here you can see that we cant arrive in later hours, and has two scrolls (not very useful to the user). 

This query can be overcome by setting “auto” as a height property for the scheduler. 

  <ejs-schedule #schedule width="100%" height="auto" [selectedDate]="selectedDate" [eventSettings]="eventSettings" 

    [(currentView)]="currentView" (eventRendered)="oneventRendered($event)"> 

  </ejs-schedule> 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Benjamin]

Hareesh, thanks for you help, Q1 helped me but Q2 cant be solved, if you note in the Stackblitz when we add property height = auto, and we set a height in pixels to parent container the scheduler doesn't respect this and is overflowed.

Reading the docs, i found this: "In case, if auto value is set, then the height of the Schedule gets auto-adjusted within the given container.", but this doesn't happen, 

As an example: 

```

<div class="control-section" style="height: 300px;">

  <ejs-schedule #schedule width="100%" height="auto" [selectedDate]="selectedDate" [eventSettings]="eventSettings"

    [(currentView)]="currentView" (eventRendered)="oneventRendered($event)">

  </ejs-schedule>

</div>

```

Regards

[Hareesh Balasubramanian]

Hi Benjamin, 

Thanks for the update. 

We can able to replicate your reported issue at our end and for that we have modified our previously updated sample based on your shared snippets using CSS, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-sample-wewe-v3p3gf?file=app.component.html  

<div class="control-section" style="height: 300px;overflow: auto;"> 

  <ejs-schedule #schedule width="100%" height="auto" [selectedDate]="selectedDate" [eventSettings]="eventSettings" 

    [(currentView)]="currentView" (eventRendered)="oneventRendered($event)"> 

  </ejs-schedule> 

</div> 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 

Hareesh 

[Benjamin]

Hi again Hareesh and thank you for the response, last answer doesn't help me out, is lost a very important detail: i want only scroll on body table of scheduler (i dont want to hide navigation bar at scrolling...), I attach a gif of actual behaviour in my implementation:

You can see that internal scrollbar doesn't update size at schedule resize.

Regards!!

 

Attachment: scrollbehaviour_9b52838.zip

[Hareesh Balasubramanian]

Hi Benjamin, 

Thanks for the update. 

We have modified our previously updated sample based on your shared video “need to dynamically set the scheduler’s outer div element fit to the browser height while it has been resized” using resize browser event, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-sample-wewe-yhjo7w?file=app.component.ts 

  public myInnerHeight = window.innerHeight - 20; 

  constructor() { 

    window.onresize = () => { 

      (document.querySelector('.e-schedule-dialog') as any).style.height = 

        (window.innerHeight - 100).toString() + 'px'; 

      this.myInnerHeight = window.innerHeight - 20; 

    }; 

  } 

Kindly try the above solution and if the issue persists still share the below details to validate your reported issue and serve better. 

• Confirm whether the above sample is working properly at your end?
• If possible, replicate the issue in the above sample.
• Share the issue replicating sample (if possible) to validate further at our end.

  

We will be happy to assist you..! 

  

Regards, 

Hareesh