Calendar

<script setup lang="ts">
    import { Calendar } from '@fibrous/semi-ui-vue';

    // A fixed date keeps the server render and the browser on the same first frame
    const displayValue = new Date(2026, 9, 25);
</script>

<template>
    <Calendar :displayValue="displayValue" mode="day" />
</template>

<script setup lang="ts">
    import { Calendar } from '@fibrous/semi-ui-vue';

    // A fixed date keeps the server render and the browser on the same first frame
    const displayValue = new Date(2026, 9, 25);
</script>

<template>
    <Calendar :displayValue="displayValue" mode="week" />
</template>

<script setup lang="ts">
    import { Calendar } from '@fibrous/semi-ui-vue';

    // A fixed date keeps the server render and the browser on the same first frame
    const displayValue = new Date(2026, 9, 25);
</script>

<template>
    <Calendar :displayValue="displayValue" mode="month" />
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Calendar, Radio, RadioGroup, type CalendarWeekStartsOn, type RadioValue } from '@fibrous/semi-ui-vue';

    const weekStartsOn = ref<RadioValue | undefined>(0);
    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    // A fixed date keeps the server render and the browser on the same first frame
    const displayValue = new Date(2026, 9, 25);
</script>

<template>
    <div>
        <RadioGroup v-model="weekStartsOn" aria-label="周起始日" name="demo-radio-group-vertical" type="button">
            <Radio v-for="(day, index) in days" :key="day" :value="index">{{ day }}</Radio>
        </RadioGroup>
        <Calendar :displayValue="displayValue" mode="month" :style="{ marginTop: '20px' }" :weekStartsOn="weekStartsOn as CalendarWeekStartsOn" />
    </div>
</template>

<script setup lang="ts">
    import { Calendar } from '@fibrous/semi-ui-vue';

    const range = [new Date(2020, 8, 26), new Date(2020, 8, 31)];
</script>

<template>
    <Calendar mode="range" :range="range" />
</template>

<script setup lang="ts">
    import { computed, ref, type CSSProperties } from 'vue';
    import { Calendar, DatePicker, Radio, RadioGroup, type CalendarEventObject, type CalendarMode, type RadioValue } from '@fibrous/semi-ui-vue';

    const mode = ref<RadioValue | undefined>('week');
    const displayValue = ref<Date | undefined>(new Date(2019, 6, 23, 8, 32, 0));

    const onChangeDate = (value: Date | Date[] | undefined) => {
        if (!Array.isArray(value)) displayValue.value = value;
    };

    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',
    };
    // `daily` marks the events that keep the padded style outside the month view; any extra key is passed to #event.
    const events: CalendarEventObject[] = [
        {
            key: '0',
            start: new Date(2019, 5, 25, 14, 45, 0),
            end: new Date(2019, 6, 26, 6, 18, 0),
            children: '6月25日 14:45 ~ 7月26日 6:18',
        },
        {
            key: '1',
            start: new Date(2019, 6, 18, 10, 0, 0),
            end: new Date(2019, 6, 30, 8, 0, 0),
            children: '7月18日 10:00 ~ 7月30日 8:00',
        },
        {
            key: '2',
            start: new Date(2019, 6, 19, 20, 0, 0),
            end: new Date(2019, 6, 23, 14, 0, 0),
            children: '7月19日 20:00 ~ 7月23日 14:00',
        },
        {
            key: '3',
            start: new Date(2019, 6, 21, 6, 0, 0),
            end: new Date(2019, 6, 25, 6, 0, 0),
            children: '7月21日 6:00 ~ 7月25日 6:00',
        },
        { key: '4', allDay: true, start: new Date(2019, 6, 22, 8, 0, 0), children: '7月22日 全天' },
        {
            key: '5',
            start: new Date(2019, 6, 22, 9, 0, 0),
            end: new Date(2019, 6, 23, 23, 0, 0),
            children: '7月22日 9:00 ~ 7月23日 23:00',
        },
        {
            key: '6',
            daily: true,
            start: new Date(2019, 6, 23, 8, 32, 0),
            end: new Date(2019, 6, 23, 8, 42, 0),
            children: '7月23日 8:32',
        },
        {
            key: '7',
            daily: true,
            start: new Date(2019, 6, 23, 14, 30, 0),
            end: new Date(2019, 6, 23, 20, 0, 0),
            children: '7月23日 14:30-20:00',
        },
        {
            key: '8',
            start: new Date(2019, 6, 25, 8, 0, 0),
            end: new Date(2019, 6, 27, 6, 0, 0),
            children: '7月25日 8:00 ~ 7月27日 6:00',
        },
        {
            key: '9',
            start: new Date(2019, 6, 26, 10, 0, 0),
            end: new Date(2019, 6, 27, 16, 0, 0),
            children: '7月26日 10:00 ~ 7月27日 16:00',
        },
    ];
    const range = computed(() => (mode.value === 'range' ? [new Date(2019, 6, 23), new Date(2019, 6, 26)] : []));
</script>

<template>
    <RadioGroup v-model="mode" type="button">
        <Radio value="day">日视图</Radio>
        <Radio value="week">周视图</Radio>
        <Radio value="month">月视图</Radio>
        <Radio value="range">多日视图</Radio>
    </RadioGroup>
    <br />
    <br />
    <DatePicker :modelValue="displayValue" @update:modelValue="onChangeDate" />
    <br />
    <br />
    <Calendar :displayValue="displayValue" :events="events" :height="400" :minEventHeight="40" :mode="mode as CalendarMode" :range="range">
        <template #event="{ event }">
            <div :style="event.daily && mode !== 'month' ? dailyEventStyle : allDayStyle">{{ event.children }}</div>
        </template>
    </Calendar>
</template>

<script setup lang="ts">
    import type { CSSProperties } from 'vue';
    import { Calendar } from '@fibrous/semi-ui-vue';

    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 targetDateString = new Date(2019, 6, 23).toString();
</script>

<template>
    <Calendar :displayValue="displayValue" :height="700" mode="week">
        <template #dateGrid="{ dateString }">
            <template v-if="dateString === targetDateString">
                <div :style="{ ...dailyEventStyle, top: '500px', height: '50px' }">吃饭 🍰</div>
                <div :style="{ ...dailyEventStyle, top: '0', height: '400px' }">睡觉 😪</div>
                <div :style="{ ...dailyEventStyle, top: '700px', height: '100px' }">打豆豆 🎮</div>
            </template>
        </template>
    </Calendar>
</template>

<script setup lang="ts">
    import type { CSSProperties } from 'vue';
    import { Calendar } from '@fibrous/semi-ui-vue';

    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 importDateStrings = importDates.map((date) => date.toString());
</script>

<template>
    <Calendar :displayValue="displayValue" :height="700" mode="month">
        <template #dateGrid="{ dateString }">
            <div v-if="importDateStrings.includes(dateString)" :style="importantDate" />
        </template>
    </Calendar>
</template>

<script setup lang="ts">
    import { Avatar, Calendar } from '@fibrous/semi-ui-vue';

    const displayValue = new Date(2023, 4, 14);
    const colors = ['amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'lime'] as const;
</script>

<template>
    <Calendar :displayValue="displayValue" :height="400" mode="week">
        <template #dateDisplay="{ date }">
            <div :style="{ paddingBlock: '6px' }">
                <Avatar :color="colors[date.getDay()]" size="small">{{ date.getDate() }}</Avatar>
            </div>
        </template>
    </Calendar>
</template>