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/types';
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;
  year: string;
  month: string;
  day: string;
};

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

const holidayData: CalendarOriginMap = {
  '2026': {
    '01': [
      {
        id: 170,
        year: '2026',
        month: '01',
        day: '08',
        date: '2026-01-08',
        name: '三九天',
        lunarName: null,
        type: 'normal',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 171,
        year: '2026',
        month: '01',
        day: '17',
        date: '2026-01-17',
        name: '四九天',
        lunarName: null,
        type: 'weekend',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 172,
        year: '2026',
        month: '01',
        day: '26',
        date: '2026-01-26',
        name: '腊八节',
        lunarName: null,
        type: 'normal',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 174,
        year: '2026',
        month: '01',
        day: '01',
        date: '2026-01-01',
        name: '元旦节',
        lunarName: null,
        type: 'holiday',
        badgeText: '',
        tooltip: true,
        tooltipText: '元旦节快乐',
      },
      {
        id: 175,
        year: '2026',
        month: '01',
        day: '02',
        date: '2026-01-02',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 176,
        year: '2026',
        month: '01',
        day: '03',
        date: '2026-01-03',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
    ],
    '02': [
      {
        id: 173,
        year: '2026',
        month: '02',
        day: '02',
        date: '2026-02-02',
        name: '湿地日',
        lunarName: null,
        type: 'normal',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 177,
        year: '2026',
        month: '02',
        day: '14',
        date: '2026-02-14',
        name: '情人节',
        lunarName: '',
        type: 'workday',
        badgeText: '班',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 178,
        year: '2026',
        month: '02',
        day: '15',
        date: '2026-02-15',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 179,
        year: '2026',
        month: '02',
        day: '16',
        date: '2026-02-16',
        name: '除夕',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 180,
        year: '2026',
        month: '02',
        day: '17',
        date: '2026-02-17',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 181,
        year: '2026',
        month: '02',
        day: '18',
        date: '2026-02-18',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 182,
        year: '2026',
        month: '02',
        day: '19',
        date: '2026-02-19',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 183,
        year: '2026',
        month: '02',
        day: '20',
        date: '2026-02-20',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 184,
        year: '2026',
        month: '02',
        day: '21',
        date: '2026-02-21',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 185,
        year: '2026',
        month: '02',
        day: '22',
        date: '2026-02-22',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 186,
        year: '2026',
        month: '02',
        day: '23',
        date: '2026-02-23',
        name: '',
        lunarName: '',
        type: 'holiday',
        badgeText: '',
        tooltip: false,
        tooltipText: '',
      },
      {
        id: 187,
        year: '2026',
        month: '02',
        day: '28',
        date: '2026-02-28',
        name: '',
        lunarName: '',
        type: 'workday',
        badgeText: '班',
        tooltip: false,
        tooltipText: '',
      },
    ],
  },
};
</script>