日历导航
用户可以在日历中浏览几个不同的视图——从一个世纪到一个月。您可以控制用户在哪个视图中开始,日历最初显示的日期,用户可以进入的深度,还可以通过代码导航到所需的日期和视图。
日历显示箭头,让用户在相邻的时间段之间切换。单击今天
按钮导航到当前视图中包含当前日期的时间段。
例如,当前日期为2019年4月,当前视图为月视图,则用户可以按前进箭头和后退箭头分别跳转到2019年3月和2019年5月。
属性可以控制用户可以走多远最小值
而且马克斯
属性。
“上一步”和“下一步”导航默认启用。您可以控制用户可以浏览的最小和最大日期范围
用户从2019年4月开始使用,可以在2019年1月至2019年7月之间导航。
@code {DateTime startDate = new DateTime(2019, 4,1);DateTime minDate = new DateTime(2019, 1,1);DateTime maxDate = new DateTime(2019, 7,31);CalendarView selectedView {get;设置;} = CalendarView.Month;}
上面代码片段的结果
上下切换查看细节
日历提供了几个视图,向用户显示不同的时间段:
世纪
十年
一年
月
用户可以单击当前视图中的项目以进入更详细的视图。他们可以单击顶部的当前范围来导航到更大的视图,在那里导航更大的时间部分更容易(例如,年,甚至几十年)。
控件可以控制初始视图视图
属性的成员Telerik.Blazor.CalendarView
枚举,如上面所列。
若要控制用户可以进入的详细信息,请设置BottomView
而且赢富数据
参数设置为相同枚举的成员。
控制当前视图和用户可以进入的深度
用户只能在TopView和BottomView下到年份。
The selected date is: @selectedDate @code { private DateTime min = new DateTime(2015, 1, 1); private DateTime max = new DateTime(2025, 12, 31); private CalendarView SelectedView { get; set; } = CalendarView.Decade; private string selectedDate = ""; private void MyValueChangeHandler(DateTime newValue) { selectedDate = newValue.ToString(); StateHasChanged(); } }
TopView和BottomView
BottomView
设置用户可以浏览的最大细节级别。默认值为CalendarView。月
.如果视图
未设置时,日历将初始显示其BottomView
.
赢富数据
设置最小级别的细节(即最大级别的数据聚合)。默认值为CalendarView。世纪
.
程序化的导航
您可以使Calendar组件移动到某个日期并通过其查看日期
而且视图
支持双向绑定的参数。最小/最大和顶部/底部视图的约束适用于编程导航和用户导航。
将日历导航到日期并以编程方式查看
@*程序化日历导航*@ 更新视图 @code {CalendarView CalendarView {get;设置;} = CalendarView.Month;DateTime startDate {get;设置;} = new DateTime(2019, 5,2);DateTime min = new DateTime(2015, 1,1);DateTime max = new DateTime(205,12,31);UpdateView() {calendarView = calendarView . year;startDate = new DateTime(2018,5,2); } }