Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Calendar 日历框

按照日历形式展示数据的容器。当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。

基础用法

基础的日历显示。

Demo
2021 April
SunMonTueWedThuFriSat
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
1
2
3
4
5
6
7
8

数据双向绑定

日历框选择时间时数据自动更新文本框

Demo
2021 April
SunMonTueWedThuFriSat
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
1
2
3
4
5
6
7
8

按周展示

通过设置属性

Demo
2021 April 16 Weeks
Sun
11
Mon
12
Tue
13
Wed
14
Thu
15
Fri
16
Sat
17

实战应用

课堂表

Demo

目前按周内组件暂时为统一使用 ChildContext 来进行渲染,所有单元格内的数据相关操作组件均未进行封装,稍后完善

2021 April 16 Weeks
Sun
11
Mon
12
Tue
13
Wed
14
Thu
15
Fri
16
Sat
17
语文
数学 语文 数学 英语
数学
英语
数学 英语
数学 数学 英语
数学 数学 英语
午休
数学 语文 英语 数学 英语
自习 自习 自习 自习 自习
自习 自习 自习 自习 自习

Attributes

Loading...

事件 Events

Loading...
@page "/calendars"

<h3>Calendar 日历框</h3>

<h4>按照日历形式展示数据的容器。当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。</h4>

<Block Title="基础用法" Introduction="基础的日历显示。">
    <Calendar ValueChanged="@OnValueChanged" />
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="日历框选择时间时数据自动更新文本框">
    <Calendar @bind-Value="@BindValue" />
    <BootstrapInput TItem="DateTime" @bind-Value="@BindValue" Formatter="@Formatter" style="margin-top: 1rem;" />
</Block>

<Block Title="按周展示" Introduction="通过设置属性 <code></code>">
    <Calendar ViewModel="CalendarViewModel.Week" />
</Block>

<Block Title="实战应用" Introduction="课堂表">
    <p>目前按周内组件暂时为统一使用 <code>ChildContext</code> 来进行渲染,所有单元格内的数据相关操作组件均未进行封装,稍后完善</p>
    <Calendar ViewModel="CalendarViewModel.Week">
        <tr>
            <td class="none">无</td>
            <td rowspan="4"><div class="less ch">语文</div></td>
            <td>数学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td rowspan="3"><div class="less en">英语</div></td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td style="background-color: #f8f9fa;" colspan="7">午休</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
            <td>英语</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
        <tr>
            <td class="none">无</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td class="none">无</td>
        </tr>
    </Calendar>
</Block>

<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.Pages.Components;
using System;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Calendars
    {
        /// <summary>
        /// 
        /// </summary>
        private Logger? Trace { get; set; }

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

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

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

        /// <summary>
        /// 获得事件方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<EventItem> GetEvents() => new EventItem[]
        {
            new EventItem()
            {
                Name = "ValueChanged",
                Description="值改变时回调委托",
                Type ="EventCallback<DateTime>"
            }
        };

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Value",
                Description = "组件值",
                Type = "DateTime",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = "子组件",
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload