Hide weekend on scheduler view

2 Answers 168 Views
Scheduler
Antonio
Top achievements
Rank 1
Antonio asked on 29 Jun 2022, 08:03 AM

Hello,

can be hidden Saturdays and Sundays from the scheduler control in all views and how?

Many thanks!

 

2 Answers, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 01 Jul 2022, 01:15 PM

Hello Antonio,

You can configure the Scheduler to show the WorkWeekView instead of the WeekView:

.Views(views =>
    {
        views.DayView();
        views.WorkWeekView(week =>
        {
            week.Selected(true);
        });
        views.MonthView();
        views.YearView();
    })

For the other views like the MonthView hiding days is not recommended because unexpected behavior might occur. That being said I recommend you to subscribe to the Add event of the Scheduler. In its handler you can check if the new event is during a weekend and prevent its addition:

    .Events(e=>e.Add("onAdd"))

    function onAdd(e){    
        var endDay = kendo.toString(e.event.end, "dddd");
        var startDay = kendo.toString(e.event.start, "dddd")
        if(endDay=="Sunday"||startDay=="Sunday"||endDay=="Saturday"||startDay=="Saturday"){
            e.preventDefault();
            alert("Weekends are non-work days for our organization.")
        }
    }

For your convenience I have added this Telerik REPL that showcases the behavior of the snippet above.

Please give the approach a try and let me know how it works on your side. Thank you.

Regards,
Stoyan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Michel
Top achievements
Rank 1
Iron
answered on 27 Aug 2023, 11:26 PM

Here is a solution that is working for me on the MonthView.

.k-scheduler-monthview .k-scheduler-table td:first-child,
.k-scheduler-monthview .k-scheduler-table td:last-child,
.k-scheduler-monthview .k-scheduler-table th:first-child,
.k-scheduler-monthview .k-scheduler-table th:last-child {
    width: 0;
    padding: 0;
    visibility: hidden;
    border: none;
}

 

Alexander
Telerik team
commented on 29 Aug 2023, 07:04 AM

Hi Michel,

Indeed, I can confirm that the shared CSS selectors are valid ones, as I further performed examinations in the previously provided example by my colleague and it is successfully hiding the weekend columns in the calendar view.

Thank you for sharing this with the community. We really appreciate your contribution.

Tags
Scheduler
Asked by
Antonio
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Michel
Top achievements
Rank 1
Iron
Share this question
or