LxCalendar

Visão geral

O componente LxCalendar permite exibir um calendário interativo com suporte a seleção de datas, visualização por semana ou mês, e diversas opções de personalização. Quando o mesmo é montado, ele emite o @getDays que pode ser usado para disparar a chamada da API para popular os dias a partir do período selecionado. Esse mesmo evento é disparado quando a seleção de semana muda, permitindo buscar novamente para uma busca mais precisa.

Dom

Seg

Ter

Qua

Qui

Sex

Sáb

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxCalendar } from '@lde/lxcomponents';

const selected = ref(null);
</script>

<template>
	<LxCalendar id="lx-calendar" v-model="selected" selectable>
		<!-- Slots possíveis: -->
		<!-- <template #header>header</template> -->
		<!-- O slot day irá se repetir por todos os dias e seu conteúdo pode se basear pela date enviada de dentro do LxCalendar -->
		<!-- <template #day="{ date }">
			<div class="d-flex flex-column gap-1">Conteúdo do dia {{ date.getDate() }}</div>
		</template> -->
		<!-- <template #footer>footer</template> -->
	</LxCalendar>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	⚠️ obrigatório Identificador único do calendário.	String	lx-calendar
modelValue	Data selecionada no calendário, se selectable for verdadeiro. Nota: Utilizar a implementação padrão com o v-model.	Date	null
highlightDate	Data a ser destacada no calendário. Por padrão exibe o dia atual. Pode ser enviado null se não desejar ter nenhum dia em destaque	Date	new Date()
month	Mês a ser exibido no calendário { month, year }. Se não passar nenhum valor, será automaticamente calculado a partir do highlightDate. O componente LxDatePicker com a prop month-picker está preparado para gerar o objeto necessário.	Object	null
week	Semana a ser exibida no calendário, considerando seu índice desde o início do ano { week, year }. Se não passar nenhum valor, será automaticamente calculado a partir da data selecionada (modelValue) ou highlightDate. O componente LxDatePicker com a prop week-picker está preparado para gerar o objeto necessário.	Object	null
showWeek	Define se o calendário deve exibir apenas os 7 dias da semana definida pela propriedade week.	Boolean	false
selectable	Define se as datas no calendário são selecionáveis.	Boolean	false

Emissões

Nome	Descrição
update:modelValue	Emite a data selecionada quando uma data é selecionada.
update:week	Emite a semana selecionada quando a semana é alterada.
update:month	Emite o mês selecionado quando o mês é alterado.
getDays	Emite o período de dias atualmente exibido no calendário permitindo requisitar na API os valores para popular o calendário

Slots

Nome	Descrição
header	Conteúdo personalizado para o cabeçalho do calendário.
day	Conteúdo personalizado para cada dia do calendário. Recebe a data como parâmetro.
footer	Conteúdo personalizado para o rodapé do calendário.

Classes Padrão

O componente LxCalendar utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do calendário usando :deep com a classe desejada.

Nome	Descrição
lx-calendar	Classe base do calendário.

Exemplo de Personalização

Você pode personalizar o estilo do calendário utilizando as classes padrão com o seletor :deep. Veja um exemplo de como alterar o estilo do calendário:

Clique para visualizar o código

:deep .lx-calendar {
  background-color: #f0f0f0;
}

Playground

Id:
Data de Destaque:
Mês:
Semana:
Mostrar Semana:
Selecionável:
Carregando:

Dom

Seg

Ter

Qua

Qui

Sex

Sáb