Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

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
2022 January
SunMonTueWedThuFriSat
26
27
28
29
30
31
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

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

Demo
2022 January
SunMonTueWedThuFriSat
26
27
28
29
30
31
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

By setting the property CalendarViewModel.Week

Demo
2022 January 4 Weeks
Sun
16
Mon
17
Tue
18
Wed
19
Thu
20
Fri
21
Sat
22

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

2022 January 4 Weeks
Sun
16
Mon
17
Tue
18
Wed
19
Thu
20
Fri
21
Sat
22
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

Attributes

Loading...

Event

Loading...
@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">
    <Calendar ValueChanged="@OnValueChanged" />
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Data is bound in both directions" Introduction="The calendar box automatically updates the text box when the time is selected" Name="Bind">
    <Calendar @bind-Value="@BindValue" />
    <BootstrapInput @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
</DemoBlock>

<DemoBlock Title="Show by week" Introduction="By setting the property <code> CalendarViewModel.Week </code>" Name="ViewModel">
    <Calendar ViewModel="CalendarViewModel.Week" />
</DemoBlock>

<DemoBlock Title="Practical applications" Introduction="Curriculum" Name="App">
    <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>
    <Calendar ViewModel="CalendarViewModel.Week">
        <tr>
            <td class="none">None</td>
            <td rowspan="4"><div class="less ch">Chinese</div></td>
            <td>Math</td>
            <td>Chinese</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td rowspan="3"><div class="less en">English</div></td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td style="background-color: #f8f9fa;" colspan="7">午休</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Math</td>
            <td>Chinese</td>
            <td>English</td>
            <td>Math</td>
            <td>English</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td class="none">None</td>
        </tr>
        <tr>
            <td class="none">None</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td>Study</td>
            <td class="none">None</td>
        </tr>
    </Calendar>
</DemoBlock>

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

using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using System;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Calendars
{
    /// <summary>
    /// 
    /// </summary>
    private BlockLogger? Trace { get; set; }

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

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

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

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

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload