Clock Weather Card Home Assistant: Guía Completa 2026

Actualizado el 08 de febrero de 2026

Si buscas una forma elegante y funcional de visualizar la hora y el pronóstico del tiempo en tu panel de Home Assistant, la Clock Weather Card sigue siendo una de las mejores opciones en 2026. Esta tarjeta personalizada combina un reloj digital, la fecha actual y un pronóstico meteorológico detallado en un solo componente visualmente atractivo, ideal para centralizar la información más importante de tu dashboard.

En esta guía definitiva, te mostraré cómo instalar y configurar la Clock Weather Card en Home Assistant utilizando HACS, el método estándar y recomendado para gestionar componentes de la comunidad. Olvídate de los métodos manuales obsoletos; vamos a hacerlo de la forma más sencilla y eficiente.

Instalación de Clock Weather Card a través de HACS

En 2026, la instalación de cualquier tarjeta o integración personalizada pasa casi obligatoriamente por el Home Assistant Community Store (HACS). Este gestor de componentes se encarga de descargar, instalar y gestionar las actualizaciones de forma automática, simplificando enormemente el proceso.

Si aún no tienes HACS, te recomiendo encarecidamente que sigas mi guía completa para instalar HACS en Home Assistant antes de continuar.

Con HACS ya instalado, los pasos son muy sencillos:

Navega a HACS desde el menú lateral de Home Assistant.
Selecciona la pestaña Frontend.
Haz clic en el botón azul «Explorar y descargar repositorios» en la esquina inferior derecha.
En la barra de búsqueda, escribe «Clock Weather Card» y selecciónala de la lista.
En la siguiente ventana, haz clic en «Descargar«. HACS se encargará de todo el proceso, incluyendo la adición automática del recurso a tu configuración de Lovelace. ¡Ya no es necesario editar archivos YAML manualmente para este paso!

Cómo Configurar la Tarjeta Clock Weather Card

Una vez instalada, ya puedes añadir la tarjeta a cualquiera de tus paneles (dashboards). Puedes hacerlo tanto desde el editor visual como editando el código YAML directamente.

Para añadirla, entra en el modo de edición de tu panel (los tres puntos en la esquina superior derecha y «Editar panel») y haz clic en «Añadir Tarjeta». Busca la tarjeta «Custom: Clock Weather Card» en la lista.

Configuración Mínima (Requerida)

Lo único que necesitas para que la tarjeta funcione es una entidad de clima. La mayoría de las integraciones meteorológicas de Home Assistant, como OpenWeatherMap, te proporcionarán una.

type: custom:clock-weather-card
entity: weather.tu_ciudad

Simplemente reemplaza weather.tu_ciudad por el ID de tu entidad meteorológica.

Configuración Completa (Ejemplo Avanzado)

La verdadera potencia de esta tarjeta reside en sus opciones de personalización. Aquí tienes un ejemplo con varias de las opciones más comunes para que puedas adaptarla a tu gusto.

type: custom:clock-weather-card
entity: weather.home # Sustituye por tu entidad de clima
title: Mi Casa
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 7
locale: es
time_format: '24'
date_pattern: P
hide_today_section: false
hide_forecast_section: false

Opciones de Configuración Detalladas

A continuación, detallo todas las opciones disponibles en una tabla para que puedas consultar y personalizar tu Home Assistant al máximo.

Nombre	Tipo	Requisito	Descripción	Valor por defecto
type	cadena	Requerido	Debe ser `custom:clock-weather-card`.
entity	cadena	Requerido	El ID de tu entidad meteorológica (ej: `weather.home`).
title	cadena	Opcional	Título que aparecerá en la parte superior de la tarjeta.	`''` (vacío)
sun_entity	cadena	Opcional	ID de la entidad `sun.sun`. Se usa para mostrar el icono de día o de noche según la posición del sol.	`sun.sun`
weather_icon_type	cadena	Opcional	Estilo del icono principal del tiempo. Puede ser `line` (líneas) o `fill` (relleno).	`line`
animated_icon	booleano	Opcional	Activa o desactiva las animaciones en el icono principal del tiempo.	`true`
forecast_days	número	Opcional	Número de días de pronóstico a mostrar.	`5`
locale	cadena	Opcional	Define el idioma para fechas y textos (ej: `es`, `en`, `fr`). Si no se especifica, usa el idioma configurado en Home Assistant.	Idioma de HA
time_format	cadena	Opcional	Formato de hora. Puede ser `'24'` o `'12'`. Si no se especifica, usa el formato configurado en Home Assistant.	Formato de HA
date_pattern	cadena	Opcional	Define un formato de fecha personalizado. Utiliza los patrones de date-fns.	`P`
hide_today_section	booleano	Opcional	Oculta la sección superior que contiene el reloj, la fecha y el icono grande del tiempo.	`false`
hide_forecast_section	booleano	Opcional	Oculta la sección inferior que contiene el pronóstico por días.	`false`

Resolución de Problemas Comunes

Aunque la instalación es sencilla, a veces pueden surgir pequeños inconvenientes. Aquí te dejo las soluciones a los problemas más frecuentes.

Error: «Custom element doesn’t exist: clock-weather-card»

Este es el error más común. Significa que Home Assistant no ha cargado el archivo de la tarjeta. La solución suele ser simple:

Limpia la caché de tu navegador: A menudo, el navegador guarda una versión antigua de la página. Pulsa Ctrl + F5 (o Cmd + Shift + R en Mac) para forzar una recarga completa.
Reinicia Home Assistant: Un reinicio completo puede ayudar a que todos los componentes se carguen correctamente.

El pronóstico muestra menos días de los esperados

Esto depende directamente de la integración meteorológica de Home Assistant que estés utilizando. Algunas integraciones solo proporcionan pronósticos por horas (generalmente para las próximas 48 horas), lo que se traduce en solo 1 o 2 días en la tarjeta. Para ver un pronóstico de varios días, asegúrate de usar una entidad meteorológica que ofrezca pronósticos diarios, como la de OpenWeatherMap.

La tarjeta muestra «No disponible» o «Entidad no encontrada»

Verifica que el entity_id que has puesto en la configuración de la tarjeta es correcto. Ve a Herramientas para desarrolladores > Estados y busca tu entidad de clima (ej: weather.) para confirmar su nombre exacto.

Personalización Avanzada con Card-Mod

Si quieres llevar la personalización al siguiente nivel, puedes usar el componente Card-Mod para aplicar estilos CSS directamente a la tarjeta. Con él, puedes cambiar colores, tamaños de fuente, espaciados y mucho más.

Por ejemplo, para cambiar el color del título y hacer la hora un poco más grande, podrías añadir este código a la configuración de tu tarjeta:

type: custom:clock-weather-card
entity: weather.home
title: Mi Casa
card_mod:
  style: |
    .card-header {
      color: var(--primary-color);
      font-size: 24px !important;
    }
    .time {
      font-size: 5em !important;
    }

Las posibilidades son casi infinitas, permitiéndote integrar la tarjeta de clima de Home Assistant perfectamente con el diseño de tu panel.