Calendar

import { useSyncExternalStore } from 'react';
import { Calendar } from '@fibrous/semi-ui-react';

const fixedDay = new Date(2019, 6, 23, 12);
const today = new Date();
const subscribe = () => () => {};

export default function CalendarDemo() {
    // The server and the browser may disagree on today, so the first frame shows a fixed day and moves to today
    // after hydration, where the current time line can show
    const displayValue = useSyncExternalStore(
        subscribe,
        () => today,
        () => fixedDay
    );
    return <Calendar mode="day" displayValue={displayValue} />;
}

import { useSyncExternalStore } from 'react';
import { Calendar } from '@fibrous/semi-ui-react';

const fixedDay = new Date(2019, 6, 23, 12);
const today = new Date();
const subscribe = () => () => {};

export default function CalendarDemo() {
    // The server and the browser may disagree on today, so the first frame shows a fixed week and moves to this week
    // after hydration, where the today marker and the current time line can show
    const displayValue = useSyncExternalStore(
        subscribe,
        () => today,
        () => fixedDay
    );
    return <Calendar mode="week" displayValue={displayValue} />;
}

import { Calendar } from '@fibrous/semi-ui-react';

const displayValue = new Date(2019, 6, 23);

export default function CalendarDemo() {
    return <Calendar mode="month" displayValue={displayValue} />;
}

import { useState } from 'react';
import { RadioGroup, Calendar, Radio, type CalendarProps } from '@fibrous/semi-ui-react';

const displayValue = new Date(2019, 6, 23);

export default function CalendarDemo() {
    const [v, setV] = useState<CalendarProps['weekStartsOn']>(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" displayValue={displayValue} weekStartsOn={v} />
        </div>
    );
}

import { Calendar } from '@fibrous/semi-ui-react';

export default function CalendarDemo() {
    return <Calendar mode="range" displayValue={new Date(2020, 8, 26)} range={[new Date(2020, 8, 26), new Date(2020, 8, 31)]} />;
}

import { useState, type CSSProperties } from 'react';
import { Calendar, DatePicker, RadioGroup, Radio, type CalendarProps, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function CalendarDemo() {
    const [mode, setMode] = useState<CalendarProps['mode']>('week');
    const [displayValue, setDisplayValue] = useState(new Date(2019, 6, 23, 8, 32, 0));

    const onSelect = (e: RadioChangeEvent) => {
        setMode(e.target.value);
    };

    const onChangeDate = (e: Date | Date[]) => {
        if (!Array.isArray(e)) setDisplayValue(e);
    };

    const isMonthView = mode === 'month';
    const dailyEventStyle: CSSProperties = {
        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: CSSProperties = {
        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={allDayStyle}>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={onSelect} 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={onChangeDate} />
            <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)] : []} />
        </>
    );
}

import type { CSSProperties } from 'react';
import { Calendar } from '@fibrous/semi-ui-react';

export default function CalendarDemo() {
    const dailyEventStyle: CSSProperties = {
        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?: string) => {
        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 type { CSSProperties } from 'react';
import { Calendar } from '@fibrous/semi-ui-react';

export default function CalendarDemo() {
    const importantDate: CSSProperties = {
        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?: string) => {
        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 { Avatar, Calendar } from '@fibrous/semi-ui-react';

export default function CalendarDemo() {
    const displayValue = new Date(2023, 4, 14);

    const renderDateDisplay = (date: Date) => {
        const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'lime'] as const;
        return (
            <div style={{ paddingBlock: 6 }}>
                <Avatar color={colors[date.getDay()]} size="small">
                    {date.getDate()}
                </Avatar>
            </div>
        );
    };

    return <Calendar height={400} mode="week" displayValue={displayValue} renderDateDisplay={renderDateDisplay} />;
}