TUI

<template>
  <TsCalendar />
</template>

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

<template>
  <TsCalendar @change="onChange" @onChangeMonth="onChangeMonth" />
  <BussinessCalendarMonthDetail :data="currentDayData" :monthDetail="currentMonthDetail" />
</template>

<script setup>
  const currentMonthDetail = ref({}) as Ref<CalendarMonthDetail>;
  const currentDayData = ref({}) as Ref<CalendarItem>;

  const onChange = (data: CalendarItem) => {
    currentDayData.value = data;
  };
  const onChangeMonth = (data: CalendarMonthDetail) => {
    currentMonthDetail.value = data;
  };
</script>

<template>
  <TsCalendar :showTooltip="true">
    <template #tooltip="{ item }">
      <div class="calendar-tip-content">showTooltip 会显示每一天自定义悬浮提示内容，可以是任何内容，包括 HTML。</div>
    </template>
  </TsCalendar>
</template>

<template>
  <TsCalendar :yearlyHolidays="holidayData" />
</template>
<script setup lang="ts">
  const holidayData: YearHolidayByMonth = {
    '2025': {
      '1': [
        {
          id: 1,
          year: '2025',
          month: '1',
          day: 1,
          name: '元旦',
          status: 1,
          statusName: '休',
          enableTip: true,
          content: '元旦放假',
        },
        {
          id: 2,
          year: '2025',
          month: '1',
          day: 5,
          name: '',
          status: 2,
          statusName: '班',
          enableTip: false,
          content: '',
        },
      ],
      '10':[
        {
          id: 11,
          year: '2025',
          month: '1',
          day: 1,
          name: '国庆',
          status: 1,
          statusName: '休',
          enableTip: false,
          content: '',
        },
      ]
    },
  };
</script>