¿Cómo poner un calendario en tu blog?

Hola chicasss!! Hoy nos traigo un nuevo viernes de tutoriales con un gadget que me hace mucha ilusión por que he estado un tiempo editándolo y creándolo de forma que se vea estético y funcional: UN CALENDARIO!!

Este tutorial es bastante fácil, la única complicación es la cantidad de apartados de colores que hay en todo el código pero con paciencia lograrás rellenarlos todos.

Debo recordad que tienes que copiar el código, pegarlo en notas y a partir de ahí modificarlo para no liarte y poder corregir lo que necesites si es necesario.

El código en cuestión (esta vez he dejado los colores que tengo en mi blog por si hay gente que no quiere cambiarlos o que solo quiere cambiar algunos):

<link href="https://fonts.googleapis.com/css2?family=Gruppo&amp;display=swap" rel="stylesheet" />

<div id="witch-calendar">

  <div class="calendar-header">

    <button id="prevMonth">◄</button>

    <div id="monthYear"></div>

    <button id="nextMonth">►</button>

  </div>

  <table>

    <thead>

      <tr>

        <th>L</th>

        <th>M</th>

        <th>X</th>

        <th>J</th>

        <th>V</th>

        <th>S</th>

        <th>D</th>

      </tr>

    </thead>

    <tbody id="calendar-body"></tbody>

  </table>

  <div id="event-box">

    Pulsa sobre una fecha marcada para ver el evento.

  </div>

</div>

<style>

#witch-calendar{

  width:240px;

  background:#FFEAF6; /* más cálido y uniforme */

  border:3px solid #A1006D; /* morado profundo (estructura) */

  border-radius:18px;

  padding:10px;

  box-shadow:0 4px 15px rgba(0,0,0,.25);

  font-family:'Gruppo',sans-serif;

  margin:auto;

}

/* HEADER */

.calendar-header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:10px;

}

.calendar-header button{

  background:#7A0052; /* primario oscuro */

  color:white;

  border:none;

  border-radius:8px;

  width:32px;

  height:32px;

  cursor:pointer;

  font-size:16px;

  transition:0.2s;

}

.calendar-header button:hover{

  background:#C2188B; 

}

#monthYear{

  font-size:18px;

  font-weight:bold;

  color:#7A0052;

  text-align:center;

}

/* TABLA */

#witch-calendar table{

  width:100%;

  border-collapse:collapse;

}

#witch-calendar th{

  color:#A1006D; 

  font-size:15px;

  padding-bottom:5px;

}

#witch-calendar td{

  text-align:center;

  height:30px;

  cursor:pointer;

  border-radius:50%;

  position:relative;

  transition:0.2s;

}

#witch-calendar td:hover{

  background:#C2188B;

}

/* DÍA ACTUAL (punto focal) */

.today{

  background:#C2188B; 

  color:white;

  font-weight:bold;

  box-shadow:0 0 8px rgba(194,24,139,0.6);

}

/* DÍAS IMPORTANTES */

.event-day{

  background:#8E2A7B; /* intermedio entre base y activo */

  color:white;

  font-weight:bold;

}

/* CAJA EVENTOS */

#event-box{

  margin-top:10px;

  min-height:50px;

  background:#FFFFFF;

  border-radius:10px;

  padding:8px;

  font-size:14px;

  color:#5A2A4A;

  border:1px solid #F0C2DE;

}

</style>

<script>

const events = {

  /* ==========================

     AÑADE AQUÍ TUS EVENTOS

     ========================== */

  "2026-10-03": "🪩 MI CUMPLEAÑOSS",

  "2026-01-01": "🍾 Año nuevo",

  "2026-01-06": "👑 Reyes Magos",

  "2026-01-03": "🐺 Luna del Lobo",

  "2026-02-01": "❄️ Luna de Nieve",

  "2026-02-01": "🕯️ IMBOLC 🕯️",

  "2026-03-03": "🪱 Luna de la Oruga",

  "2026-03-20": "🐣 OSTARA 🐣",

  "2026-04-02": "🌸 Luna Rosa",

  "2026-04-03": "👼 Viernes Santo",

  "2026-05-01": "🌻 BALTANE 🌻",

  "2026-05-01": "💐 Luna de Flores",

  "2026-05-01": "👨‍🌾 Día del trabajador",

  "2026-05-31": "🌙 Luna AZUL 🩵",

  "2026-06-21": "🌾 LITHA 🌾",

  "2026-06-30": "🍓 Luna de Fresa",

  "2026-07-29": "🫎 Luna del Ciervo",

  "2026-08-01": "🌞 LAMMAS 🌞",

  "2026-08-15": "🙏 Asunción de la Virgen",

  "2026-08-28": "🐟 Luna del Esturión",

  "2026-09-21": "🍂 MABON 🍂",

  "2026-09-26": "🌽 Luna del Maíz",

  "2026-10-12": "🇪🇸 Día de la Hispanidad",

  "2026-10-26": "🩸 Luna de Sangre",

  "2026-10-31": "🎃 SAMHAIN 🎃",

  "2026-11-24": "🦫 Luna del Castor",

  "2026-12-08": "👩‍🍼 Inmaculada Concepción",

  "2026-12-21": "🔔 YULE 🔔",

  "2026-12-24": "⛄️ Luna Fría",

  "2026-12-25": "🎄NAVIDAD"

};

