Schedule event width doesnt descrease when days cells decrease

[Arrash Nekonam]

I am using the scheduler and have came across an issue with the event widths expanding outside the day cells (see screenshot). I have a sidenav using angular material and when on hover will expand the sidenav width and decrease the width of the content on the page which means the scheduler will decrease in size but the event width size seems to stay the same. How can I fix this? I have attached my html, ts and scss files. Thanks!

Attachment: syncfusionschedule_51cfd0dd.zip

[Swathi Ravi]

Hi  Arrash,

You can resolve this issue by using the Scheduler's refreshEvents method in the mouseenter and mouseleave event of sidebar, as demonstrated in the below shared snippet.

[app.component.html]

 <ejs-schedule #schedule width="100%" height="500px" [eventSettings]="eventSettings" cssClass="schedule-event-template"

        [timeScale]="timeScaleOptions" [rowAutoHeight]="true" [selectedDate]="selecteddate">

 </ejs-schedule>

[app.component.ts]

  @ViewChild('schedule') public schedule: ScheduleComponent;

expandSidenav() {

    this.schedule.refresh();

    console.log(this.sidenav);

    if (!this.pinned) {

      this.isExpanded = true;

      this.showPin = true;

      this.sidenavWidth = '180px';

    }

  }

  collapseSidenav() {

    this.schedule.refresh();

    if (!this.pinned) {

      this.isExpanded = false;

      this.showPin = false;

      this.sidenavWidth = '65px';

    }

  }

Sample: ej2-angular-schedule- sidebar (forked) - StackBlitz

Output:

Regards,

Swathi Ravi