Calendar 日历

示例

基础用法

<Calendar />

周一为起始日

<Calendar weekStartsOn="monday" />

单选

<Calendar mode="single" />

范围选择

<Calendar mode="range" />

限制范围

<Calendar
  mode="range"
  min={dayjs().add(-1, 'year').toDate()}
  max={dayjs().add(1, 'year').toDate()}
/>

自定义

<Calendar mode="single">
  {#snippet header(year, month, add)}
    <div class="flex items-center justify-stretch">
      <Button
        class="h-auto p-2 text-sm text-blue-800"
        color="text"
        onclick={() => add(-1, 'year')}>上一年</Button
      >
      <Button
        class="h-auto p-2 text-sm text-blue-600"
        color="text"
        onclick={() => add(-1, 'month')}>上一月</Button
      >
      <span class="flex-1 text-center">{year}-{month + 1}</span>
      <Button
        class="h-auto p-2 text-sm text-blue-600"
        color="text"
        onclick={() => add(1, 'month')}>下一月</Button
      >
      <Button
        class="h-auto p-2 text-sm text-blue-800"
        color="text"
        onclick={() => add(1, 'year')}>下一年</Button
      >
    </div>
  {/snippet}
  {#snippet cell(date: Date)}
    <div class="flex flex-col items-center">
      <span>
        {date.getDate()}
      </span>
      <span class="text-xs">
        {#if dayjs().isSame(date, 'day')}
          今天
        {:else if dayjs(date).day() === 0}
          周日
        {:else if dayjs(date).day() === 6}
          周六
        {:else}
          &nbsp;
        {/if}
      </span>
    </div>
  {/snippet}
</Calendar>

Calendar

属性

类型定义

CalendarValue

/** mode = 'single' */
type CalendarSingleValue = Date | undefined
/** mode = 'range' */
type CalendarRangeValue = [begin?: Date, end?: Date]
/** CalendarValue */
type CalendarValue = CalendarSingleValue | CalendarRangeValue

CalendarHeader

// CalendarHeader
Snippet<
  [
    /** 年 */
    year: number,
    /** 月 */
    month: number,
    /** 增加 */
    add: (value: number, unit: 'year' | 'month') => void,
    /** 判定按钮是否禁用 */
    isDisabled: (
      button: 'prev-year' | 'prev-month' | 'next-month' | 'next-year'
    ) => boolean,
  ]
>

事件