Blazor的Telerik UI?下载30天免费试用

任命模板

可以通过调度程序的约会模板更改在调度程序的约会中呈现的内容。这使您可以更改事件标题的默认显示,并为用户添加更多信息,如图标、按钮、开始和结束时间以及自定义字段。

有两个模板:

  • ItemTemplate-控制在一天内提供的常规预约。

  • AllDayItemTemplate-控制在all-day行显示全天约会。它不适用于Month视图,因为该视图并不基于此区分约会,但是您可以在自定义模板中为这些约会呈现不同的内容。

约会模板允许您控制约会内容的呈现,但它保留了其他内置的约会功能——例如拖动和调整手柄、删除图标、指示约会是否超过一天的箭头。

您可以为整个调度程序设置模板,也可以为每个调度程序设置模板视图.如果在特定视图上设置了模板,它将优先于整个调度程序的共享模板。

上下文是它将显示的项。您可以将其强制转换为您使用的模型类型。

方法将类添加到其包装元素中,从而为整个约会设置样式ItemRender事件

在调度程序中使用约会模板和全天约会模板的示例。Month视图使用与其他视图不同的模板

@*几个样本自定义的约会被覆盖在月视图,其中房地产是小*@   
@{var appointment = context作为SchedulerAppointment;@if (!string.IsNullOrEmpty(appointment.Icon)) {}@appointment.”Title //确定约会是否足够大以容纳更多文本的示例逻辑//这依赖于当前插槽大小来呈现长约会的额外内容@if((约会。结束-约会。开始)。TotalMinutes > 60) {
从@appointment. start . toshorttimestring()到@appointment. end . toshorttimestring ()
}}
@{var appointment = context as SchedulerAppointment;@appointment。Title 开始于@appointment. start . date . toshortdatestring()结束于@appointment. end . date . toshortdatestring () } @{var appointment = context as SchedulerAppointment;//月视图没有专门的全天模板,因为没有专门的事件渲染槽//这个模板显示了一种方法,使它们在月视图中看起来与其他事件不同/特殊if (appointment.IsAllDay) {@appointment. day)。Title} else {
@appointment.Start.ToShortTimeString() to @appointment.End.ToShortTimeString()
}}
@code {public DateTime StartDate {get;设置;} = new DateTime(2019, 11,29); public SchedulerView CurrView { get; set; } = SchedulerView.Week; public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important List Appointments = new List() { 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), Icon = "warning" }, 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; } public string Icon { get; set; } } }

上面代码片段的结果

调度程序中的约会模板

另请参阅

在本文中
Baidu
map