Remove the three dots in scheduler header (responsiveness of the header)

[Hamid Akhtar]

My scheduler ​header has the following properties(Days, week ..etc ). I want it to appear as it is, but it turns into three dots (Nav bar) with screen size. How to keep the header static? Also how to change background color of header dynamically?

[Vinitha Devi Murugan]

Hi Hamid, 

 

Greetings from Syncfusion Support. 

 

We have validated your reported query “Remove the three dots in header and change the background color of toolbar ” and let you know that the scheduler header become responsive based on screen size. We have achieved your requirement by using created event of our scheduler by making the header as scrollable if the space to render the items are unavailable instead of showing it in popup mode. We have prepared a sample for the same and change the background color which can be referred from the following link. 

 

Sample: https://stackblitz.com/edit/angular-scheduler-header-bar-customization?file=app.component.css  

 

.e-schedule .e-schedule-toolbar .e-toolbar-items { 

  background: #91c09e; 

} 

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn { 

  background: #91c09e; 

} 

 

.e-hscroll .e-scroll-nav { 

  background: #91c09e; 

} 

 

 

  onCreated(args) { 

    document.querySelector( 

      '.e-schedule-toolbar' 

    ).ej2_instances[0].overflowMode = 'Scrollable'; 

  } 

 

Kindly try with the above sample and get back to us if you need any further assistance 

 

Regards, 

Vinitha 

[Hamid Akhtar]

it's not working in my app because of this.
I think it's for .Net

[Vinitha Devi Murugan]

Hi Hamid, 

 

Thanks for your update.  

  

We have validated your reported query and suggest you to use below typecasting in created event to overcome the issue. 

  

import { EJ2Instance } from '@syncfusion/ej2-angular-schedule'; 

  onCreated(args) { 

    (document.querySelector('.e-schedule-toolbar') as EJ2Instance).ej2_instances[0].overflowMode = 'Scrollable'; 

  } 

 

If you are using resources in your scheduler, we suggest you to use dataBound event instead of created event like below sample to remove three dots . Because in resource sample, promise will be resolved slower compared to default sample.  

 

Sample with resource: https://stackblitz.com/edit/angular-header-bar-customization-for-resource-sample?file=app.component.ts  

 

(dataBound)='onDataBound($event)' 

 

  onDataBound(args) { 

    if (this.flag) { 

      (document.querySelector('.e-schedule-toolbar') as EJ2Instance).ej2_instances[0].overflowMode = 'Scrollable'; 

      this.flag = false; 

    } 

  } 

 

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

  

Regards, 

Vinitha 

[Hamid Akhtar]

Awesome!!
It worked for me.
Thankyou so much Team syncfusion. 

[Satheesh Kumar Balasubramanian]

Hi Hamid,

You are most welcome..! We are glad that our provided solution worked at your end. Please get back to us if you need any further assistance.

Regards,

Satheesh Kumar B