Calendar

Calendário standalone para seleção de datas. Suporta modos single, range e multi, visualização de dois meses, presets e marcação de eventos.

Uso

<script setup lang="ts">
import { Calendar } from '@halfbyte/maka'
import { ref } from 'vue'

const data = ref('')
</script>

<template>
  <Calendar v-model="data" />
</template>

Exemplos

Single (padrão)

<Calendar v-model="data" />

Range — dois meses

<Calendar v-model="range" mode="range" :number-of-months="2" />

Multi (seleção descontínua)

<Calendar v-model="dates" mode="multi" />

Com eventos

<Calendar v-model="data" :events="['2026-05-10', '2026-05-20']" />

Com datas desabilitadas

<!-- Array de strings -->
<Calendar :disabled-dates="['2024-12-25', '2024-12-26']" />

<!-- Ou função -->
<Calendar :disabled-dates="(d) => d.getDay() === 0" />

Min / Max

<Calendar v-model="data" min-date="2026-01-01" max-date="2026-12-31" />

Tamanhos

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

Cores

<Calendar color="blue" />
<Calendar color="lime" />
<Calendar color="black" />

Em superfície escura

<Calendar v-model="range" mode="range" :dark="true" />

Range com presets

<script setup lang="ts">
import { Calendar, type CalendarPreset } from '@halfbyte/maka'
import { ref } from 'vue'

const range = ref<string[]>([])
const t = () => new Date()

const presets: CalendarPreset[] = [
  { label: 'Hoje',           getValue: () => [t(), t()] },
  { label: 'Últimos 7 dias', getValue: () => [new Date(t().getTime() - 6 * 86400000), t()] },
  { label: 'Mês atual',      getValue: () => [new Date(t().getFullYear(), t().getMonth(), 1), new Date(t().getFullYear(), t().getMonth() + 1, 0)] },
  { label: 'Este trimestre', getValue: () => { const m = Math.floor(t().getMonth() / 3) * 3; return [new Date(t().getFullYear(), m, 1), new Date(t().getFullYear(), m + 3, 0)] } },
]
</script>

<template>
  <Calendar
    v-model="range"
    mode="range"
    :presets="presets"
  />
</template>

Props

Prop	Tipo	Padrão	Descrição
modelValue	string | string[]	—	Data(s) selecionada(s) em formato YYYY-MM-DD
mode	'single' | 'range' | 'multi'	'single'	Modo de seleção
size	'sm' | 'md' | 'lg'	'md'	Tamanho das células (32 / 40 / 52px)
color	'blue' | 'lime' | 'black'	'blue'	Cor do estado selecionado
dark	boolean	false	Ativa variante para fundo escuro (seleção muda para lime)
numberOfMonths	number	1	Quantidade de meses exibidos (use 2 para range)
minDate	string	—	Data mínima selecionável (YYYY-MM-DD)
maxDate	string	—	Data máxima selecionável (YYYY-MM-DD)
disabledDates	string[] | ((d: Date) => boolean)	—	Datas indisponíveis
events	string[]	—	Datas marcadas com ponto lime
showOutsideDays	boolean	true	Exibe dias do mês adjacente para completar 6 linhas
locale	string	'pt-BR'	Locale para formatação
presets	CalendarPreset[]	—	Atalhos de range (exibe painel no rodapé)
ariaLabel	string	'Calendário'	Label para role="application"

Eventos

Evento	Payload	Descrição
update:modelValue	string | string[]	Emitido ao selecionar. Single → string, range/multi → string[]
update:month	string	Emitido ao navegar entre meses

Tipo CalendarPreset

interface CalendarPreset {
  label:    string;
  getValue: () => [Date, Date];
}

Teclado

Tecla	Ação
← / →	Dia anterior / próximo
↑ / ↓	Semana anterior / próxima
Home	Primeiro dia da semana
End	Último dia da semana
PgUp	Mês anterior
PgDn	Próximo mês
Shift+PgUp	Ano anterior
Shift+PgDn	Próximo ano
Enter / Space	Seleciona o dia em foco
Esc	Fecha popover (DatePicker)

Acessibilidade

• role="application" no container com aria-label obrigatório
• role="grid" + aria-labelledby no grid de cada mês
• aria-current="date" no dia de hoje
• aria-selected e aria-disabled gerenciados automaticamente pelo Ark UI
• aria-live="polite" anuncia mudanças de mês para leitores de tela
• Roving tabindex: apenas um dia tem tabindex=0 por vez
• Respeita prefers-reduced-motion (sem animação de slide — apenas fade)

---

Date Picker

Input com calendário em popover para seleção de data. Suporta máscara DD/MM/AAAA, estados de erro, required e integração com formulários.

Uso

<script setup lang="ts">
import { DatePicker } from '@halfbyte/maka'
import { ref } from 'vue'

const data = ref('')
</script>

<template>
  <DatePicker v-model="data" label="Data" aria-label="Selecione uma data" />
</template>

Exemplos

Padrão

<DatePicker v-model="data" label="Padrão" aria-label="Data de nascimento" />

Com erro

<DatePicker
  v-model="data"
  label="Data de vencimento"
  error="Data inválida"
  aria-label="Data de vencimento"
/>

Required

<DatePicker v-model="data" label="Data" :required="true" aria-label="Data" />

Desabilitado

<DatePicker v-model="data" label="Data" :disabled="true" aria-label="Data" />

Com limites

<DatePicker
  v-model="data"
  label="Período"
  min-date="2026-01-01"
  max-date="2026-12-31"
  aria-label="Data dentro do período permitido"
/>

Props

Prop	Tipo	Padrão	Descrição
modelValue	string	—	Data em formato YYYY-MM-DD
label	string	—	Rótulo visível acima do input
placeholder	string	'DD/MM/AAAA'	Placeholder do input
format	string	'dd/MM/yyyy'	Formato de exibição (date-fns syntax)
required	boolean	false	Marca o campo como obrigatório
disabled	boolean	false	Desabilita o campo
error	string	—	Mensagem de erro exibida abaixo do input
minDate	string	—	Data mínima selecionável (YYYY-MM-DD)
maxDate	string	—	Data máxima selecionável (YYYY-MM-DD)
locale	string	'pt-BR'	Locale para formatação
name	string	—	Atributo name do input (formulários)
ariaLabel	string	—	aria-label do campo (obrigatório para a11y)

Eventos

Evento	Payload	Descrição
update:modelValue	string	Emitido ao selecionar a data (formato YYYY-MM-DD)

Acessibilidade

• ariaLabel é obrigatório para leitores de tela
• Teclado completo herdado do Calendar: setas, PgUp/Dn, Shift+PgUp/Dn
• Esc fecha o popover sem alterar o valor
• aria-invalid aplicado automaticamente quando error está preenchido