TUI

<template>
  <TsCalendar />
</template>

<template>
  <TsCalendar defaultActiveDay="7" shadow />
</template>

<template>
  <TsCalendar @change="handleChange" @onMonthChange="onMonthChange" />
  <BussinessCalendarMonthDetail :data="currentDayData" :monthDetail="currentMonthDetail" />
</template>

<script setup lang="ts">
  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>
  <TsCalendar :showTooltip="true">
    <template #tooltip>
      <div class="calendar-tip-content">showTooltip 会显示每一天自定义悬浮提示内容，可以是任何内容，包括 HTML。</div>
    </template>
  </TsCalendar>
</template>

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