Show Business Hours in Scheduler - programmatic control

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 05 Jun 2020 07:30 by ADMIN

Uluç

Created on: 06 May 2020 15:32

Category: Scheduler

Type: Feature Request

Show Business Hours in Scheduler - programmatic control

I have Working Hours from 9 AM to 6 PM, and All day hours from 8 AM to 23 PM.

By default, the scheduler will display the all day hours, and the user has to click on business hours to see them, it creates an extra unnecessary step for the user in my case.

I would like the business hours view to be the default rather than the all day hours view.

4 comments

ADMIN

Marin Bratanov

Posted on: 05 Jun 2020 07:30

Hi Hoon,

In the example I posted, the "schedulerContainer" class is in the <div> around the scheduler, and is used to make the particular cascade to ensure that we click the button on the scheduler you want. Of course, in a real app you should improve on this logic, it is here as a hint mostly. For other classes from the components rendering, you can use the browser devtools to inspect the HTML, classes, rules and so on: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

On where our styles come from - by default they come from static assets which is a framework feature, you can read more about this here which also explains what you need to include and how: https://docs.telerik.com/blazor-ui/getting-started/what-you-need.

As to the error you get - my best guess is that the injected JS Runtime is under a different name or there is a different error that you should debug (maybe the JS code is missing or is parsed too late). If you can't figure it out, please open a support ticket and send us a simple runnable sample of the Telerik problem so we can have a look.

Regards,
Marin Bratanov
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.

Hoon

Posted on: 04 Jun 2020 20:18

When I tried it, my project bombs at 'onAfterRenderAsync()'. Could the reason be that the style class defs such as ".schedulerConainer' are not found in the css files in the project?

Hoon

Posted on: 04 Jun 2020 19:35

Hi, Marin

Where can I find the tag class definitions such as .schedulerContainer .k-scheduler-fullday etc.? I looked through the css files under www.root/css but no css style sheets are defined with them. Do I need to import a telerik-specific css stylesheet?

ADMIN

Marin Bratanov

Posted on: 06 May 2020 15:34

A workaround can be to click the button with JS interop when the page loads:

sample script:

    <script>
        function clickSchedulerBusinessHoursButton(parentClass) {
            var btn = document.querySelector(parentClass + '.k-scheduler-fullday span.k-link');
            if (btn) {
                btn.click();
            }
        }
    </script>

sample component with a scheduler on it:

@inject IJSRuntime _js

<div class="schedulerContainer">
    <TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
        <SchedulerViews>
            <SchedulerDayView StartTime="@DayStart" WorkDayStart="@WorkDayStart" EndTime="@DayEnd" WorkDayEnd="@WorkDayEnd" />
            <SchedulerWeekView StartTime="@DayStart" WorkDayStart="@WorkDayStart" EndTime="@DayEnd" WorkDayEnd="@WorkDayEnd" />
            <SchedulerMultiDayView StartTime="@DayStart" WorkDayStart="@WorkDayStart" EndTime="@DayEnd" WorkDayEnd="@WorkDayEnd" NumberOfDays="10" />
        </SchedulerViews>
    </TelerikScheduler>
</div>

@code {
    public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;

    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 6, 0, 0);
    public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
    public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 23, 0, 0);
    public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);



    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await _js.InvokeVoidAsync("clickSchedulerBusinessHoursButton", new[] { ".schedulerContainer " });
        }
    }




    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
{
            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 11, 26, 11, 30, 0),
                End = new DateTime(2019, 11, 26, 12, 0, 0)
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 11, 25, 9, 30, 0),
                End = new DateTime(2019, 11, 25, 12, 45, 0)
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 07)
            }
    };

    public class SchedulerAppointment
    {
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik