Custom navigation interval in Scheduler

[Luca Filip]

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:

https://www.syncfusion.com/forums/141889/navigate-to-custom-date

As a possible solution given there, it is this example:

https://ej2.syncfusion.com/angular/demos/?_ga=2.99379548.350785391.1569222703-1409265024.1568218583#/material/schedule/timeline

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]

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: 

[selectedDate]="selectedDate"

In the .ts component I have:

@ViewChild("detailedSchedule")
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]

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:

(dataBound)="dataBoundFn($event)"

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));
  nextBtn.append(nextSpan);
  nextDiv.append(nextBtn);

  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));
  prevBtn.append(prevSpan);
  prevDiv.append(prevBtn);
  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]

 

Hi Luca, 

 

Syncfusion Greetings. 

 

Q1: We simplified your code by using actionBegin event of the scheduler. Please try the below sample. 

 

https://stackblitz.com/edit/angular-vkzsgc-a6dcai?file=app.component.html 

 

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.  

https://www.syncfusion.com/feedback/8542/scroll-not-work-properly-in-timelinemonth-view   

 

 

Regards, 

M.Vinitha devi. 

[Luca Filip]

Thank you for the response!

[Vinitha Devi Murugan]

Hi Luca, 

You are most welcome :) 

Regards, 

M.Vinitha devi