const monthNames = [

  "Enero","Febrero","Marzo","Abril","Mayo","Junio",

  "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"

];

let currentDate = new Date();

function renderCalendar() {

  const year = currentDate.getFullYear();

  const month = currentDate.getMonth();

  document.getElementById("monthYear").textContent =

    monthNames[month] + " " + year;

  const firstDay = new Date(year, month, 1);

  const lastDay = new Date(year, month + 1, 0);

  let startDay = firstDay.getDay();

  startDay = startDay === 0 ? 6 : startDay - 1;

  const tbody = document.getElementById("calendar-body");

  tbody.innerHTML = "";

  let date = 1;

  for(let i=0;i<6;i++){

    const row = document.createElement("tr");

    for(let j=0;j<7;j++){

      const cell = document.createElement("td");

      if(i===0 && j<startDay){

        cell.innerHTML="";

      }

      else if(date>lastDay.getDate()){

        cell.innerHTML="";

      }

      else{

        cell.textContent=date;

        const monthString =

          String(month+1).padStart(2,"0");

        const dayString =

          String(date).padStart(2,"0");

        const dateKey =

          year + "-" + monthString + "-" + dayString;

        const today = new Date();

        if(

          date===today.getDate() &&

          month===today.getMonth() &&

          year===today.getFullYear()

        ){

          cell.classList.add("today");

        }

        if(events[dateKey]){

          cell.classList.add("event-day");

          cell.addEventListener("click",()=>{

            document.getElementById("event-box").innerHTML =

              "<strong>" +

              date + "/" +

              (month+1) + "/" +

              year +

              "</strong><br>" +

              events[dateKey];

          });

        }

        date++;

      }

      row.appendChild(cell);

    }

    tbody.appendChild(row);

  }

}

document.getElementById("prevMonth").addEventListener("click",()=>{

  currentDate.setMonth(currentDate.getMonth()-1);

  renderCalendar();

});

document.getElementById("nextMonth").addEventListener("click",()=>{

  currentDate.setMonth(currentDate.getMonth()+1);

  renderCalendar();

});

renderCalendar();

</script>

Muy bien, vamos a ir paso a paso de arriba hacia abajo explicando para qué sirve cada parte, recuerda que no puedes eliminar ningún espacio, ningún punto ni ninguna comilla porque sino se rompe el código. Voy a ir en orden:

1) El primer tamaño que encuentras en otro color es el tamaño del gadget (recomiendo que el tamaño que elijas sea de 2/3 de tu sidebar, por ejemplo si tu sidebar mide 190px pues que el calendario sea de 130px).
2) El primer color es el color del fondo de todo el calendario. Siempre recomiendo ver los colores que quieras en HTMLcolorcode.
3) El segundo color es el color del borde (si no quieres que tenga borde solo pon el mismo color del fondo y ya).
4) El tercer color es el color de los botones < y >.
5) El cuarto color es el color de los botones al pasar el cursor por encima.
6) El quinto color es el color del mes del año (yo tengo este y el de los botones del mismo color).
7) El sexto color es el color de los días de la semana.
8) El séptimo color es el color del día actual.
9) El octavo color (que está en rbga) es el color del brillo que hay al rededor del día de hoy.
10) El noveno color es el color de los días con eventos.
11) El décimo color es el color de la caja de información que está abajo.
12) El undecimo color es el color de las letras de la caja de información.

13) El duodecimo color es el color del borde de la caja de información.
14) Aquí terminas los colores y empiezan los días. Puedes modificar todas las fechas que quieras (recuerda no borrar espacios y comillas) y recuerda que SIEMPRE en la última fecha que pongas NO tienes que poner la coma.

Sé que es un poco lioso porque hay muchos colores pero espero no haberme saltado ninguno y si me he equivocado en algo espero que me corrijas.

Ahora sí, vamos a la parte que siempre se repite: ve a la parte de Diseño de Blogger y elige en que sidebar vas a poner tu calendario. Dale ahora a "agregar un gadget" y busca HTML/JavaScript donde pegarás en la parte de contenido el código que has creado. Recuerda darle a guardar tanto en la parte del gadget como en la parte de abajo a la derecha en la pagina de Diseño.

Espero que te haya servido!! Nos vemoss