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 type="button" defaultValue={v} aria-label="StartOfWeek" name="demo-radio-group-vertical" onChange={e => setV(e.target.value)}> <Radio value={0}>Sunday</Radio> <Radio value={1}>Mon</Radio> <Radio value={2}>Tue</Radio> <Radio value={3}>Wed</Radio> <Radio value={4}>Thu</Radio> <Radio value={5}>Fri</Radio> <Radio value={6}>Sat</Radio> </RadioGroup> <Calendar 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}>June 25th 14:45 ~ July 26th 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}>July 18th 10:00 ~ July 30th 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}>July 19th 20:00 ~ July 23rd 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}>July 21st 6:00 ~ July 25th 6:00</div>, }, { key: '4', allDay: true, start: new Date(2019, 6, 22, 8, 0, 0), children: <div style={allDayStyle}>July 22 full day</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}>July 22nd 9:00 ~ July 23rd 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}>July 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}>July 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}>July 25th 8:00 ~ July 27th 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}>July 26th 10:00 ~ July 27th 16:00</div>, }, ]; return ( <> <RadioGroup onChange={e => this.onSelect(e)} value={mode} type="button"> <Radio value={'day'}>Day view</Radio> <Radio value={'week'}>Week view</Radio> <Radio value={'month'}>Month view</Radio> <Radio value={'range'}>Multi-day view</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 }}>Eating 🍰</div> <div style={{ ...dailyEventStyle, top: '0', height: 400 }}>Sleeping 😪</div> <div style={{ ...dailyEventStyle, top: '700px', height: 100 }}>Playstation 🎮</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} />; };