Create custom date skip button on the footer of scheduler

[Nithin]

Hi,
I'm trying to implement a custom date skip button on footer of the scheduler.

My requirement is something like this (the below image "required_skip_button.png").

What I need next is a button with single arrow which skips only one day per click . The current button which is implemented by default in the scheduler skips the number of days which is already displayed in my case it skips 7 days and also the that double arrow button implementation is affecting event arrows also is there way to avoid this also?

Is there a way to implement this functionality?

I have a Working example

[Tyler]

My suggestion for this... It looks like what you are doing is just placing the header below the scheduler over the footer... This isn't great, as the top offset is hardcoded to certain pixels.

 

Instead, set the footer to false so it doesn't display on the scheduler, and create your own html footer with the buttons you need that will be right under the scheduler, so this will be detached from the scheduler. You can style it how you like to make it match the scheduler styles or whatever.

 

Then, attach button click events to them and perform the correct action. If the 'next' button is clicked, trigger the scheduler navigate event with the 'next' action and same for previous but with the 'previous action. And Today is the same but with the 'today' action. I haven't tested if this will make the scheduler navigate correctly, but that would be ideal.

If it does not, on button click, set the date of the scheduler to the next date of the view you are going to navigate to. So in the week view of April 1st to April 7th, you'd do: scheduler.date(04/08/2018T00:00:000Z); and it will navigate to that next week. You will of course have to calculate the next view dates.

 

I also don't understand your desire to only move one day when you are in a week long view that shows 7 days... You cannot do that. If you try to set the date to April 2nd, but are looking at April 1st to April 7th, the scheduler won't change. That can only be done in Day view.

You may be able to achieve something like this in some customly built view, but that doesn't seem worth it.

[Veselin Tsvetanov]

Hello Nithin,

I would agree with Tyler and would recommend you to completely remove both the header and the footer and create your own footer containing the required buttons. Here you could find a modified version of the Dojo, which implements the navigation functionality. You will notice, that the $scope.skip() function uses the Scheduler.date() method to change the start date of the view:

$scope.skip = function(days) {
  var scheduler = $scope.scheduler;
  var currentDate = scheduler.date();
  currentDate.setDate(currentDate.getDate() + days);
  scheduler.date(currentDate);
}

Regards,
Veselin Tsvetanov
Progress Telerik