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. Image for the cookie policy date

Schedule views disappearance

Hello,


I would like to layout a view containing a schedule and a div aside. I am not using bootstrap so I tried with flexbox or Angular Material Grid List. The issue is the same: when applying these styles, the scheduler views buttons disappear when clicking on it. I noticed that when adding bootstrap, the issue no longer persists. 


Do I have to use bootstrap to layout views containing a schedule?


See an example below forked from schedule resources demo:

https://stackblitz.com/edit/angular-h2gbjz?file=app.component.html,app.component.css,index.html


I hope my question is clear.

Thanks for your response!


1 Reply 1 reply marked as answer

RV Ravikumar Venkatesan Syncfusion Team November 3, 2022 09:39 AM

In your shared sample, you have rendered the Schedule inside multiple div elements and set the display flex to the top div element. Due to the initial rendering of the Schedule, the Toolbar was unable to get the full width of the page. Because of that, your reported problem occurs. You can resolve it by setting up the width of the div element that contains the Schedule, as shown in the below snippet.


Sample: https://stackblitz.com/edit/ej2-angular-schedule-toolbar-views-moved-to-popup-mode?file=app.component.html


[app.component.html]

<div class="page-container">

  <div class="schedule-container">

    <div class="content-wrapper">

      <ejs-schedule #scheduleObj cssClass="schedule-resource" width="100%" height="650px" [selectedDate]="selectedDate"

        [eventSettings]="eventSettings">

        <e-resources>

          <e-resource field="OwnerId" title="Owners" [dataSource]="resourceDataSource" [allowMultiple]="allowMultiple"

            name="Owners" textField="OwnerText" idField="OwnerId" colorField="Color">

          </e-resource>

        </e-resources>

      </ejs-schedule>

    </div>

  </div>

</div>


[app.component.css]

.page-container {

  displayflex;

}

 

.schedule-container {

  width100%;

}


 If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon