Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

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 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

<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 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

<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 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

<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 March 12 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 March 12 Weeks

Sun 19	Mon 20	Tue 21	Wed 22	Thu 23	Fri 24	Sat 25
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 March

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	1 张三 0 李四 0	2 张三 0 李四 0	3 张三 0 李四 0 王五 0	4 张三 0 李四 0
5 张三 0 李四 0 王五 0	6 张三 0 李四 0	7 张三 0 李四 0 王五 0	8 张三 0 李四 0 王五 0	9 张三 0 李四 0	10 张三 0 李四 0 王五 0	11 张三 0
12 张三 0 李四 0 王五 0	13 张三 0	14 张三 0 李四 0	15 张三 0	16 张三 0	17 张三 0 李四 0 王五 0	18 张三 0 李四 0
19 张三 0 李四 0	20 张三 0 李四 0 王五 0	21 张三 0 李四 0 王五 0	22 张三 0	23 张三 0 李四 0 王五 0	24 张三 0	25 张三 0
26 张三 0 李四 0 王五 0	27 张三 0	28 张三 0	29 张三 0 李四 0	30 张三 0 李四 0 王五 0	31 张三 0	1
2	3	4	5	6	7	8

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

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	1 张三 0 李四 0	2 张三 0 李四 0	3 张三 0 李四 0 王五 0	4 张三 0 李四 0
5 张三 0 李四 0 王五 0	6 张三 0 李四 0	7 张三 0 李四 0 王五 0	8 张三 0 李四 0 王五 0	9 张三 0 李四 0	10 张三 0 李四 0 王五 0	11 张三 0
12 张三 0 李四 0 王五 0	13 张三 0	14 张三 0 李四 0	15 张三 0	16 张三 0	17 张三 0 李四 0 王五 0	18 张三 0 李四 0
19 张三 0 李四 0	20 张三 0 李四 0 王五 0	21 张三 0 李四 0 王五 0	22 张三 0	23 张三 0 李四 0 王五 0	24 张三 0	25 张三 0
26 张三 0 李四 0 王五 0	27 张三 0	28 张三 0	29 张三 0 李四 0	30 张三 0 李四 0 王五 0	31 张三 0	1
2	3	4	5	6	7	8

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

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.4.4-beta01

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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

Sun	Mon	Tue	Wed	Thu	Fri	Sat
26	27	28	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