Calendar 日历 | semi-design-vue

代码演示

如何引入

jsx

import { Calendar } from '@kousum/semi-ui-vue';

日视图

日视图的日历模板，可通过 showCurrTime 控制是否显示当前时间的位置红线。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => <Calendar mode="day"></Calendar>;

Show Error

Auto Save

周视图

周视图的日历模板，可通过 showCurrTime 控制是否显示当前时间的位置红线。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => <Calendar mode="week"></Calendar>;

Show Error

Auto Save

月视图

月视图的日历模板。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => <Calendar mode="month"></Calendar>;

Show Error

Auto Save

设置周起始日

可以通过 weekStartsOn 设置周几作为每周第一天，0 代表周日，1 代表周一，以此类推。默认为周日。weekStartsOn 自 v2.18 起提供，对月视图、周视图生效。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { RadioGroup, Calendar, Radio } from '@kousum/semi-ui-vue';
import { defineComponent, ref } from 'vue';
​
const Demo = defineComponent(() => {
​
  const v = ref(0);
  return () => (
    <div>
      <RadioGroup defaultValue={v.value} aria-label="周起始日" type="button" name="demo-radio-group-vertical"
                  onChange={e => v.value = (e.target.value)}>
        <Radio value={0}>周日</Radio>
        <Radio value={1}>周一</Radio>
        <Radio value={2}>周二</Radio>
        <Radio value={3}>周三</Radio>
        <Radio value={4}>周四</Radio>
        <Radio value={5}>周五</Radio>
        <Radio value={6}>周六</Radio>
      </RadioGroup>
      <Calendar
        style={{ marginTop: '20px' }}
        mode="month"
        weekStartsOn={v.value}
      ></Calendar>
    </div>
  );
})
export default Demo

Show Error

Auto Save

多日视图

>=1.5.0
多日视图模式。 range 必传，左闭右开。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => <Calendar mode="range" range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]} />;

Show Error

Auto Save

事件渲染用法

