DEV Community

Daniel Hall
Daniel Hall

Posted on • Edited on

Crea un calendario lunar interactivo para rituales usando JavaScript y fechas

Ok, te cuento algo. Hace un par de meses estaba buscando una manera fácil de organizar mis rituales según las fases de la luna, pero todo lo que encontraba eran apps sobrecargadas o calendarios PDF que tenía que andar comparando a mano cada mes. Frustrante. Así que pensé: “¿Y si hago el mío en JavaScript?” Spoiler: funcionó. Y ahora tú también puedes hacerlo.

¿Por qué molestarse con la luna?

Si ya llevas un tiempo en esto de lo esotérico, sabes que no es lo mismo hacer un ritual en luna llena que en luna nueva. Totalmente diferente vibe, ¿cierto?

Y aunque algunos se guían por su intuición, tener un calendario lunar interactivo que se actualice solito mes a mes… es un game changer. Te ahorra tiempo y te da claridad sobre cuándo hacer qué.

Y, hey, si te estás metiendo de lleno en prácticas como la Amarres de amor en Waco Tx esto te va a venir como anillo al dedo. Literal.

TarotEnWacoTx

Conceptos que necesitas (pero explicados como si te los contara en un café )

  1. Fases lunares – Luna nueva, creciente, llena y menguante. Cada una vibra diferente, como moods cósmicos.
  2. API lunar o cálculo matemático – No te asustes. O usas una API externa, o haces unos cálculos con fechas.
  3. JavaScript básico – Lo de siempre: variables, fechas, un poco de lógica. Nada súper pro.
  4. Eventos del DOM – Para que el usuario pueda hacer clic y ver info o rituales sugeridos.
  5. Estilo visual sencillo – Un calendario que no parezca una hoja de Excel, porfa.

Manos a la luna: cómo crear uno

Paso 1 – Estructura básica en HTML.

<div id="calendario-lunar"></div>
<button id="siguiente">→</button>
Enter fullscreen mode Exit fullscreen mode

Paso 2 – Obtener el día actual y calcular la fase lunar.

function obtenerFaseLunar(fecha) {
  const diasDesdeNueva = (fecha - new Date('2024-01-11')) / (1000 * 3600 * 24);
  const fase = diasDesdeNueva % 29.53;
  return fase;
}
Enter fullscreen mode Exit fullscreen mode

Paso 3 – Generar el calendario dinámicamente.

function generarCalendario(mes, año) {
  const dias = new Date(año, mes + 1, 0).getDate();
  let html = "";
  for (let i = 1; i <= dias; i++) {
    const fecha = new Date(año, mes, i);
    const fase = obtenerFaseLunar(fecha);
    html += `<div class="dia">${i}<span>${fase.toFixed(2)}</span></div>`;
  }
  document.getElementById("calendario-lunar").innerHTML = html;
}
Enter fullscreen mode Exit fullscreen mode

Paso 4 – Agregar mensajes por fase lunar.

function mensajePorFase(fase) {
  if (fase < 1) return 'Ideal para nuevos comienzos';
  if (fase < 7) return 'Momento para impulsar proyectos';
  if (fase < 15) return 'Perfecto para culminaciones y claridad';
  return 'Buen momento para introspección y cierre';
}
Enter fullscreen mode Exit fullscreen mode

Paso 5 – Asociar mensajes con cada día en el calendario.

document.querySelectorAll('.dia').forEach(dia => {
  dia.addEventListener('click', () => {
    const fase = parseFloat(dia.querySelector('span').innerText);
    alert(mensajePorFase(fase));
  });
});
Enter fullscreen mode Exit fullscreen mode

Paso 6 – Estilos básicos en CSS (¡porque también importa!)

#calendario-lunar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.dia {
  padding: 8px;
  background: #eee;
  border-radius: 5px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

¿Y qué gano yo con esto?

  • Claridad total: Ya no vas a adivinar cuándo hacer ese baño espiritual en Santería En Waco
  • Conexión real: Estás sincronizándote con los ciclos naturales, no con el reloj del celular.
  • Más intención: Cada ritual cobra fuerza cuando lo haces en su momento ideal.
  • Autonomía: No dependes de apps de terceros ni de recordatorios que nunca suenan.

Y si estás probando algo tipo Limpieza espiritual en Waco créeme, tener esto a la mano cambia todo. Te da orden, foco… hasta paz mental, ¿sabes?

Conclusión (sí, esa parte donde te animo a hacerlo)

No necesitas ser un hacker del universo para armar tu propio calendario lunar interactivo. Solo un poco de tiempo, ganas y una buena conexión con tu intuición.

Pruébalo esta semana. Créeme, te va a sorprender.

Y hey, si te animas a mostrar tu versión, ¡pásamela! Me encantaría ver cómo lo adaptas tú.

¿Te interesa que te deje el código completo en un repo? Dímelo en los comentarios y lo subo.

¿Listo para dejar de depender del horóscopo de Instagram?

Top comments (0)