任命模板
可以通过调度程序的约会模板更改在调度程序的约会中呈现的内容。这使您可以更改事件标题的默认显示,并为用户添加更多信息,如图标、按钮、开始和结束时间以及自定义字段。
有两个模板:
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; } } }
上面代码片段的结果