TUI

<template>
  <div class="component-card-demo-wrap">
    <TsCalendar />
  </div>
</template>

<script setup lang="ts">
import { TsCalendar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsCalendar defaultValue="2025-10-01" shadow />
  </div>
</template>

<script setup lang="ts">
import { TsCalendar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsCalendar @change="handleChange" @onMonthChange="onMonthChange" />
    <BussinessCalendarMonthDetail :data="currentDayData" :monthDetail="currentMonthDetail" />
  </div>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { TsCalendar } from 'tui';
import { CalendarStatusEnum } from 'tui/components/calendar/src/enum';
import BussinessCalendarMonthDetail from '@/components/BussinessCalendarMonthDetail.vue';
import type { CalendarDay, MonthChangePayload } from 'tui/components/core/calendar/types';

interface CalendarMonthCount {
  restDayCount: number;
  workDayCount: number;
}

const currentMonthDetail = ref({}) as Ref<CalendarMonthCount>;
const currentDayData = ref({}) as Ref<CalendarDay>;

const handleChange = (data: CalendarDay) => {
  currentDayData.value = data;
};

const onMonthChange = ({ monthDays }: MonthChangePayload) => {
  const restDayCount = monthDays.reduce((acc, item) => {
    const isWeekend = [6, 7].includes(item.week);
    let value = 0;
    if (item.type === CalendarStatusEnum.Holiday) value = isWeekend ? 0 : 1;
    if (item.type === CalendarStatusEnum.Weekend) value = 1;
    if (item.type === CalendarStatusEnum.Workday && isWeekend) value = -1;
    return acc + value;
  }, 0);

  currentMonthDetail.value = {
    restDayCount,
    workDayCount: monthDays.length - restDayCount,
  };
};
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsCalendar :showTooltip="true">
      <template #tooltip>
        <div style="width: 180px; word-break: break-all">
          showTooltip 会显示每一天自定义悬浮提示内容，可以是任何内容，包括 HTML。
        </div>
      </template>
    </TsCalendar>
  </div>
</template>

<script setup lang="ts">
import { TsCalendar } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsCalendar :extensions="holidayData" />
  </div>
</template>

<script setup lang="ts">
import { TsCalendar } from 'tui';
import type { ExternalDay, Month } from 'tui/components/core/calendar/types';

type CalendarOriginDay = ExternalDay & {
  id: number;
};

interface CalendarOriginMap {
  [year: string]: {
    [month in Month]?: CalendarOriginDay[];
  };
}

const holidayData: CalendarOriginMap = {
  '2025': {
    '1': [
      {
        id: 1,
        date: '2025-01-01',
        name: '测试假日文案',
        type: 'holiday',
        badgeText: '休',
        tooltip: true,
        tooltipText: '这是一个用来展示的假日',
      },
    ],
  },
};
</script>