This is a migrated thread and some comments may be shown as answers.

Customize the hours display in scheduler (jquery)

4 Answers 703 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Simsim
Top achievements
Rank 1
Simsim asked on 30 Jan 2018, 11:33 AM

Hello,

I would like to customize the hours display as follows:

9H
11H
14H
16H
18H
18H30
19H

My Code:

 

$("#schedulerQ").kendoScheduler({
date: new Date('28/01/2018 09:00'),
startTime: new Date(),
views: [{ type: "week", 
dateHeaderTemplate: kendo.template("<span class='days-name'>#=kendo.toString(date, 'dddd dd/MM')#</span>")}],
minorTickCount: 1, // display one time slot per major tick
majorTick: 60,
allDaySlot: false,
selectable: true,
...

});

but I have the display:

09:00

10:00

11:00

12:00

....

I need your help, Thanks.

 

4 Answers, 1 is accepted

Sort by
0
Tyler
Top achievements
Rank 1
answered on 30 Jan 2018, 08:32 PM

This Dojo shows how to do what you want. You are looking for the majorTimeHeaderTemplate and minorTimeHeaderTemplate. I use an inline if statement in the template to determine if we display the minutes or not. It looks like you don't want the minutes displayed if they are 0, so that is what I did.

 

0
Simsim
Top achievements
Rank 1
answered on 31 Jan 2018, 08:27 AM

Thanks,

what I wanted is to create agenda with the following hours:

09:00

11:00
14:00
16:00
18:00
 how can i do this with majorTick, i wanted to spend 9h to 11h, then 11h to 14h, then 14h to 16h and 16h to 18h?

I really need your help, Thanks.

 

0
Accepted
Tyler
Top achievements
Rank 1
answered on 31 Jan 2018, 03:09 PM

As far as I know, you cannot force times in the agenda view. The agenda view will always just show a list of events for the time period, and the times of each events. It does not show up all times and whether an event occurs in that time like the day or week view.

You can modify what the time looks like in the agenda view by using eventTimeTemplate, which is specifically for the time displayed in the agenda view for events.

 

You can go to this Dojo and create multiple events, then go to the agenda view. You will notice the agenda view simply displays all events and times they occur. It does not display any times events do not occur, so you cannot really just add time windows to the agenda view. 

For other views, you will need a custom solution in Javascript, I believe, to have mismatched time intervals. It would be easy to do 'majorTick: 120', but the issue is 11:00 to 14:00 is 3 hours... every other time interval you have is an easy two hours. 

You could perhaps set the majorTick to 60, and go through each row tr in the k-scheduler-times and hide all the ones you don't want shown while hiding the scheduler row as well somehow.

0
Simsim
Top achievements
Rank 1
answered on 02 Feb 2018, 09:40 AM
Many thanks.
Tags
Scheduler
Asked by
Simsim
Top achievements
Rank 1
Answers by
Tyler
Top achievements
Rank 1
Simsim
Top achievements
Rank 1
Share this question
or