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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom navigation interval in Scheduler

Thread ID:





147832 Sep 25,2019 10:49 AM UTC Sep 27,2019 10:52 AM UTC Angular - EJ 2 5
Tags: Schedule
Luca Filip
Asked On September 25, 2019 11:33 AM UTC

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.

Luca Filip
Replied On 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

Luca Filip
Replied On 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);

Vinitha Devi Murugan [Syncfusion]
Replied On 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. 

Luca Filip
Replied On September 26, 2019 02:22 PM UTC

Thank you for the response!

Vinitha Devi Murugan [Syncfusion]
Replied On September 27, 2019 10:52 AM UTC

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon