Telerik Scheduler Blazor (Part 4): Implementing Your Own UI

Telerik Scheduler Blazor (Part 4): Implementing Your Own UI

Telerik Scheduler Blazor (Part 4): Implementing Your Own UI - Telerik’s Blazor Scheduler ItemTemplate makes it easy for you to craft a view that gives your users the information and signals they need.

 The Telerik Blazor Scheduler’s pre-defined views make it easy for you to add calendaring to your app. But when those views don’t meet your needs, it’s easy both to create your own view and to signal to your users which ones are important.

As I’ve discussed in an earlier post, the Telerik Blazor Scheduler makes it easy for you to add calendaring to your application using one or more of the Scheduler’s provided views. You can also potentially customize those views just by setting attributes on the views. But—and this is the point of today’s post—if you’re not happy with the Scheduler’s default appearance of appointments, you can customize them.

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

By default, all of the Scheduler’s views look for a property called Title on the object passed to the Scheduler’s Data attribute and display that Title property in the Scheduler’s UI (it also automatically displays the start and end dates in the appointment’s tooltip). For very simple components, you might be able to pack all the information that the user needs into that Title property.

However, to effectively meet the user’s need in all but the simplest components, you’re going to need to use the Scheduler’s ItemTemplate to present the information the user needs (you can also declare an AllDayItemTemplate that’s used with events that take the whole day). On the other hand, if what you need is to style appointments to signal to the user what’s critical about the appointment, the ItemRender event will let you do that.

Defining a Sophisticated UI

At its simplest, an ItemTemplate is just a collection of text and, potentially, HTML that will be displayed in the Scheduler’s UI wherever there is an event/appointment. An ItemTemplate that’s declared immediately inside the TelerickScheduler element is used by all of the views.

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...