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

Custom navigation interval in Scheduler

I'm working with Appointments.
What I'm trying to achieve is the following:
  • have the ~TimelineMonth view (to see 4-5 calendar weeks in the viewport)
  • but on navigation, I want to move forward or backward in the timeline with a 1-week interval

Ex: See the calendar weeks of month August [31,32,33,34,35] and upon clicking the button next on the navigation, shift the calendar weeks to [32,33,34,35,36], so on..
I'm working on a POC and this is a must, can this be achieved?
What I thought of is: set the interval of TimelineWeek to 52 and on (navigation)=fn($event) cancel the event: args.cancel = true and make some logic to move the scroll position. But this logic seems a bit cumbersome and I want to know if there is a better way to achieve this.
Thank you!

P.S. I searched the forums and I think I found someone asking something similar:
As a possible solution given there, it is this example:
But another problem for me is that I want to use the TimelineMonth view and when I change to a custom date, the horizontal scroll always stays in position 0, is there a way to move the scroll to the selected date? Any help would be appreciated.

7 Replies

LF Luca Filip September 26, 2019 07:48 AM UTC

For anyone looking to achieve something similar, I'll post my way 
I will not use the default navigation in the scheduler header (I'm still looking if I can overwrite the default behavior)
First I changed the view to TimelineWeek:
<e-view option='TimelineWeek' [interval]="4">
I'm creating 2 new navigation buttons: 
<button (click)="clickNext()">button>
<button (click)="clickPrev()">button>
In the .html file I have set on schedule: 
In the .ts component I have:
public detailedSchedule: ScheduleComponent;
public selectedDate: Date = new Date(2018, 7, 4);
And the methods for my buttons are:
clickNext() {
this.selectedDate = this.detailedSchedule.timelineViewsModule.renderDates[7];

clickPrev() {
const prevDate = new Date(this.detailedSchedule.timelineViewsModule.renderDates[0]) - 1;
this.selectedDate = new Date(prevDate);
So far it seems to work...
If this code can be improved, feel free to contribute

LF Luca Filip September 26, 2019 10:48 AM UTC

For now, I decided to do something that I don't really like but at least it's working as I need it.
I decided to remove the custom buttons from .html:
<button (click)="clickNext()">button>
<button (click)="clickPrev()">button>
And on data bound change html elements:
dataBoundFn(event: object) {
$(".detailedSchedule .e-toolbar-item.e-prev.e-tbtn-align.e-overflow-show").remove();
$(".detailedSchedule .e-toolbar-item.e-next.e-tbtn-align.e-overflow-show").remove();

const nextDiv = $(`<div class="e-toolbar-item e-next e-tbtn-align e-overflow-show" aria-disabled="false" aria-label="next period" title="Next"></div>`);
const nextBtn = $(`<button class="e-tbar-btn e-control e-btn e-lib e-icon-btn" type="button" tabindex="-1" style="width: auto;" title="Next"></button>`);
const nextSpan = $(`<span class="e-btn-icon e-icon-next e-icons"></span>`);
nextBtn[0].addEventListener("click", this.clickNext.bind(this));

const prevDiv = $(`<div class="e-toolbar-item e-prev e-tbtn-align e-overflow-show" aria-disabled="false" aria-label="previous period" title="Previous"></div>`);
const prevBtn = $(`<button class="e-tbar-btn e-control e-btn e-lib e-icon-btn" type="button" tabindex="-1" style="width: auto;" title="Previous"></button>`);
const prevSpan = $(`<span class="e-btn-icon e-icon-prev e-icons"></span>`);
prevBtn[0].addEventListener("click", this.clickPrev.bind(this));
if (!$(".detailedSchedule .e-toolbar-item.e-next.e-tbtn-align.e-overflow-show").length) {
$(".detailedSchedule .e-toolbar-left").prepend(nextDiv);
if (!$(".detailedSchedule .e-toolbar-item.e-prev.e-tbtn-align.e-overflow-show").length) {
$(".detailedSchedule .e-toolbar-left").prepend(prevDiv);

VD Vinitha Devi Murugan Syncfusion Team September 26, 2019 01:52 PM UTC

Hi Luca, 
Syncfusion Greetings. 
Q1: We simplified your code by using actionBegin event of the scheduler. Please try the below sample. 
Q2: We have already logged bug report for the issue of “scroll bar not moving to visualize the today” and fix will be included in our upcoming Volume 3 release which is expected to roll out by October first week.We would appreciate your valuable patience until then.  
M.Vinitha devi. 

LF Luca Filip September 26, 2019 02:22 PM UTC

Thank you for the response!

VD Vinitha Devi Murugan Syncfusion Team September 27, 2019 10:52 AM UTC

Hi Luca, 
You are most welcome :) 
M.Vinitha devi 

JH Joseph Hanna July 14, 2023 03:40 AM UTC

I know this is an old thread, there still doesn't seem to be a native way of handling this. 

Although it is a solid workaround, with all due respect to the excellent effort put in by Luca, it does feel a little hacky because it is not a smooth user experience - especially when you click "Next" period in Agenda View and you can see the native date range shown and then a split second later, the newly calculated date range.

Could you please provide a "Navigation Interval" for each view type so the ranges can be different depending on the view?

VS Venkateshwaran Saravanakumar Syncfusion Team July 14, 2023 04:33 PM UTC

Hi Joseph,

Sample: https://stackblitz.com/edit/angular-vkzsgc-9t3zzb?file=package.json,app.component.html,app.component.ts,app%2Fapp.module.ts

To resolve the issue check whether args.event is present within the onActionBegin method. If it is, set args.cancel=true. Additionally, you can use the

 getCurrentViewDates method to retrieve the rendered dates. To add additional days, utilize the addDays method, as shown in the highlighted code snippet below. Refer to the modified sample provided above.


onActionBegin(args) { if (args.requestType == 'dateNavigate' && args.event) {     
args.cancel = true;     
if (args.event.target.classList.contains('e-icon-next')) {        this.selectedDate = this.detailedSchedule.currentView === 'Agenda' ? addDays(this.selectedDate7) : this.detailedSchedule.getCurrentViewDates()[this.timelineInterval];      } 

else {       
const prevDate = new Date(this.detailedSchedule.timelineViewsModule.renderDates[0]) as any - 1;        this.selectedDate = this.detailedSchedule.currentView === 'Agenda' ? addDays(this.selectedDate, -7) : new Date(prevDate);      }   


Live Chat Icon For mobile
Up arrow icon