import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => <Calendar mode="day"></Calendar>;

import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => <Calendar mode="week"></Calendar>;

import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => <Calendar mode="month"></Calendar>;

import React, { useState } from 'react'; import { RadioGroup, Calendar, Radio } from '@douyinfe/semi-ui'; () => { const [v, setV] = useState(0); return ( <div> <RadioGroup defaultValue={v} aria-label="周起始日" type="button" name="demo-radio-group-vertical" onChange={e => setV(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: 20 }} mode="month" weekStartsOn={v} ></Calendar> </div> ); };

import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => <Calendar mode="range" range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]} />;

import React from 'react'; import { Calendar, DatePicker, RadioGroup, Radio } from '@douyinfe/semi-ui'; class Demo extends React.Component { constructor() { super(); this.state = { mode: 'week', displayValue: new Date(2019, 6, 23, 8, 32, 0), }; } onSelect(e) { this.setState({ mode: e.target.value, }); } onChangeDate(e) { this.setState({ displayValue: e, }); } render() { const { mode, displayValue } = this.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', backgroundColor: 'var(--semi-color-primary-light-active)', height: '100%', overflow: 'hidden', }; const dailyStyle = isMonthView ? allDayStyle : dailyEventStyle; const events = [ { key: '0', start: new Date(2019, 5, 25, 14, 45, 0), end: new Date(2019, 6, 26, 6, 18, 0), children: <div style={dailyStyle}>6月25日 14:45 ~ 7月26日 6:18</div>, }, { key: '1', start: new Date(2019, 6, 18, 10, 0, 0), end: new Date(2019, 6, 30, 8, 0, 0), children: <div style={allDayStyle}>7月18日 10:00 ~ 7月30日 8:00</div>, }, { key: '2', start: new Date(2019, 6, 19, 20, 0, 0), end: new Date(2019, 6, 23, 14, 0, 0), children: <div style={allDayStyle}>7月19日 20:00 ~ 7月23日 14:00</div>, }, { key: '3', start: new Date(2019, 6, 21, 6, 0, 0), end: new Date(2019, 6, 25, 6, 0, 0), children: <div style={allDayStyle}>7月21日 6:00 ~ 7月25日 6:00</div>, }, { key: '4', allDay: true, start: new Date(2019, 6, 22, 8, 0, 0), children: <div style={allDayStyle}>7月22日 全天</div>, }, { key: '5', start: new Date(2019, 6, 22, 9, 0, 0), end: new Date(2019, 6, 23, 23, 0, 0), children: <div style={allDayStyle}>7月22日 9:00 ~ 7月23日 23:00</div>, }, { key: '6', start: new Date(2019, 6, 23, 8, 32, 0), end: new Date(2019, 6, 23, 8, 42, 0), children: <div style={dailyStyle}>7月23日 8:32</div>, }, { key: '7', start: new Date(2019, 6, 23, 14, 30, 0), end: new Date(2019, 6, 23, 20, 0, 0), children: <div style={dailyStyle}>7月23日 14:30-20:00</div>, }, { key: '8', start: new Date(2019, 6, 25, 8, 0, 0), end: new Date(2019, 6, 27, 6, 0, 0), children: <div style={allDayStyle}>7月25日 8:00 ~ 7月27日 6:00</div>, }, { key: '9', start: new Date(2019, 6, 26, 10, 0, 0), end: new Date(2019, 6, 27, 16, 0, 0), children: <div style={allDayStyle}>7月26日 10:00 ~ 7月27日 16:00</div>, }, ]; return ( <> <RadioGroup onChange={e => this.onSelect(e)} value={mode} type="button"> <Radio value={'day'}>日视图</Radio> <Radio value={'week'}>周视图</Radio> <Radio value={'month'}>月视图</Radio> <Radio value={'range'}>多日视图</Radio> </RadioGroup> <br /> <br /> <DatePicker value={displayValue} onChange={e => this.onChangeDate(e)} /> <br /> <br /> <Calendar height={400} mode={mode} displayValue={displayValue} events={events} minEventHeight={40} range={mode === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []} ></Calendar> </> ); } }

import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => { 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; } }; return <Calendar height={700} mode="week" displayValue={displayValue} dateGridRender={dateRender} />; };

import React from 'react'; import { Calendar } from '@douyinfe/semi-ui'; () => { 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} />; };

import React from 'react'; import { Avatar, Calendar } from '@douyinfe/semi-ui'; () => { 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} />; };