Telerik Scheduler Blazor (Part 3): Driving User’s Focus

Telerik Scheduler Blazor (Part 3): Driving User’s Focus

Telerik Scheduler Blazor (Part 3): Driving User’s Focus. The Telerik Blazor Scheduler makes it easy for you to not only add a calendar to your app’s UI but also to direct the user’s focus to what matters.

The Telerik Blazor Scheduler makes it easy for you to not only add a calendar to your app’s UI but also to direct the user’s focus to what matters.

With its  Scheduler component, Telerik UI for Blazor makes it easy for you to add a calendar to your Blazor app’s UI to support entering or reporting both appointments and events (the Telerik team uses the terms “scheduler” and “appointments” when discussing time-related data). Part of that comes from leveraging the Scheduler’s  built-in views. However, a good UI also directs users to where to enter or find the data they need within the UI. To put it another way, a good UI directs the user’s focus, and the Scheduler gives you tools to manage that, also.

Here’s a quick review of how to set up a  “Scheduler-compatible” project.

Highlighting the Right Times

The good news here is that each of the views offers you multiple options to facilitate managing the user’s focus. All of the views (except for the month view), for example, include WorkDayStart and WorkDayEnd attributes that let you specify a highlighted time range in the calendar.

This example causes the view to highlight the times between 9:00 am and 5:00 pm, for example:

<SchedulerDayView 
    WorkDayStart=
       "@(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 9,0,0))"
    WorkDayEnd=
      "@(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 17,0,0))" />

Razor

As the user pages through days, these two attributes ignore the year, month and day in the date passed to them and use the only time component of the date to control which time range is highlighted.

blazor

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Select List in Blazor || DropDown List in Blazor

LIKE | COMMENT | SHARE | SUBSCRIBE In this Blazor Tutorial, I will show you how to use #DropDownList in blazor app using MatBlazor - (Material Design compone...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly appli...

Call GET API ASP NET Core Blazor | Blazor CRUD using API Part-2

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to get all data from database using Web API form Asp.Net Core Blazor #Webassembly ap...

Call PUT API ASP NET Core Blazor | Blazor CRUD using API Part-3

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to update data from database using Web API form Asp.Net Core Blazor #Webassembly app...