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]>
dotnetcore · Jan 13, 2025 · cd12a60 · cd12a60
1 parent 6f491d7
commit cd12a60
Show file tree

Hide file tree

Showing 14 changed files with 289 additions and 22 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor
@@ -0,0 +1,18 @@
+<td>
+    <div class="calendar-day text-center">
+        总结
+    </div>
+</td>
+@foreach (var value in Context.Values)
+{
+    <td class="@value.DefaultCss">
+        <div class="calendar-day">
+            <span>@value.CellValue.Day</span>
+        </div>
+    </td>
+}
+<td>
+    <div class="calendar-day text-center">
+        结算
+    </div>  
+</td>
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarBodyTemplate.razor.cs
@@ -0,0 +1,20 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// 日历 BodyTemplate 组件
+/// </summary>
+public partial class CalendarBodyTemplate
+{
+    /// <summary>
+    /// 获得/设置 月视图 BodyTempalte 上下文
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    [NotNull]
+    public BodyTemplateContext? Context { get; set; }
+}
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor
@@ -0,0 +1,48 @@
+<tr>
+    <td>09:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td>10:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td>11:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td colspan="8" class="bg-success">茶歇</td>
+</tr>
+<tr>
+    <td>14:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td>15:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td>16:00</td>
+    @for (var index = 0; index < 7; index++)
+    {
+        <td></td>
+    }
+</tr>
+<tr>
+    <td colspan="8" style="background-color: #f8f9fa;">晚宴</td>
+</tr>
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarChildContent.razor.cs
@@ -0,0 +1,14 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// 日历 ChildContent 组件
+/// </summary>
+public partial class CalendarChildContent
+{
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor
@@ -0,0 +1,27 @@
+@if (ViewMode == CalendarViewMode.Month)
+{
+    <tr>
+        <th>月总结</th>
+        <th>星期日</th>
+        <th>星期一</th>
+        <th>星期二</th>
+        <th>星期三</th>
+        <th>星期四</th>
+        <th>星期五</th>
+        <th>星期六</th>
+        <th>合计</th>
+    </tr>
+}
+else
+{
+    <tr>
+        <th>时间</th>
+        <th>星期日</th>
+        <th>星期一</th>
+        <th>星期二</th>
+        <th>星期三</th>
+        <th>星期四</th>
+        <th>星期五</th>
+        <th>星期六</th>
+    </tr>
+}
diff --git a/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs b/src/BootstrapBlazor.Server/Components/Components/CalendarHeaderTemplate.razor.cs
@@ -0,0 +1,18 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// 日历 HeaderTemplate 组件
+/// </summary>
+public partial class CalendarHeaderTemplate
+{
+    /// <summary>
+    /// 获得/设置 是否显示周视图 默认为 CalendarVieModel.Month 月视图
+    /// </summary>
+    [Parameter]
+    public CalendarViewMode ViewMode { get; set; }
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor
@@ -31,6 +31,36 @@
     <Calendar ViewMode="CalendarViewMode.Week" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["HeaderTemplateTitle"]" Introduction="@Localizer["HeaderTemplateIntro"]" Name="HeaderTemplate">
+    <section ignore>
+        <div class="row form-inline g-3">
+            <div class="col-12">
+                @((MarkupString)Localizer["HeaderTemplateDesc"].Value)
+            </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="ViewMode"></BootstrapInputGroupLabel>
+                    <Segmented @bind-Value="HeaderTemplateViewMode">
+                        <SegmentedItem Value="CalendarViewMode.Month" Text="Month"></SegmentedItem>
+                        <SegmentedItem Value="CalendarViewMode.Week" Text="Week"></SegmentedItem>
+                    </Segmented>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+    <Calendar ViewMode="HeaderTemplateViewMode">
+        <HeaderTemplate>
+            <CalendarHeaderTemplate ViewMode="HeaderTemplateViewMode"></CalendarHeaderTemplate>
+        </HeaderTemplate>
+        <BodyTemplate>
+            <CalendarBodyTemplate Context="@context"></CalendarBodyTemplate>
+        </BodyTemplate>
+        <ChildContent>
+            <CalendarChildContent></CalendarChildContent>
+        </ChildContent>
+    </Calendar>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["AppTitle"]" Introduction="@Localizer["AppIntro"]" Name="App">
     <p>@((MarkupString)Localizer["AppText"].Value)</p>
     <Calendar ViewMode="CalendarViewMode.Week">

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor.cs
@@ -22,6 +22,8 @@ private void OnValueChanged(DateTime ts)
 
     private DateTime BindValue { get; set; } = DateTime.Today;
 
+    private CalendarViewMode HeaderTemplateViewMode { get; set; }
+
     private static string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd");
 
     private ConcurrentDictionary<DateTime, List<Crew>> Data { get; } = new();

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -3693,6 +3693,9 @@
     "ViewModeIntro": "By setting the property <code>CalendarViewMode.Week</code>",
     "CellTemplateTitle": "Cell Template",
     "CellTemplateIntro": "customer the cell template via <code>CellTemplate</code>",
+    "HeaderTemplateTitle": "Header Template",
+    "HeaderTemplateIntro": "Customize the header template by setting the property <code>HeaderTemplate</code>",
+    "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",
     "AppTitle": "Practical applications",
     "AppIntro": "Curriculum",
     "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",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -3693,6 +3693,9 @@
     "ViewModeIntro": "通过设置属性 <code>CalendarViewMode.Week</code>",
     "CellTemplateTitle": "单元格模板",
     "CellTemplateIntro": "通过设置属性 <code>CellTemplate</code> 自定义单元格模板",
+    "HeaderTemplateTitle": "头部模板",
+    "HeaderTemplateIntro": "通过设置属性 <code>HeaderTemplate</code> 自定义头部模板",
+    "HeaderTemplateDesc": "通过设置 <code>BodyTemplate</code> 配合 <code>HeaderTemplate</code> 来自定义呈现 UI，本例中月视图中前后均增加了附加列，星期试图中增加了时间线",
     "AppTitle": "实战应用",
     "AppIntro": "课堂表",
     "AppText": "目前按周内组件暂时为统一使用 <code>ChildContext</code> 来进行渲染，所有单元格内的数据相关操作组件均未进行封装，稍后完善",

diff --git a/src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs b/src/BootstrapBlazor/Components/Calendar/BodyTemplateContext.cs
@@ -0,0 +1,17 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// BodyTemplateContext 上下文类
+/// </summary>
+public class BodyTemplateContext
+{
+    /// <summary>
+    /// 获得/设置 当前星期日数据集合
+    /// </summary>
+    public List<CalendarCellValue> Values { get; } = [];
+}
diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor b/src/BootstrapBlazor/Components/Calendar/Calendar.razor
@@ -35,27 +35,41 @@
         <div class="calendar-body">
             <table cellspacing="0" cellpadding="0" class="calendar-table">
                 <thead>
-                    <tr>
-                        @foreach (var w in WeekLists)
-                        {
-                            <th>@w</th>
-                        }
-                    </tr>
+                    @if (HeaderTemplate != null)
+                    {
+                        @HeaderTemplate
+                    }
+                    else
+                    {
+                        <tr>
+                            @foreach (var w in WeekLists)
+                            {
+                                <th>@w</th>
+                            }
+                        </tr>
+                    }
                 </thead>
                 <tbody>
                     @for (var week = StartDate; week < EndDate; week = week.AddDays(7))
                     {
                         <tr class="calendar-table-row">
-                            @for (var index = 0; index < 7; index++)
+                            @if (BodyTemplate != null)
                             {
-                                var cellValue = CreateCellValue(week.AddDays(index));
-                                if (CellTemplate == null)
-                                {
-                                    @RenderCell(cellValue)
-                                }
-                                else
+                                @BodyTemplate(GetBodyTemplateContext(week))
+                            }
+                            else
+                            {
+                                @for (var index = 0; index < 7; index++)
                                 {
-                                    @CellTemplate(cellValue)
+                                    var cellValue = CreateCellValue(week.AddDays(index));
+                                    if (CellTemplate == null)
+                                    {
+                                        @RenderCell(cellValue)
+                                    }
+                                    else
+                                    {
+                                        @CellTemplate(cellValue)
+                                    }
                                 }
                             }
                         </tr>
@@ -85,12 +99,19 @@
         <div class="calendar-body">
             <table cellspacing="0" cellpadding="0" class="calendar-table table-week">
                 <thead>
-                    <tr>
-                        @for (var index = 0; index < 7; index++)
-                        {
-                            @RenderWeekHeader(index)
-                        }
-                    </tr>
+                    @if (HeaderTemplate != null)
+                    {
+                        @HeaderTemplate
+                    }
+                    else
+                    {
+                        <tr>
+                            @for (var index = 0; index < 7; index++)
+                            {
+                                @RenderWeekHeader(index)
+                            }
+                        </tr>
+                    }
                 </thead>
                 <tbody>
                     @ChildContent

diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs
@@ -162,17 +162,29 @@ protected int GetWeekCount()
     public Func<DateTime, Task>? OnValueChanged { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示周视图 默认为 CalendarVieModel.Month 月视图
+    /// 获得/设置 是否显示周视图 默认为 <see cref="CalendarViewMode.Month"/> 月视图
     /// </summary>
     [Parameter]
     public CalendarViewMode ViewMode { get; set; }
 
     /// <summary>
-    /// 获得/设置 周内容
+    /// 获得/设置 周内容 <see cref="CalendarViewMode.Week"/> 时有效
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// 获得/设置 列头模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? HeaderTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Body 模板仅 <see cref="CalendarViewMode.Month"/> 有效
+    /// </summary>
+    [Parameter]
+    public RenderFragment<BodyTemplateContext>? BodyTemplate { get; set; }
+
     /// <summary>
     /// 获得/设置 单元格模板
     /// </summary>
@@ -278,4 +290,11 @@ private CalendarCellValue CreateCellValue(DateTime cellValue)
         val.DefaultCss = GetCalendarCellString(val);
         return val;
     }
+
+    private BodyTemplateContext GetBodyTemplateContext(DateTime week)
+    {
+        var context = new BodyTemplateContext();
+        context.Values.AddRange(Enumerable.Range(0, 7).Select(i => CreateCellValue(week.AddDays(i))));
+        return context;
+    }
 }
diff --git a/test/UnitTest/Components/CalendarTest.cs b/test/UnitTest/Components/CalendarTest.cs
@@ -57,6 +57,33 @@ public void CellTemplate_Ok()
         });
     }
 
+    [Fact]
+    public void HeaderTemplate_Ok()
+    {
+        var cut = Context.RenderComponent<Calendar>(builder =>
+        {
+            builder.Add(a => a.ViewMode, CalendarViewMode.Month);
+            builder.Add(a => a.HeaderTemplate, builder =>
+            {
+                builder.AddContent(0, "HeaderTemplate");
+            });
+            builder.Add(a => a.BodyTemplate, context => builder =>
+            {
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "data-bb-value", context.Values.Count);
+                builder.CloseElement();
+            });
+        });
+
+        Assert.Contains("HeaderTemplate", cut.Markup);
+        Assert.Contains("data-bb-value=\"7\"", cut.Markup);
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ViewMode, CalendarViewMode.Week);
+        });
+    }
+
     [Fact]
     public async Task ButtonClick_Ok()
     {