Customize the hours display in scheduler (jquery)

5 posts, 1 answers
  1. Simsim
    Simsim avatar
    3 posts
    Member since:
    Jan 2018

    Posted 30 Jan 2018 Link to this post

    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.

     

  2.
  3. Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 30 Jan 2018 in reply to Simsim Link to this post

    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.

     

  5. Simsim
    Simsim avatar
    3 posts
    Member since:
    Jan 2018

    Posted 31 Jan 2018 in reply to Tyler Link to this post

    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.

     

  7. Answer
    Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 31 Jan 2018 in reply to Simsim Link to this post

    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.

  8.
  9. Simsim
    Simsim avatar
    3 posts
    Member since:
    Jan 2018

    Posted 02 Feb 2018 in reply to Tyler Link to this post

    Many thanks.
Back to Top