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 

[Joseph Hanna]

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?

[Venkateshwaran Saravanakumar]

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.

[app.component.ts]

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.selectedDate, 7) : 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);      }   
} 
} 

Regards,
Venkatesh