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.

5 Replies

LF Luca Filip September 26, 2019 02:48 AM

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 05:48 AM

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 08:52 AM

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 09:22 AM

Thank you for the response!

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

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

Live Chat Icon For mobile
Up arrow icon