Extend range of hours shown on 'Business Hours' view?

2 posts, 0 answers
  1. Evan
    Evan avatar
    1 posts
    Member since:
    Jun 2016

    Posted 28 Jun Link to this post

    Is there a supported way to extend how many hours are shown on the scheduler when in the 'Business Hour' view? I'm not referring to how to set the start and end of the work day, but how to show a different range of hours than the business hours I have set.


    For example: I have set my business hours to 9am-5pm, but I would like the scheduler to show the hours of 7am-10pm, without changing the business hours, so it is still grayed out appropriately.


    Thank you

  2. Vladimir Iliev
    Vladimir Iliev avatar
    2156 posts

    Posted 30 Jun Link to this post

    Hello Evan,

    The desired behavior is not supported out of the box and it will require custom solution. For example you can turn off the default "Business hours" button (using "footer.command" option) and insert custom button. On clicking this button you can change the view start/end times and refresh it. Here is a quick draft which you can use as starting point:

    var customIsWorkDay = false;
    $(function() {
      date: new Date("2013/6/13"),
      footer: {command: false},
      dataBound: function () {
        var scheduler = this;
        var view = scheduler.view();
        view.footer.append($("<button class='k-button toggle-work-hours'>Custom Work Hours</button>"));
        view.footer.on("click", ".toggle-work-hours", function(e) {
          customIsWorkDay = !customIsWorkDay;
          scheduler.options.startTime = new Date(2016, 1, 1, (customIsWorkDay ? 10 : 0), 0, 0);
          scheduler.options.endTime = new Date(2016, 1, 1, (customIsWorkDay ? 18 : 23), 0, 0);
          view.trigger("navigate", {
            view: view.name || view.name,
            date: view.startDate()

    Vladimir Iliev
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top