GrCalendar

<script setup lang="ts">
import { ref } from 'vue'

// `GrCalendar` подставляется авто-импортом (`unplugin-vue-components`).
import type { PlainDate } from '@feugene/granularity-chrono'
import { plainDateKey } from '@feugene/granularity-chrono'

// Дата — кортеж `{ y, m, d }`, где `m` считается с нуля. Ни `Date`, ни
// таймзоны здесь нет: сетка про календарь, а не про момент времени.
const value = ref<PlainDate | null>({ y: 2026, m: 7, d: 12 })

const min: PlainDate = { y: 2026, m: 7, d: 3 }
const max: PlainDate = { y: 2026, m: 8, d: 18 }
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrCalendar
      v-model="value"
      :min="min"
      :max="max"
      show-week-numbers
      aria-label="Delivery date"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">value=</span>
      <code>{{ value ? plainDateKey(value) : '—' }}</code>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// `GrCalendar` подставляется авто-импортом (`unplugin-vue-components`).
import type { PlainDate } from '@feugene/granularity-chrono'
import { plainDateKey } from '@feugene/granularity-chrono'

const value = ref<PlainDate | null>(null)

/** Нагрузка дня: ключ `2026-08-12` совпадает с ключом ячейки сетки. */
const eventsByDay: Record<string, number> = {
  '2026-08-04': 1,
  '2026-08-12': 3,
  '2026-08-13': 2,
  '2026-08-21': 1,
}

function eventsOn(date: PlainDate): number {
  return eventsByDay[plainDateKey(date)] ?? 0
}
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrCalendar
      v-model="value"
      :view-date="{ y: 2026, m: 7, d: 1 }"
      aria-label="Schedule"
    >
      <!-- Слот отдаёт саму ячейку: число рисуем сами и дописываем метки. -->
      <template #day="{ cell, selected }">
        <span class="relative inline-flex flex-col items-center leading-none">
          <span>{{ cell.date.d }}</span>
          <span
            v-if="eventsOn(cell.date) && !selected"
            class="mt-0.5 h-1 w-1 rounded-[var(--gr-radius-full)] bg-[var(--gr-primary)]"
            :aria-label="`${eventsOn(cell.date)} events`"
          />
        </span>
      </template>
    </GrCalendar>

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">busy days=</span><code>{{ Object.keys(eventsByDay).length }}</code>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// `GrCalendar` и `GrSegmented` подставляются авто-импортом.
import type { PlainDate } from '@feugene/granularity-chrono'
import { plainDateKey } from '@feugene/granularity-chrono'

type CalendarMode = 'day' | 'week' | 'month' | 'quarter' | 'year'

const mode = ref<CalendarMode>('day')
// В режимах периода значением становится первое число: месяц — это 1 августа,
// квартал — 1 июля, год — 1 января. Неделя кладёт своё начало, и оно зависит
// от локали: у `en-US` неделя начинается с воскресенья. Показываем значение
// ISO-ключом — он не зависит от языка витрины, а сетка рядом и так показывает язык.
const value = ref<PlainDate | null>({ y: 2026, m: 7, d: 12 })

const modeOptions = [
  { value: 'day', label: 'Day' },
  { value: 'week', label: 'Week' },
  { value: 'month', label: 'Month' },
  { value: 'quarter', label: 'Quarter' },
  { value: 'year', label: 'Year' },
] satisfies Array<{ value: CalendarMode, label: string }>
</script>

<template>
  <div class="grid gap-4 justify-items-start">
    <GrSegmented v-model="mode" :options="modeOptions" size="sm" />

    <GrCalendar
      v-model="value"
      :mode="mode"
      aria-label="Reporting period"
    />

    <p class="showcase-demo-text text-sm">
      <span class="opacity-70">value=</span>
      <code>{{ value ? plainDateKey(value) : '—' }}</code>
    </p>

    <p class="showcase-demo-text text-sm opacity-70">
      Неделя рисуется той же сеткой дней: клик по любому дню выбирает его неделю, и подсвечивается
      вся строка. Двенадцать недель в сетке периодов были бы четвертью года без единой подписи
      месяца — выбирать там нечего. Кварталов четыре, и сетка у них в две колонки.
    </p>
  </div>
</template>