Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

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.

Basic usage

The underlying calendar is displayed.

Demo

2023 January

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

<Calendar ValueChanged="@OnValueChanged" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    private BlockLogger? Trace { get; set; }

    private void OnValueChanged(DateTime ts)
    {
        Trace?.Log($"{ts:yyyy-MM-dd}");
    }
}

Data is bound in both directions

The calendar box automatically updates the text box when the time is selected

Demo

2023 January

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

<Calendar @bind-Value="@BindValue" />
<BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />

@code {
    private DateTime BindValue { get; set; } = DateTime.Today;

    private static string Formatter(DateTime ts) => ts.ToString("yyyy-MM-dd");
}

Cell Template

customer the cell template via CellTemplate

Demo

2023 January

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

<Calendar>
    <CellTemplate>
        <td class="@context.DefaultCss">
            <div class="calendar-day">
                <div>@context.CellValue.Day</div>
            </div>
        </td>
    </CellTemplate>
</Calendar>

Show by week

By setting the property CalendarViewMode.Week

Demo

2023 January 5 Weeks

<Calendar ViewMode="CalendarViewMode.Week" />

Practical applications

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

2023 January 5 Weeks

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

@inject IStringLocalizer<CalendarApp> Localizer

<Calendar ViewMode="CalendarViewMode.Week">
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td rowspan="4"><div class="less ch">@Localizer["Chinese"]</div></td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["Chinese"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["English"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Math"]</td>
        <td rowspan="3"><div class="less en">@Localizer["English"]</div></td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["English"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["English"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["English"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td style="background-color: #f8f9fa;" colspan="7">午休</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["Chinese"]</td>
        <td>@Localizer["English"]</td>
        <td>@Localizer["Math"]</td>
        <td>@Localizer["English"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
    <tr>
        <td class="none">@Localizer["None"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td>@Localizer["Study"]</td>
        <td class="none">@Localizer["None"]</td>
    </tr>
</Calendar>

Example of actual man hour system

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

2023 January

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

Work hour statistics of the month

张三

李四

王五

@using System.Collections.Concurrent;
@inject IStringLocalizer<CalendarCellTemplateDemo> Localizer

<Calendar @bind-Value="CrewInfoValue">
    <CellTemplate>
        <td class="@context.DefaultCss">
            <CalendarCrewCell @bind-Value="@context" Crews="GetCrewsByDate(context.CellValue)" />
        </td>
    </CellTemplate>
</Calendar>
<div class="mt-2 sum">
    <b>@Localizer["CellTemplateDemoSummary"]</b>
    <div class="row g-2 mt-1">
        @foreach (var crew in CalendarDemoDataHelper.Crews)
        {
            <div class="col-12">
                <div>@crew.Name</div>
                <div>@GetSumByName(crew.Name)</div>
            </div>
        }
    </div>
</div>

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

    private DateTime CrewInfoValue { get; set; } = DateTime.Today;

    private List<Crew> GetCrewsByDate(DateTime d) => Data.GetOrAdd(d, CalendarDemoDataHelper.GetCrewsByDate);

    private int GetSumByName(string name) => Data.Where(d => d.Key.Month == CrewInfoValue.Month).Sum(d => d.Value.FirstOrDefault(v => v.Name == name)?.Value ?? 0);
}

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 = " — "
        }
    };
}

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

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

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

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

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

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

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

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.

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.2.5-beta02

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

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

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