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

Which event "Show Business Hours" or "Show full day" button click will trigger?

4 Answers 361 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Matt Dufrasne
Top achievements
Rank 1
Matt Dufrasne asked on 15 Sep 2016, 11:56 AM

Basically i'm trying to hide non-business hours on the click of "Show Business Hours" button in Scheduler. This is needed on demand.

Non-Business work hours - Saturday , Sunday (weekend) and 8 PM to 7 AM (Weekdays)

I need to set the flag $scope.isBusinessHour to either true or false based on whether user clicked on "Show Business hour" or "Show full day" button

If $scope.isBusinessHour set to true, then CustomView would be used which will in turn show Monday to Friday days in the week view (7AM to 8PM)

else default week view would be used. 

But the problem is that i'm not able to find the "Show Business Hours" or "Show full day" button click event or function wherein i can set that flag to achieve this functionality.

Also if there is any better approach to achieve the same (To hide Non-Business work hours - Saturday , Sunday and 8 PM to 7 AM (Weekdays) on demand like on the click of "Show Business Hours" button in scheduler ) , could you suggest?

 

Week view is as below:

views: [
                    {
                        type: "day"
                    }, {
                        type: !$scope.isBusinessHour? "week" : CustomView, title: "Week",
                        selected: true,
                        workDayStart: new Date("2016/1/1 07:00 AM"),
                        workDayEnd: new Date("2016/1/1 08:00 PM")
                    }

           ]

var CustomView = kendo.ui.MultiDayView.extend({
                options: {
                    selectedDateFormat: "{0:D} - {1:D}"
                },
                name: "customView",
                calculateDateRange: function () {
                    //create a range of dates to be shown within the view

                    var selectedDate = this.options.date,
                        start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
                        idx, length,
                        dates = [];

                    for (idx = 0, length = 7; idx < length; idx++) {
                        if (start.getDay() != 0 && start.getDay() != 6) {
                            dates.push(start);
                        }
                        start = kendo.date.nextDay(start);
                    }

                    this._render(dates);
                }

            });

4 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 16 Sep 2016, 08:38 AM
Hi Matt,

Please note that by default the Scheduler hides all non-working hours in the working days when you press the "Show Business hours" button. To hide the non-working days you should switch the view to "workWeek" view. 

Also the event that is triggered when you press this button is the "navigate" event with following params:

navigate: function(e) {
  if (e.action === "changeWorkDay") {
    //Show work / full day button is pressed.
  }
},

Regards,
Vladimir Iliev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Matt Dufrasne
Top achievements
Rank 1
answered on 16 Sep 2016, 03:31 PM
Thanks Vladimir.
0
K.Ramadan
Top achievements
Rank 2
Veteran
answered on 07 Apr 2020, 03:25 PM
hello Vladimir,

I'm a Lil late but can you please tell me how can I make a button that does exactly what the "Show business hours" do (showing and hiding the work time).
I'm trying to make a button with the same functionality but separate from the Scheduler ..

0
Martin
Telerik team
answered on 09 Apr 2020, 11:54 AM

Hello Lu,

You can toggle between working hours/full day by finding the button in the Scheduler footer and use the click() method. I suppose you might want to hide the button as well:

$("#show").click(function(){
  var scheduler = $("#scheduler").data("kendoScheduler");
  $(scheduler.wrapper.find(".k-scheduler-fullday .k-link")[0]).click();
})

<style>
      .k-scheduler-fullday {
        visibility:hidden;
      }
    </style>

Here is a small Dojo example for reference.

Let me know if that works for you.

Regards,
Martin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Scheduler
Asked by
Matt Dufrasne
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Matt Dufrasne
Top achievements
Rank 1
K.Ramadan
Top achievements
Rank 2
Veteran
Martin
Telerik team
Share this question
or