Scheduler Header Misalignment and view

[Vincent]

Hi there, 

I currently am trying to view a week timeline with interval set to 2,

I have a cell template that changes the width to 200px, when the time line is empty the header rows are misaligned, they are fine if there is some data in there, can you please help.

Also I was wondering is there any way to display a only 2 weeks in the Month view as I am looking for a view where I can show 2 weeks only and that wraps upon each week.

Thanks very much in advance for your help on this. :)

[Ravikumar Venkatesan]

Hi Vincent, 

Greetings from Syncfusion support. 

I have a cell template that changes the width to 200px, when the timeline is empty the header rows are misaligned 

We have validated your above query at our end and based on your query we suspect that you need to increase the width of the Schedule cells and achieved it with the help of the below CSS style. 

[app.component.css] 

.e-schedule .e-timeline-view .e-content-wrap table col { 

  width: 200px; 

} 

I was wondering is there any way to display only 2 weeks in the Month view 

We have validated your above query at our end and we suspect that your requirement is timeline month view with the two weeks interval. But, we regret to let you know this requirement is not possible with the current Schedule architecture for the same we have logged feature feedback at our end, and this feature is implemented in any of our upcoming releases. Meantime we suggest you set the timeScale property of the Schedule to false with the interval of 2 with the timeline week view as shown below. 

Feedback: https://www.syncfusion.com/feedback/5075/custom-view-support-on-scheduler-with-user-defined-date-range-for-angular 

[app.component.html] 

    <ejs-schedule #scheduleObj width="100%"  [timeScale]="timeScale" selectedDate]="selectedDate" [group]="group" [eventSettings]="eventSettings"> 

      <e-views> 

        <e-view option="TimelineWeek" [interval]="2"></e-view> 

      </e-views> 

    </ejs-schedule> 

[app.component.ts] 

export class AppComponent { 

  public timeScale: TimeScaleModel = { enable: false  }; 

} 

For all your queries we have prepared a sample that can be available from the below link. 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-timeine-view-cell-width-customizati-qytjaq?file=app.component.ts 

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

UG(Cell dimension): https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization/#setting-cell-dimensions-in-all-views 

UG(Hide timescale): https://ej2.syncfusion.com/angular/documentation/schedule/timescale/#hide-the-timescale 

Regards, 

Ravikumar Venkatesan