通过 events 传入需要渲染的事件，events 是一个由 event objects 组成的数组，具体形式请参考 events API。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar, DatePicker, RadioGroup, Radio } from '@kousum/semi-ui-vue';
import { defineComponent, reactive } from 'vue';
​
​
const Demo = defineComponent(() => {
​
  const state = reactive({
    mode: 'week',
    displayValue: new Date(2019, 6, 23, 8, 32, 0),
  });
​
  function onSelect(e) {
    state.mode = e.target.value
​
  }
​
  function onChangeDate(e) {
    state.displayValue = e
  }
​
  return () => {
​
    const { mode, displayValue } = state;
    const isMonthView = mode === 'month';
    const dailyEventStyle = {
      borderRadius: '3px',
      boxSizing: 'border-box',
      border: 'var(--semi-color-primary) 1px solid',
      padding: '10px',
      backgroundColor: 'var(--semi-color-primary-light-default)',
      height: '100%',
      overflow: 'hidden',
    };
    const allDayStyle = {
      borderRadius: '3px',
      boxSizing: 'border-box',
      border: 'var(--semi-color-bg-1) 1px solid',
      padding: '2px 4px',

Show Error

Auto Save

自定义渲染

通过 dateGridRender 可以自定义渲染日期单元格/列。需要使用绝对定位。

自定义渲染事件

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => {
    const dailyEventStyle = {
        position: 'absolute',
        left: '0',
        right: '0',
        borderRadius: '3px',
        boxSizing: 'border-box',
        border: 'var(--semi-color-primary) 1px solid',
        padding: '10px',
        backgroundColor: 'var(--semi-color-primary-light-default)',
        overflow: 'hidden',
    };
    const displayValue = new Date(2019, 6, 23, 8, 32, 0);
    const dateRender = dateString => {
        if (dateString === new Date(2019, 6, 23).toString()) {
            return (
                <>
                    <div style={{ ...dailyEventStyle, top: '500px', height: 50 }}>吃饭 🍰</div>
                    <div style={{ ...dailyEventStyle, top: '0', height: 400 }}>睡觉 😪</div>
                    <div style={{ ...dailyEventStyle, top: '700px', height: 100 }}>打豆豆 🎮</div>
                </>
            );
        } else {
            return null;
        }
    };

Show Error

Auto Save

自定义渲染单元格样式

可以通过 dateGridRender 自定义单元格的背景，月视图的文字 zIndex 默认为 3，如需完全覆盖单元格可以设置更大的 zIndex 来实现。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Calendar } from '@kousum/semi-ui-vue';
​
export default () => {
    const importantDate = {
        position: 'absolute',
        left: '0',
        right: '0',
        top: '0',
        bottom: '0',
        backgroundColor: 'var(--semi-color-danger-light-default)',
    };
    const displayValue = new Date(2019, 6, 23, 8, 32, 0);
    const importDates = [new Date(2019, 6, 2), new Date(2019, 6, 8), new Date(2019, 6, 19), new Date(2019, 6, 23)];
    const dateRender = dateString => {
        if (importDates.filter(date => date.toString() === dateString).length) {
            return <div style={importantDate} />;
        }
        return null;
    };
    return <Calendar height={700} mode="month" displayValue={displayValue} dateGridRender={dateRender} />;
};

Show Error

Auto Save

自定义日期文案

可以通过 renderDateDisplay 自定义日期文案。

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx
 
import { Avatar, Calendar } from '@kousum/semi-ui-vue';
​
export default () => {
    const displayValue = new Date(2023, 4, 14);
​
    const renderDateDisplay = date => {
        const colors = ["amber", "blue", "cyan", "green", "grey", "indigo", "lime"];
        return <div><Avatar color={colors[date.getDay()]} size="small">{date.getDate()}</Avatar></div>;
    };
​
    return <Calendar height={400} mode="week" displayValue={displayValue} renderDateDisplay={renderDateDisplay} />;
};

Show Error

Auto Save

API 参考

Calendar

属性	说明	类型	默认值
dateGridRender	自定义单元格/列渲染，需要绝对定位, v>=1.0.0	function(dateString: string, date: Date)	-
allDayEventsRender	自定义日/多日/周视图下的顶部事件渲染	function(events: EventObject[]): ReactNode	-
displayValue	展示日期	Date	当前日期
events	渲染事件，具体格式请参考 event object	EventObject[]	-
header	自定义头部内容	ReactNode	-
height	日历高度	string\|number	600
markWeekend	区分周末列和工作日，以灰色显示	boolean	false
minEventHeight	日视图、多日视图以及周视图下事件的最小高度(>=2.49.0)	number	Number.MIN_SAFE_INTEGER
mode	初始模式，`day`, `week`, `month`, `range`(>=1.5.0)	"day" \| "week" \| "month" \| "range"	`week`
onClick	单击日期格的回调，日视图和周视图以半小时为单位，月视图以日为单位	function(e: Event, date: Date）	-
onClose	月视图下，展示所有 event 的卡片关闭时的回调	function(e: Event）	-
range	多日视图模式下展示的日期范围，左闭右开 v>=1.5.0	Date[]	-
renderTimeDisplay	自定义日/周视图下的时间文案	function(time: number): ReactNode	-
renderDateDisplay	自定义日期文案	function(date: Date): ReactNode	-
scrollTop	日视图和周视图模式下，设置展示内容默认的滚动高度	number	400
showCurrTime	显示当前时间	boolean	true
width	日历宽度	string\|number	-
weekStartsOn	以周几作为每周第一天，0 代表周日，1 代表周一，以此类推。v2.18后支持	number	0

Event Object

events 是一个 event object 组成的数组，event object 约定格式如下：
当事件为全天事件时，若没有传入起始结束时间，则自动追加到 displayValue 的日期中；当事件不是全天事件时，起始结束时间至少传入一个才会被视为有效事件

注意

不同 event 的 key 值要求必填且唯一，以此控制事件的更新与重绘。

属性	说明	类型	默认值
allDay	全天事件	boolean	false
children	展示日期	React.node	-
end	事情结束的时间	Date	-
key	required 且要求唯一, v>=1.0.0	string	-
start	事情起始的时间	Date	-

文案规范

当需要显示时间时，12 小时制和 24 小时制都是可以使用的
如果采用12小时制，需要搭配 AM/PM 一起使用，具体内容可参考时间规范
关于月份、星期、时间的缩写使用规则，可参考缩写规范

设计变量

color

width

height

spacing

radius

font

other

变量	默认值	用法
$color-calendar-bg-active	var(--semi-color-primary)	今日标识颜色
$color-calendar-bg	var(--semi-color-bg-2)	日历背景颜色
$color-calendar-text-active	var(--semi-color-bg-1)	日历文字颜色 - 今日
$color-calendar_curr-bg	var(--semi-color-danger)	当前时间标识线颜色
$color-calendar_curr-border	var(--semi-color-danger)	当前时间标识线颜色
$color-calendar_currCircle-bg-default	var(--semi-color-danger)	当前时间标识原点颜色
$color-calendar_date-text-default	var(--semi-color-text-0)	日历文字颜色 - 当月
$color-calendar_day-border	var(--semi-color-border)	日历描边颜色
$color-calendar_day-text-default	var(--semi-color-text-2)	日历文字颜色 - 非当月
$color-calendar_sticky-bg	var(--semi-color-bg-2)	日历背景颜色 - 吸顶部分

显示第 1 条-第 10 条，共 11 条

变量	默认值	用法
$width-calendar_day	70px
$width-calendar_day-minWidth	70px
$width-calendar_day_grid	130px
$width-calendar_day_grid-minWidth	130px
$width-calendar_currCircle	8px
$width-calendar_tag_col	70px
$width-calendar_tag_col-minWidth	70px
$width-calendar_card	220px
$width-calendar_today_date	24px
$width-calendar-border-default	1px

显示第 1 条-第 10 条，共 11 条

变量	默认值	用法
$height-calendar_day_grid	60px
$height-calendar_time_grid	$height-calendar_day_grid * 0.5
$height-calendar_allDay	26px
$height-calendar_allDay-minHeight	26px
$height-calendar_day_allDay	26px
$height-calendar_month	100%
$height-calendar_month_day	24px
$height-calendar_month_week_skeletion	100%
$height-calendar_month_grid_wrapper	calc(100% - 27px)
$height-calendar_day_gridTime	$height-calendar_day_grid * 0.5

显示第 1 条-第 10 条，共 17 条

变量	默认值	用法
$spacing-calendar_ul_li-padding	0
$spacing-calendar_ul_li-margin	0
$spacing-calendar_sticky_top-top	0
$spacing-calendar_sticky_top-right	0
$spacing-calendar_sticky_top-left	0
$spacing-calendar_sticky_left-left	0
$spacing-calendar_event_day-left	0
$spacing-calendar_event_day-right	0
$spacing-calendar_custom_container-top	0
$spacing-calendar_custom_container-right	0

显示第 1 条-第 10 条，共 43 条

变量	默认值	用法
$radius-calendar_currCircle	var(--semi-border-radius-circle)	日历选中日期标识圆角
$radius-calendar_today_date	var(--semi-border-radius-circle)	日历选中日期标识圆角

显示第 1 条-第 2 条，共 2 条

变量	默认值	用法
$font-calendar_allDay_tag-lineHeight	$height-calendar_allDay	日历全天标识文字行高
$font-calendar_today_date-lineHeight	24px
$font-calendar_day_allDay-lineHeight	26px
$font-calendar_day_allDay-fontSize	26px
$font-calendar_month_day-fontSize	24px

显示第 1 条-第 5 条，共 5 条

变量	默认值	用法
$z-calendar_stickyTop	20
$z-calendar_item	5
$z-calendar_stickyLeft	10
$z-calendar_curr	8
$z-calendar_line	3

代码演示 ​

如何引入 ​

日视图 ​

周视图 ​

月视图 ​

设置周起始日 ​

多日视图 ​

事件渲染用法 ​

自定义渲染 ​

自定义渲染事件 ​

自定义渲染单元格样式 ​

自定义日期文案 ​

API 参考 ​

Calendar ​

Event Object ​

文案规范 ​

设计变量 ​

代码演示

如何引入

日视图

周视图

月视图

设置周起始日

多日视图

事件渲染用法

自定义渲染

自定义渲染事件

自定义渲染单元格样式

自定义日期文案

API 参考

Calendar

Event Object

文案规范

设计变量