
Calendar
Containers that display data as calendars. When the data is date or by date, such as schedule, schedule, price calendar, etc., lunar calendar, etc. Year/month switching is currently supported.
The underlying calendar is displayed.
Demo
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
The calendar box automatically updates the text box when the time is selected
Demo
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
customer the cell template via CellTemplate
Demo
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
By setting the property CalendarViewMode.Week
Demo
Sun
29 | Mon
30 | Tue
31 | Wed
1 | Thu
2 | Fri
3 | Sat
4 |
---|
Curriculum
Demo
Currently, the ChildContext
is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later
Sun
29 | Mon
30 | Tue
31 | Wed
1 | Thu
2 | Fri
3 | Sat
4 |
---|---|---|---|---|---|---|
None | Chinese |
Math | Chinese | Math | English | None |
None | Math | English |
Math | English | None | |
None | Math | Math | English | None | ||
None | Math | Math | English | None | ||
午休 | ||||||
None | Math | Chinese | English | Math | English | None |
None | Study | Study | Study | Study | Study | None |
None | Study | Study | Study | Study | Study | None |
Click the cell pop-up window to edit the working hours, and then close the pop-up window to re summarize the statistical data
Demo
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
1 张三 0 | 2 张三 0 | 3 张三 0 李四 0 王五 0 | 4 张三 0 李四 0 | 5 张三 0 | 6 张三 0 李四 0 王五 0 | 7 张三 0 李四 0 王五 0 |
8 张三 0 | 9 张三 0 | 10 张三 0 李四 0 | 11 张三 0 李四 0 王五 0 | 12 张三 0 李四 0 | 13 张三 0 | 14 张三 0 |
15 张三 0 李四 0 | 16 张三 0 李四 0 | 17 张三 0 李四 0 王五 0 | 18 张三 0 李四 0 王五 0 | 19 张三 0 李四 0 王五 0 | 20 张三 0 李四 0 | 21 张三 0 |
22 张三 0 李四 0 王五 0 | 23 张三 0 李四 0 王五 0 | 24 张三 0 李四 0 | 25 张三 0 | 26 张三 0 李四 0 王五 0 | 27 张三 0 | 28 张三 0 |
29 张三 0 李四 0 王五 0 | 30 张三 0 李四 0 | 31 张三 0 李四 0 王五 0 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
Attributes
Event
@page "/calendars"
@inject IStringLocalizer<Calendars> Localizer
<h3>Calendar</h3>
<h4>Containers that display data as calendars. When the data is date or by date, such as schedule, schedule, price calendar, etc., lunar calendar, etc. Year/month switching is currently supported.</h4>
<DemoBlock Title="Basic usage" Introduction="The underlying calendar is displayed." Name="Normal" Demo="typeof(Demos.Calendar.CalendarNormal)" />
<DemoBlock Title="Data is bound in both directions" Introduction="The calendar box automatically updates the text box when the time is selected" Name="Bind" Demo="typeof(Demos.Calendar.CalendarBind)" />
<DemoBlock Title="Cell Template" Introduction="customer the cell template via <code>CellTemplate</code>" Name="CellTemplate" Demo="typeof(Demos.Calendar.CalendarCellTemplate)" />
<DemoBlock Title="Show by week" Introduction="By setting the property <code>CalendarViewMode.Week</code>" Name="ViewModel" Demo="typeof(Demos.Calendar.CalendarViewModel)" />
<DemoBlock Title="Practical applications" Introduction="Curriculum" Name="App" Demo="typeof(Demos.Calendar.CalendarApp)">
<p>Currently, the <code>ChildContext</code> is temporarily rendered by the week component, and the data-related operating components in all cells are not encapsulated and will be refined later</p>
</DemoBlock>
<DemoBlock Title="Example of actual man hour system" Introduction="Click the cell pop-up window to edit the working hours, and then close the pop-up window to re summarize the statistical data" Name="CellTemplateDemo" Demo="typeof(Demos.Calendar.CalendarCellTemplateDemo)" />
<AttributeTable Items="@GetAttributes()" />
<EventTable Items="@GetEvents()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public sealed partial class Calendars
{
/// <summary>
/// 获得事件方法
/// </summary>
/// <returns></returns>
private IEnumerable<EventItem> GetEvents() => new EventItem[]
{
new EventItem()
{
Name = "ValueChanged",
Description = Localizer["ValueChanged"],
Type ="EventCallback<DateTime>"
}
};
/// <summary>
/// 获得属性方法
/// </summary>
/// <returns></returns>
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "Value",
Description = Localizer["Value"],
Type = "DateTime",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "ChildContent",
Description = Localizer["ChildContent"],
Type = "RenderFragment",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem() {
Name = "CellTemplate",
Description = Localizer["CellTemplate"],
Type = "RenderFragment<CalendarCellValue>",
ValueList = " — ",
DefaultValue = " — "
}
};
}