Calendar

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  let value = $state(today(getLocalTimeZone()));
</script>

<Calendar bind:value />

<Calendar variant="solid" />
<Calendar variant="outline" />
<Calendar variant="soft" />
<Calendar variant="subtle" />

<Calendar size="xs" />
<Calendar size="sm" />
<Calendar size="md" />
<Calendar size="lg" />
<Calendar size="xl" />

<Calendar color="primary" />
<Calendar color="secondary" />
<Calendar color="tertiary" />
<Calendar color="success" />
<Calendar color="warning" />
<Calendar color="error" />
<Calendar color="info" />
<Calendar color="surface" />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let values = $state<DateValue[]>([]);
</script>

<Calendar type="multiple" bind:value={values} />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let values = $state<DateValue[]>([]);
</script>

<!-- Cap the selection to 5 dates -->
<Calendar type="multiple" maxDays={5} bind:value={values} />
<p>Selected: {values.length} / 5 date(s)</p>

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';
  import type { DateValue } from '@internationalized/date';

  let value = $state<DateValue | undefined>(undefined);

  const now = today(getLocalTimeZone());
  const holidays = [
    now.add({ days: 3 }),
    now.add({ days: 7 }),
    now.add({ days: 10 }),
    now.add({ days: 18 })
  ];

  // Predicate runs for every visible cell - keep it cheap and pure.
  const isHoliday = (date: DateValue) =>
    holidays.some((h) => h.compare(date) === 0);
</script>

<Calendar bind:value isDateHighlightable={isHoliday} />

<!-- Marked cells get a data-marked attribute, which the default theme
     renders as a small dot indicator. Override via the cellTrigger slot
     or ui.cellTrigger using the data-[marked]: modifier. -->

<Calendar numberOfMonths={2} />

<script lang="ts">
  import { Calendar } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';

  const now = today(getLocalTimeZone());
</script>

<Calendar
  minValue={now}
  maxValue={now.add({ days: 14 })}
/>

<Calendar weekNumbers />

<script lang="ts">
  import { Calendar, FormField } from 'sv5ui';
  import { today, getLocalTimeZone } from '@internationalized/date';
  import type { DateValue } from '@internationalized/date';

  let value = $state<DateValue | undefined>(undefined);
  const now = today(getLocalTimeZone());
  const error = $derived(value ? '' : 'Please pick a date');
</script>

<FormField
  label="Appointment date"
  hint="Required"
  required
  help="Pick any future date"
  {error}
>
  <Calendar bind:value minValue={now} />
</FormField>

<!-- When error is set, the Calendar:
     - switches to the error color
     - aria-describedby points to FormField's description + error text
     - focus/blur/change events emit to the parent <Form> -->

<script lang="ts">
  import { Calendar, Popover, Button } from 'sv5ui';
  import type { DateValue } from '@internationalized/date';

  let value = $state<DateValue | undefined>(undefined);
  let open = $state(false);
  let display = $derived(value ? value.toString() : '');
</script>

<Popover bind:open>
  <Button
    variant="outline"
    color="surface"
    leadingIcon="lucide:calendar"
    label={display || 'Pick a date'}
  />
  {#snippet content()}
    <div class="p-3">
      <Calendar
        bind:value
        onValueChange={() => open = false}
        size="sm"
      />
    </div>
  {/snippet}
</Popover>