Bootstrap Blazor
下载
Bootstrap Blazor

Calendar 日历框

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

基础用法

基础的日历显示。

Demo
2021 January
SunMonTueWedThuFriSat
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
6
<Calendar ValueChanged="@OnValueChanged" />

数据双向绑定

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

Demo
2021 January
SunMonTueWedThuFriSat
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
6
<Calendar @bind-Value="@BindValue" />

按周展示

通过设置属性

Demo
2021 January 4 Weeks
Sun
17
Mon
18
Tue
19
Wed
20
Thu
21
Fri
22
Sat
23
 
<Calendar ViewModel="CalendarViewModel.Week" />

实战应用

课堂表

Demo

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

2021 January 4 Weeks
Sun
17
Mon
18
Tue
19
Wed
20
Thu
21
Fri
22
Sat
23
无
语文
 数学 语文 数学 英语 无
无 数学
英语
 数学 英语 无
无 数学 数学 英语 无
无 数学 数学 英语 无
午休
无 数学 语文 英语 数学 英语 无
无 自习 自习 自习 自习 自习 无
无 自习 自习 自习 自习 自习 无
<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>

Attributes 属性

事件 Events
An error has occurred. This application may no longer respond until reloaded. Reload