Widget "Calendario" de Wikitólica
Muestra el santoral, las fiestas litúrgicas y los tiempos del año litúrgico de los próximos días directamente en tu web o blog. Ofrece a tus visitantes una referencia clara y actualizada para vivir el ritmo litúrgico día a día: memorias, fiestas, solemnidades y tiempos fuertes como Adviento, Cuaresma o Pascua. Se integra en segundos, sin configuraciones complejas, y se adapta automáticamente a cualquier dispositivo. Y, por supuesto, 100% gratuito.
Configura tu widget
días
<script src="https://cdn.jsdelivr.net/gh/CursoCatolico/wikitolica-widgets@main/calendario.js" defer></script>
<div class="wikitolica-calendario" data-days="14">
<a href="https://www.wikitolica.com">Enciclopedia Católica Wikitólica</a>
</div>Vista previa
Cómo instalarlo
🌐 Cualquier página web (HTML)
- Pega el código una sola vez donde quieras que aparezca el calendario.
- ¡Listo! Se carga de forma asíncrona.
📝 Blogger (Blogspot) → Widget
- Diseño → Añadir gadget → HTML/JavaScript
- Pega el código completo
- Guarda
🧩 WordPress → Widget clásico
- Apariencia → Widgets
- Arrastra un bloque “HTML personalizado”
- Pega el código completo
- Guarda
🧱 WordPress → Bloque Gutenberg
- Edita la página
- Añade el bloque “HTML personalizado”
- Pega el código completo
- Publica
‼️ Si usas WordPress.com (versión gratuita)
- La instalación se hace como se indica arriba, pero puede no funcionar en el plan gratuito.
- Si no te funciona hemos diseñado el widget con google calendar que tiene mayor compatibilidad. ¡Pruébalo!
- Apariencia → Widgets
- Arrastra un bloque “HTML personalizado”
- Pega el código completo y guarda
<div style="zoom:0.79;margin:0 auto;overflow-x:hidden;width:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;border:1px solid #e3e4e8;border-radius:8px;overflow:hidden;background:#fff"> <iframe src="https://calendar.google.com/calendar/embed?height=500&wkst=2&ctz=Europe%2FMadrid&showPrint=0&showTitle=0&mode=AGENDA&showNav=0&showDate=0&showTz=0&showCalendars=0&showTabs=0&src=MjY0NWFkODk2YTg5MmI1MmI0Y2FmMzdjNTI1MThiYjZkODE3YmQ0ODE4YTZjNGY5YjgwM2MyOGQ0YTQwNGVlNUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%230b8043" style="border:0;height:500px;" width="100%" height="500" frameborder="0" scrolling="no"></iframe> <div style="background-color:#f8f9fa;margin-top:-7px;z-index:9px;border-top:1px solid #e3e4e8;padding:3px;text-align:center"> <a href="https://www.wikitolica.com/" style="color:#0b4380;text-decoration:none;font-size:13px" target="_blank">Wikitólica</a> - <a href="https://www.wikitolica.com/w/widget-calendario/" style="color:#0b4380;text-decoration:none;font-size:13px" target="_blank">Ponlo en tu web</a> </div> </div>
Consejos útiles
- El atributo
data-daysacepta de 1 a 360 días. - Totalmente responsive y optimizado para móviles.
- No tiene coste, no requiere registro ni API keys.
- Si usas CSP recuerda añadir
https://cdn.jsdelivr.neta tuscript-src.
