Navegação
Calendário
Mês com escolha de intervalo: clique no início, passe o mouse pra ver o trecho e clique no fim.
Exemplo
<article class="u-card u-wall" data-wall="calendar">
<div class="u-panel"><div data-u="calendar" data-u-props='{"year": 2026, "month": 6, "start": [2026, 6, 7], "end": [2026, 6, 14]}'></div></div>
</article>Instalação
Calendário vem no pacote completo, em unslop.css e unslop.js:
curl -fsSL unslop.leallabs.dev/i | shUm bloco pronto que usa calendário:
curl -fsSL unslop.leallabs.dev/i | sh -s add wall-calendarSem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.
Props
Vão em data-u-props, como JSON.
| Prop | Tipo | Padrão | O que faz |
|---|---|---|---|
year | number | 2026 | Ano que abre. |
month | number | 6 | Mês que abre, contando de 0 (0 é janeiro, 6 é julho). |
start | [ano, mês, dia] | [2026, 6, 7] | Início do intervalo. Mês também conta de 0. |
end | [ano, mês, dia] | [2026, 6, 14] | Fim do intervalo. |
Acessibilidade e teclado
Estado e papéis
| Onde | Atributo | O que diz |
|---|---|---|
| grade | role="grid", role="columnheader", role="gridcell" | Dias são botões dentro da grade. |
| dias das pontas | aria-selected="true" | Início e fim do intervalo. |
| título do mês | aria-live="polite" | Anuncia o mês ao trocar. |
| setas do mês | aria-label | "Mês anterior" e "Próximo mês". |
Teclado
| Tecla | Faz |
|---|---|
| Tab | anda pelos dias e botões |
| Enter ou Espaço | escolhe o dia |
Eventos e API
| Evento | detail | Quando |
|---|---|---|
u:apply | { start: Date, end: Date } | Ao clicar em Aplicar com um intervalo escolhido. |
Todo evento sobe pela página (bubbles). Escute no próprio elemento: el.addEventListener("u:apply", (e) => e.detail).