Clases CSS globales

DayFlow ofrece un conjunto de clases CSS con el prefijo df- que te permiten personalizar el aspecto de los componentes del calendario. Están pensadas para dar estilo cómodamente sin tener que modificar la biblioteca.

Elegir la entrada CSS adecuada

Elige la hoja de estilos según si tu aplicación ya usa Tailwind CSS:

@import '@dayflow/core/dist/styles.components.css';
@import 'tailwindcss';

Para sobrescribir el tema, es preferible usar las variables --df-color-* o las clases semánticas estables df-* que se documentan más abajo.

Índice

• Clases comunes
• Clases utilitarias semánticas
• Utilidades de diseño y animación
• Clases de la vista de día
• Clases de la vista de semana
• Clases de la vista de mes
• Clases de la vista de año
• Clases del minicalendario
• Clases de la barra lateral
• Clases de navegación
• Clases del detalle del evento
• Clases de los content slots
• Atributos de estado de los eventos

Comunes

Clases CSS comunes, usadas en todas las vistas del calendario.

Clases utilitarias semánticas

DayFlow expone ahora un conjunto estable de clases semánticas df-* para estados internos como botones seleccionados, fechas resaltadas, acciones destructivas y anillos de foco. Se definen en la CSS base compartida y puedes apuntar a ellas desde tu propia hoja de estilos sin riesgo.

Usa estas clases cuando quieras que tu contenido propio, la interfaz de un plugin o la salida de un content slot encajen con los tokens de tema de DayFlow:

Para dar tema, usa preferentemente estas clases o las variables --df-color-*. Evita apuntar a combinaciones internas antiguas como bg-primary, text-primary o hover:bg-primary/90 sobre los elementos internos de DayFlow: esos nombres semánticos de Tailwind ya no forman parte del contrato público de estilos.

Utilidades de diseño y animación

Estas clases resultan útiles cuando quieres que el contenido propio de un slot o la interfaz de un plugin hereden el comportamiento de diseño y animación de DayFlow.

Vista de día

Clases CSS propias de la vista de día.

Vista de semana

Clases CSS propias de la vista de semana.

Vista de mes

Clases CSS propias de la vista de mes.

Vista de año

Clases CSS propias de la vista de año. Resultan especialmente útiles para personalizar el aspecto de los eventos en el resumen anual.

Minicalendario

Clases CSS del componente de minicalendario (habitualmente en la barra lateral o en la vista de día).

Barra lateral

Clases CSS del componente de barra lateral.

Navegación

Clases CSS de los botones de navegación.

Detalle del evento

Clases CSS de los paneles y diálogos de detalle del evento.

Content Slots

Clases CSS del sistema de renderizado de content slots.

Atributos de estado de los eventos

DayFlow expone bastante más que las banderas de estado de los eventos. En eventos, rejillas, superposiciones, paneles y utilidades internas de diseño, el proyecto usa actualmente los atributos data-* siguientes. A muchos puedes apuntar directamente desde CSS, mientras que unos pocos son sobre todo puntos de anclaje estructurales para la lógica de superposición y la detección de clics fuera.

Elementos de evento

Estado de fechas, rejilla y diseño

Controles, campos y búsqueda

Estado del plugin de barra lateral

Superposiciones y puntos de interacción

Ejemplo

/* Selected events */
.df-event[data-selected='true'] {
  outline: 2px solid var(--df-color-primary);
}

/* Events while being dragged */
.df-event[data-dragging='true'] {
  opacity: 0.6;
}

/* Only target month-view events */
.df-event[data-view='month'] {
  font-size: 11px;
}

/* All-day events only */
.df-event[data-all-day='true'] {
  font-weight: 600;
}

/* Highlight today's agenda section or compact grid cell */
[data-today='true'] {
  background-color: color-mix(in srgb, var(--df-color-primary) 8%, transparent);
}

Personalización

Para personalizar el aspecto, apunta a estas clases o sobrescribe las variables --df-color-* en tu CSS global. La mayoría de los cambios de tema no deberían necesitar !important; úsalo solo cuando quieras ganar deliberadamente a una regla local muy específica.

Ejemplo

/* Change the background of all events */
.df-event {
  border-radius: 8px !important;
}

/* Customize the current time indicator */
.df-current-time-line {
  z-index: 100;
}
.df-current-time-bar {
  height: 3px !important;
  background-color: #ef4444 !important;
}

/* Customize specific view */
.df-day-view .df-event {
  border-left: 4px solid #3b82f6;
}

/* Style the sidebar */
.df-sidebar {
  background-color: #f8fafc !important;
}

/* Style mini calendar */
.df-mini-calendar-day:hover {
  background-color: #e2e8f0;
}

/* Reuse DayFlow semantic helpers in your own slot or plugin markup */
.my-custom-primary-chip {
  background-color: var(--df-color-primary);
  color: var(--df-color-primary-foreground);
}

/* Dark mode overrides */
.dark .df-calendar {
  background-color: #111827;
}

/* Style event detail panel */
.df-event-detail-panel {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

Consejos de uso

1. Especificidad: si tus estilos no se aplican, aumenta la especificidad envolviendo el calendario en una clase propia:

   .my-custom-calendar .df-event { ... }

2. Diseño adaptable: usa media queries para ajustar los estilos en móvil:

   @media (max-width: 768px) {
     .df-event-title {
       font-size: 10px;
     }
     .df-time-label {
       font-size: 10px;
     }
   }

3. Modo oscuro: usa el selector .dark para los estilos específicos del modo oscuro:

   .dark .df-month-day-cell {
     border-color: #374151;
   }

4. Variables CSS: DayFlow usa propiedades personalizadas --df-color-* para los colores. Sobrescríbelas en .df-calendar-container (y en .df-portal para las superposiciones flotantes) si quieres cambios de color acotados:

   .df-calendar-container,
   .df-portal {
     --df-color-primary: #3b82f6;
     --df-color-primary-foreground: #ffffff;
   }

Actualizar desde versiones anteriores

Documentación relacionada

• Personalización de temas: opciones de tema avanzadas
• Modo oscuro: configuración del modo oscuro