Calendar

Uso

Ejemplo de Implementación Básica

A continuación, se muestra cómo puedes importar y utilizar el componente Calendar en una página o componente de Vue 3.

<template lang="pug">
Calendar(
  v-model="fechaSeleccionada"
  :locale="'es'"
  :events="eventos"
)
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CalendarEvent } from '~/src/runtime/types/components/calendar'

// Define la fecha seleccionada
const fechaSeleccionada = ref(new Date())

// Define los eventos del calendario
const eventos: CalendarEvent[] = [
  {
    nombre: 'Reunión de equipo',
    fecha: '2024-05-25',
    color: 'bg-blue-500'
  },
  {
    nombre: 'Entrega de proyecto',
    fecha: '2024-05-28',
    color: 'bg-red-500'
  },
  {
    nombre: 'Presentación',
    fecha: '2024-05-30',
    color: 'bg-green-500'
  }
]
</script>

Ejemplo Integrado con Formulario

<template lang="pug">
FormField(name="fechaEvento", v-slot="{ componentField }")
  FormItem
    FormLabel Fecha del Evento
    FormControl
      Calendar(
        v-model="fechaEvento"
        :locale="'es'"
        :events="eventosExistentes"
        @update:modelValue="(value) => { form.setFieldValue('fechaEvento', value) }"
      )
    FormMessage
</template>

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

// Fecha seleccionada para el evento
const fechaEvento = ref<Date>()

// Eventos ya existentes para mostrar contexto
const eventosExistentes = ref([
  {
    nombre: 'Evento existente',
    fecha: '2024-05-15',
    color: 'bg-gray-400'
  }
])

// Integración con formulario
const form = useForm({
  validationSchema: formSchema,
  initialValues: {
    fechaEvento: null
  }
})
</script>

Props

Tipo CalendarEvent

interface CalendarEvent {
  nombre: string  
  fecha: Date 
  color: string 
}

Eventos Emitidos

Comportamiento

• Navegación: Permite navegar entre meses usando los botones de anterior y siguiente.
• Selección de Fecha: Al hacer clic en una fecha, se selecciona y emite el evento correspondiente.
• Indicadores de Eventos: Muestra puntos de colores debajo de las fechas que tienen eventos programados.
• Tooltips Informativos: Al pasar el cursor sobre fechas con eventos, muestra un tooltip con los detalles.
• Límite de Indicadores: Muestra máximo 3 puntos por fecha, con un indicador "+" para fechas con más eventos.
• Localización: Soporta diferentes idiomas a través de la prop locale.

Funcionalidades Adicionales

• Gestión de Múltiples Eventos: Puede manejar varios eventos en la misma fecha de manera eficiente.
• Responsive: Se adapta a diferentes tamaños de pantalla con diseño flexible.
• Navegación por Teclado: Soporta navegación completa por teclado para accesibilidad.
• Personalización Visual: Los eventos pueden tener diferentes colores para categorización visual.

Estructura de Eventos

El componente organiza internamente los eventos usando un Map para optimizar el rendimiento:

• Agrupación por Fecha: Los eventos se agrupan automáticamente por fecha para facilitar la consulta.
• Renderizado Eficiente: Solo renderiza indicadores para fechas que realmente tienen eventos.
• Gestión de Tooltips: Los tooltips se generan dinámicamente basados en los eventos de cada fecha.

Personalización de Colores

Los eventos soportan cualquier clase de color de Tailwind CSS:

// Ejemplos de colores disponibles
const coloresDisponibles = [
  'bg-red-500',
  'bg-blue-500',
  'bg-green-500',
  'bg-yellow-500',
  'bg-purple-500',  
  'bg-indigo-500',  
  'bg-pink-500',    
  'bg-gray-500'     
]

Notas

• El componente utiliza reka-ui como base para la funcionalidad del calendario.
• Los tooltips requieren que TooltipProvider esté disponible en el contexto de la aplicación.
• Para un rendimiento óptimo con muchos eventos, se recomienda paginar o filtrar los eventos por rango de fechas.
• El componente es completamente accesible y sigue las mejores prácticas de ARIA.
• Las fechas se manejan internamente usando objetos Date nativos de JavaScript.