Skip to content

Commit cd12a60

Browse files
densen2014ArgoZhang
densen2014
and
ArgoZhang
authored
feat(Calendar): add HeaderTemplate parameter (#4674)
* (Calendar) add AdditionalHeaders Parameter #4673 * feat: 增加 HeaderTemplate 模板 * feat: 增加 BodyTemplateContext 上下文类 * doc: 增加注释信息 * doc: 更新示例 * test: 更新单元测试 --------- Co-Authored-By: Argo Zhang <[email protected]>
1 parent 6f491d7 commit cd12a60

File tree

14 files changed

+289
-22
lines changed

14 files changed

+289
-22
lines changed

‎src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<td>
2+
<div class="calendar-day text-center">
3+
总结
4+
</div>
5+
</td>
6+
@foreach (var value in Context.Values)
7+
{
8+
<td class="@value.DefaultCss">
9+
<div class="calendar-day">
10+
<span>@value.CellValue.Day</span>
11+
</div>
12+
</td>
13+
}
14+
<td>
15+
<div class="calendar-day text-center">
16+
结算
17+
</div>
18+
</td>

‎src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Components;
7+
8+
/// <summary>
9+
/// 日历 BodyTemplate 组件
10+
/// </summary>
11+
public partial class CalendarBodyTemplate
12+
{
13+
/// <summary>
14+
/// 获得/设置 月视图 BodyTempalte 上下文
15+
/// </summary>
16+
[Parameter]
17+
[EditorRequired]
18+
[NotNull]
19+
public BodyTemplateContext? Context { get; set; }
20+
}

‎src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<tr>
2+
<td>09:00</td>
3+
@for (var index = 0; index < 7; index++)
4+
{
5+
<td></td>
6+
}
7+
</tr>
8+
<tr>
9+
<td>10:00</td>
10+
@for (var index = 0; index < 7; index++)
11+
{
12+
<td></td>
13+
}
14+
</tr>
15+
<tr>
16+
<td>11:00</td>
17+
@for (var index = 0; index < 7; index++)
18+
{
19+
<td></td>
20+
}
21+
</tr>
22+
<tr>
23+
<td colspan="8" class="bg-success">茶歇</td>
24+
</tr>
25+
<tr>
26+
<td>14:00</td>
27+
@for (var index = 0; index < 7; index++)
28+
{
29+
<td></td>
30+
}
31+
</tr>
32+
<tr>
33+
<td>15:00</td>
34+
@for (var index = 0; index < 7; index++)
35+
{
36+
<td></td>
37+
}
38+
</tr>
39+
<tr>
40+
<td>16:00</td>
41+
@for (var index = 0; index < 7; index++)
42+
{
43+
<td></td>
44+
}
45+
</tr>
46+
<tr>
47+
<td colspan="8" style="background-color: #f8f9fa;">晚宴</td>
48+
</tr>

‎src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Components;
7+
8+
/// <summary>
9+
/// 日历 ChildContent 组件
10+
/// </summary>
11+
public partial class CalendarChildContent
12+
{
13+
14+
}

‎src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@if (ViewMode == CalendarViewMode.Month)
2+
{
3+
<tr>
4+
<th>月总结</th>
5+
<th>星期日</th>
6+
<th>星期一</th>
7+
<th>星期二</th>
8+
<th>星期三</th>
9+
<th>星期四</th>
10+
<th>星期五</th>
11+
<th>星期六</th>
12+
<th>合计</th>
13+
</tr>
14+
}
15+
else
16+
{
17+
<tr>
18+
<th>时间</th>
19+
<th>星期日</th>
20+
<th>星期一</th>
21+
<th>星期二</th>
22+
<th>星期三</th>
23+
<th>星期四</th>
24+
<th>星期五</th>
25+
<th>星期六</th>
26+
</tr>
27+
}

‎src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Components;
7+
8+
/// <summary>
9+
/// 日历 HeaderTemplate 组件
10+
/// </summary>
11+
public partial class CalendarHeaderTemplate
12+
{
13+
/// <summary>
14+
/// 获得/设置 是否显示周视图 默认为 CalendarVieModel.Month 月视图
15+
/// </summary>
16+
[Parameter]
17+
public CalendarViewMode ViewMode { get; set; }
18+
}

‎src/BootstrapBlazor.Server/Components/Samples/Calendars.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,36 @@
3131
<Calendar ViewMode="CalendarViewMode.Week" />
3232
</DemoBlock>
3333

34+
<DemoBlock Title="@Localizer["HeaderTemplateTitle"]" Introduction="@Localizer["HeaderTemplateIntro"]" Name="HeaderTemplate">
35+
<section ignore>
36+
<div class="row form-inline g-3">
37+
<div class="col-12">
38+
@((MarkupString)Localizer["HeaderTemplateDesc"].Value)
39+
</div>
40+
<div class="col-12 col-sm-6">
41+
<BootstrapInputGroup>
42+
<BootstrapInputGroupLabel DisplayText="ViewMode"></BootstrapInputGroupLabel>
43+
<Segmented @bind-Value="HeaderTemplateViewMode">
44+
<SegmentedItem Value="CalendarViewMode.Month" Text="Month"></SegmentedItem>
45+
<SegmentedItem Value="CalendarViewMode.Week" Text="Week"></SegmentedItem>
46+
</Segmented>
47+
</BootstrapInputGroup>
48+
</div>
49+
</div>
50+
</section>
51+
<Calendar ViewMode="HeaderTemplateViewMode">
52+
<HeaderTemplate>
53+
<CalendarHeaderTemplate ViewMode="HeaderTemplateViewMode"></CalendarHeaderTemplate>
54+
</HeaderTemplate>
55+
<BodyTemplate>
56+
<CalendarBodyTemplate Context="@context"></CalendarBodyTemplate>
57+
</BodyTemplate>
58+
<ChildContent>
59+
<CalendarChildContent></CalendarChildContent>
60+
</ChildContent>
61+
</Calendar>
62+
</DemoBlock>
63+
3464
<DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App">
3565
<p>@((MarkupString)Localizer["AppText"].Value)</p>
3666
<Calendar ViewMode="CalendarViewMode.Week">

‎src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ private void OnValueChanged(DateTime ts)
2222

2323
private DateTime BindValue { get; set; } = DateTime.Today;
2424

25+
private CalendarViewMode HeaderTemplateViewMode { get; set; }
26+
2527
private static string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd");
2628

2729
private ConcurrentDictionary<DateTime, List<Crew>> Data { get; } = new();

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3693,6 +3693,9 @@
36933693
"ViewModeIntro": "By setting the property <code>CalendarViewMode.Week</code>",
36943694
"CellTemplateTitle": "Cell Template",
36953695
"CellTemplateIntro": "customer the cell template via <code>CellTemplate</code>",
3696+
"HeaderTemplateTitle": "Header Template",
3697+
"HeaderTemplateIntro": "Customize the header template by setting the property <code>HeaderTemplate</code>",
3698+
"HeaderTemplateDesc": "Customize the UI by setting the <code>BodyTemplate</code> and <code>HeaderTemplate</code>. In this example, additional columns are added to the front and back of the month view, and a timeline is added to the week view",
36963699
"AppTitle": "Practical applications",
36973700
"AppIntro": "Curriculum",
36983701
"AppText": "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",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3693,6 +3693,9 @@
36933693
"ViewModeIntro": "通过设置属性 <code>CalendarViewMode.Week</code>",
36943694
"CellTemplateTitle": "单元格模板",
36953695
"CellTemplateIntro": "通过设置属性 <code>CellTemplate</code> 自定义单元格模板",
3696+
"HeaderTemplateTitle": "头部模板",
3697+
"HeaderTemplateIntro": "通过设置属性 <code>HeaderTemplate</code> 自定义头部模板",
3698+
"HeaderTemplateDesc": "通过设置 <code>BodyTemplate</code> 配合 <code>HeaderTemplate</code> 来自定义呈现 UI，本例中月视图中前后均增加了附加列，星期试图中增加了时间线",
36963699
"AppTitle": "实战应用",
36973700
"AppIntro": "课堂表",
36983701
"AppText": "目前按周内组件暂时为统一使用 <code>ChildContext</code> 来进行渲染，所有单元格内的数据相关操作组件均未进行封装，稍后完善",

0 commit comments

Comments
 (0)