Get full support for AngularJS out of the box, or use your favorite JavaScript framework.Get full support for AngularJS out of the box, or use your favorite.
@using blazor.Data
<TelerikScheduler @bind-Date="@StartDate"
@bind-View="@CurrView"
Data="@Appointments"
OnUpdate="@UpdateAppointment"
OnDelete="@DeleteAppointment"
OnCreate="@AddAppointment"
AllowUpdate="true"
AllowCreate="true"
AllowDelete="true"
Height="500px"><SchedulerViews><SchedulerDayView StartTime="@DayStart"/><SchedulerWeekView StartTime="@DayStart"/><SchedulerMultiDayView StartTime="@DayStart"/></SchedulerViews></TelerikScheduler>
@code {
List<Appointment> Appointments =newList<Appointment>();publicDateTime StartDate {get;set;}publicSchedulerView CurrView {get;set;}= SchedulerView.Week;publicDateTime DayStart {get;set;}=newDateTime(2000,1,1,8,0,0);protectedoverrideasyncTaskOnInitializedAsync(){
StartDate =GetStart();
Appointments =GetAppointments();returnbase.OnInitializedAsync();}private List<Appointment> GetAppointments()
{
List<Appointment> data = new List<Appointment>();
DateTime baselineTime = GetStart();
data.Add(new Appointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = baselineTime.AddHours(2),
End = baselineTime.AddHours(2).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = baselineTime.AddDays(-10),
End = baselineTime.AddDays(-2)
});
data.Add(new Appointment
{
Title = "Jane's birthday party",
Description = "Make sure to get her fresh flowers in addition to the gift.",
Start = baselineTime.AddDays(5).AddHours(10),
End = baselineTime.AddDays(5).AddHours(18),
});
data.Add(new Appointment
{
Title = "One-on-one with the manager",
Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30),
End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45),
});
data.Add(new Appointment
{
Title = "Brunch with HR",
Description = "Performance evaluation of the new recruit.",
Start = baselineTime.AddDays(3).AddHours(3),
End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45)
});
data.Add(new Appointment
{
Title = "Interview with new recruit",
Description = "See if John will be a suitable match for our team.",
Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30),
End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Conference",
Description = "The big important work conference. Don't forget to practice your presentation.",
Start = baselineTime.AddDays(6),
End = baselineTime.AddDays(11),
IsAllDay = true
});
data.Add(new Appointment
{
Title = "New Project Kickoff",
Description = "Everyone assemble! We will also have clients on the call from a later time zone.",
Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30),
End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30)
});
data.Add(new Appointment
{
Title = "Get photos",
Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.",
Start = baselineTime.AddHours(2).AddMinutes(15),
End = baselineTime.AddHours(2).AddMinutes(30)
});
return data;
}
publicDateTime GetStart()
{
DateTime now = DateTime.Now;
int diff = (7 + (now.DayOfWeek - DayOfWeek.Monday)) % 7;
DateTime lastMonday = now.AddDays(-1 * diff);
//return 8 AM on today's date for better visualization of the demosreturn new DateTime(lastMonday.Year, lastMonday.Month, lastMonday.Day, 8, 0, 0);
}
voidUpdateAppointment(SchedulerUpdateEventArgs args){Appointment item =(Appointment)args.Item;var matchingItem = Appointments.FirstOrDefault(a => a.Id == item.Id);if(matchingItem !=null){
matchingItem.Title = item.Title;
matchingItem.Description = item.Description;
matchingItem.Start = item.Start;
matchingItem.End = item.End;
matchingItem.IsAllDay = item.IsAllDay;}}voidAddAppointment(SchedulerCreateEventArgs args){Appointment item = args.Itemas Appointment;
Appointments.Add(item);}voidDeleteAppointment(SchedulerDeleteEventArgs args){Appointment item =(Appointment)args.Item;
Appointments.Remove(item);}}
Charts to give sense to data, enabling end-users to analyze volumes of complex information. Choose from a rich set of series including: Area, Bar, Column, Pie, Donut, Line.
Тhe easiest way to let your users pick an option from a predetermined list. You can control the data, sizes, and various appearance options like class and templates.
Progress Kendo UI has earned TrustRadius's Top Rated Award for App Development Platform. The awards are based entirely on customer satisfaction ratings.
See our high-performing Grid plus 50 stunning truly native easy-to-customize UI components in action.
9/10Ease of Use
9.7/10Quality of Support
9.6/10Ease of Setup
What Developers Say
I've been testing Blazor components from a variety of providers and hands-down, the Telerik ones are the best - great UX, fast, easy to extend/implement.
Chris Woodard
Technical Consultant, Avisra
Very happy with the current control set, the progress to release new controls and the extending of current functionality.
The controls are fast and easy to implement.
Support is one of the best I've had to deal with. Friendly response and they always try to help you with examples, custom made for you examples and if what you want/need is not yet possible they try to find a workaround for you.
Jurgen Mangé
, SGS Belgium NV
I saw Telerik UI components in YouTube videos and then I loved it. It is going to be a blast using them!
M Imamul Hassan Khan
Developer, Xenon Solutions Ltd.
I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!
Daniel Roth
Program Manager, Microsoft
Get started with Telerik UI for Blazor and live in a JavaScript-free world
Download a 30-day trial and measure how much more productive you can be
60+ (and growing) UI components to match any app scenario
A UI component library designed and built for Blazor, with zero dependencies
Outstanding support with 97% customer satisfaction rating from the developers who build the product