Calendario

<div class="calendar">
    <div class="calendar-header">
        <h2 class="calendar-title">Enero</h2>
        <span class="calendar-year">2024</span>
    </div>
    <div class="calendar-body">
        <table>
        <thead>
            <tr class="calendar-week-header">
            <th><span>D</span></th>
            <th><span>L</span></th>
            <th><span>M</span></th>
            <th><span>M</span></th>
            <th><span>J</span></th>
            <th><span>V</span></th>
            <th><span>S</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="calendar-week">
            <td></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">1</span>
                </span>
            </td>
            <td><span>2</span></td>
            <td><span>3</span></td>
            <td><span>4</span></td>
            <td><span>5</span></td>
            <td><span>6</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>7</span></td>
            <td><span>8</span></td>
            <td><span>9</span></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">10</span>
                </span>
            </td>
            <td><span>11</span></td>
            <td><span>12</span></td>
            <td><span>13</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>14</span></td>
            <td><span>15</span></td>
            <td><span>16</span></td>
            <td><span>17</span></td>
            <td><span>18</span></td>
            <td><span>19</span></td>
            <td><span>20</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>21</span></td>
            <td><span>22</span></td>
            <td><span>23</span></td>
            <td><span>24</span></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">25</span>
                </span>
            </td>
            <td><span>26</span></td>
            <td><span>27</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>28</span></td>
            <td><span>29</span></td>
            <td><span>30</span></td>
            <td><span>31</span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
            <tr class="calendar-week">
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
        </tbody>
        </table>
    </div>
    <div class="calendar-footer">
        <ul class="calendar-footer-list">
        <li>
            <strong>1. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>10. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>25. </strong>
            Nombre del evento.
        </li>
        </ul>
    </div>
</div>

<div class="calendar interactive" id="calendar">
	<div class="calendar-header d-flex gap-5 mb-4">
		<select class="form-control form-select month" aria-label="Mes">
			<option value="0">Enero</option>
			<option value="1">Febrero</option>
			<option value="2">Marzo</option>
			<option value="3">Abril</option>
			<option value="4">Mayo</option>
			<option value="5">Junio</option>
			<option value="6">Julio</option>
			<option value="7">Agosto</option>
			<option value="8">Septiembre</option>
			<option value="9">Octubre</option>
			<option value="10">Noviembre</option>
			<option value="11">Diciembre</option>
		</select>

		<select class="form-control form-select year" aria-label="Año">
			<option value="2018">2018</option>
			<option value="2019">2019</option>
			<option value="2020">2020</option>
			<option value="2021">2021</option>
			<option value="2022">2022</option>
			<option value="2023">2023</option>
			<option value="2024">2024</option>
			<option value="2025">2025</option>
			<option value="2026">2026</option>
		</select>
	</div>
	
	<div class="calendar-body">
		<table>
			<thead>
					<tr class="calendar-week-header">
					<th><span>D</span></th>
					<th><span>L</span></th>
					<th><span>M</span></th>
					<th><span>M</span></th>
					<th><span>J</span></th>
					<th><span>V</span></th>
					<th><span>S</span></th>
					</tr>
			</thead>
			<tbody>
				<tr class="calendar-week">
					<td data-date="2026-02-01" class="event-multiple">
						<span>
							<span>1</span>
						</span>
					</td>
					<td data-date="2026-02-02" class="event-single">
						<span>
							<span>2</span>
						</span>
					</td>
					<td data-date="2026-02-03">
						<span>
							<span>3</span>
						</span>
					</td>
					<td data-date="2026-02-04">
						<span>
							<span>4</span>
						</span>
					</td>
					<td data-date="2026-02-05">
						<span>
							<span>5</span>
						</span>
					</td>
					<td data-date="2026-02-06">
						<span>
							<span>6</span>
						</span>
					</td>
					<td data-date="2026-02-07">
						<span>
							<span>7</span>
						</span>
					</td>
				</tr>
				<tr class="calendar-week">
					<td data-date="2026-02-08">
						<span>
							<span>8</span>
						</span>
					</td>
					<td data-date="2026-02-09">
						<span>
							<span>9</span>
						</span>
					</td>
					<td data-date="2026-02-10" class="event-single">
						<span>
							<span>10</span>
						</span>
					</td>
					<td data-date="2026-02-11" class="event-multiple">
						<span>
							<span class="active">11</span>
						</span>
					</td>
					<td data-date="2026-02-12">
						<span>
							<span>12</span>
						</span>
					</td>
					<td data-date="2026-02-13">
						<span>
							<span>13</span>
						</span>
					</td>
					<td data-date="2026-02-14">
						<span>
							<span>14</span>
						</span>
					</td>
				</tr>
				<tr class="calendar-week">
					<td data-date="2026-02-15">
						<span>
							<span>15</span>
						</span>
					</td>
					<td data-date="2026-02-16">
						<span>
							<span>16</span>
						</span>
					</td>
					<td data-date="2026-02-17">
						<span>
							<span>17</span>
						</span>
					</td>
					<td data-date="2026-02-18">
						<span>
							<span>18</span>
						</span>
					</td>
					<td data-date="2026-02-19">
						<span>
							<span>19</span>
						</span>
					</td>
					<td data-date="2026-02-20">
						<span>
							<span>20</span>
						</span>
					</td>
					<td data-date="2026-02-21">
						<span>
							<span>21</span>
						</span>
					</td>
				</tr>
				<tr class="calendar-week">
					<td data-date="2026-02-22">
						<span>
							<span>22</span>
						</span>
					</td>
					<td data-date="2026-02-23">
						<span>
							<span>23</span>
						</span>
					</td>
					<td data-date="2026-02-24">
						<span>
							<span>24</span>
						</span>
					</td>
					<td data-date="2026-02-25">
						<span>
							<span>25</span>
						</span>
					</td>
					<td data-date="2026-02-26">
						<span>
							<span>26</span>
						</span>
					</td>
					<td data-date="2026-02-27">
						<span>
							<span>27</span>
						</span>
					</td>
					<td data-date="2026-02-28">
						<span>
							<span>28</span>
						</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div class="calendar-footer">
		<div class="accordion-item">
			<button
					class="accordion-button collapsed"
					type="button"
					data-bs-toggle="collapse"
					data-bs-target="#collapseCalendar1"
					aria-expanded="false"
					aria-controls="collapseCalendar1"
			>
					<span class="material-symbols-rounded o-icon" aria-hidden="true">
							calendar_month
					</span>
					<span class="collapse-title">Referencia</span>
			</button>
			<div id="collapseCalendar1" class="accordion-collapse collapse">
				<div class="accordion-body">
					<ul class="calendar-footer-list">
						<li data-date="2026-02-01">
								<strong>1. </strong>
								Nombre del evento 1.
						</li>
						<li data-date="2026-02-01">
							<strong>1. </strong>
							Nombre del evento 2.
						</li>
						<li data-date="2026-02-02">
								<strong>2. </strong>
								Nombre del evento 3.
						</li>
						<li data-date="2026-02-11">
							<strong>11. </strong>
							Nombre del evento 5.
						</li>
						<li data-date="2026-02-11">
							<strong>11. </strong>
							Nombre del evento 6.
						</li>
						<li data-date="2026-02-11">
							<strong>11. </strong>
							Nombre del evento 7.
						</li>
						<li data-date="2026-02-11">
							<strong>11. </strong>
							Nombre del evento 8.
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

	const EVENTS_LIST = [
		{
			date: '2026-02-01', // formato: año-mes-dia
			caption: 'Evento 1',
		},
		{
			date: '2026-02-01',
			caption: 'Evento 2',
		},
		{
			date: '2026-02-02',
			caption: 'Evento 3',
		},
		{
			date: '2026-02-10',
			caption: 'Evento 3',
		},
		{
			date: '2026-02-11',
			caption: 'Evento 3',
		},
		{
			date: '2026-02-11',
			caption: 'Evento 3',
		},
		{
			date: '2026-02-11',
			caption: 'Evento 3',
		},
		{
			date: '2026-02-11',
			caption: 'Evento 3',
		},
	];

	const todayDate = new Date();
	const formattedTodayDate = todayDate.toISOString().split('T')[0];

	// genera y devuelve todos los dias correspondiente a la grilla del mes, incluye los dias del mes pasado y/o anterior de ser necesario
	function getCalendarGrid(month, year, eventsList = []) {
		const calendarGrid = [];
		// const formatDayName = new Intl.DateTimeFormat('es-ES', { weekday: 'long' });
		const updateCalendarGrid = (date, currentMonth = false) => {
			const formattedDate = date.toISOString().split('T')[0];
			calendarGrid.push({
				day: date.getDate(),
				// caption: formatDayName.format(date),
				currentMonth,
				date: formattedDate,
				events: eventsList.filter((event) => event.date === formattedDate),
			});
		}

		// el primer dia del mes y su posiscion en la semana
		const firstDayDate = new Date(year, month, 1);
		const firstDateIndex = firstDayDate.getDay();

		// ultimo dia del mes y su posicion en la semana
		const lastDayDate = new Date(year, month + 1, 0);
		const lastDayIndex = lastDayDate.getDay();

		// dias totales en el mes
		const totalDays = lastDayDate.getDate();		

		// dias del mes anterior
		for (let i = firstDateIndex - 1; i >= 0; i--) {
			const prevDate = new Date(year, month, -i);
			updateCalendarGrid(prevDate);
		}

		// dias del mes actual
		for (let i = 1; i <= totalDays; i++) {
			const date = new Date(year, month, i);
			updateCalendarGrid(date, true);
		}

		// dias del mes siguiente
		const remainingDays = 6 - lastDayIndex;
		for (let i = 1; i <= remainingDays; i++) {
			const nextDate = new Date(year, month + 1, i);
			updateCalendarGrid(nextDate);
		}

		return calendarGrid;
	}

	// renderiza todos los dis del mes del calendario
	function renderCalendarGrid(calendarEl, daysList) {
    const bodyEl = calendarEl.querySelector('.calendar-body tbody');
    if (!bodyEl) return;

    bodyEl.innerHTML = '';

    let row = document.createElement('tr');
    row.classList.add('calendar-week');

    daysList.forEach((day, index) => {
      const td = document.createElement('td');
        
      if (!day.currentMonth) td.classList.add('not-current');
			else td.dataset.date = day.date;

			const isToday = day.date === formattedTodayDate;
			if (day.events.length) {
				td.classList.add('event-' + (day.events.length > 1 ? 'multiple' : 'single'));
			}

			td.innerHTML = '<span><span class="' + (isToday ? 'today' : '') + '">' + day.day + '</span></span>';
			row.appendChild(td);

			if ((index + 1) % 7 === 0) {
				bodyEl.appendChild(row);
				row = document.createElement('tr');
				row.classList.add('calendar-week');
			}
    });

    if (row.children.length > 0 && row.children.length < 7) {
      bodyEl.appendChild(row);
    }
	}

	// abre el accordion y marca el evento si cooncide la fecha
	function handleAccordion(calendarEl, date) {
		// accordion, se abre si esta colapsado
		const collapseEl = calendarEl.querySelector('.accordion-collapse');
		if (collapseEl) {
			const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl);
			bsCollapse.show();
		}

		// mostramos el evento en el accordion
		const referenceList = calendarEl.querySelectorAll('.calendar-footer-list li');
		referenceList.forEach((reference) => {
			reference.classList.remove('fw-bold');
			const eventDate = reference.dataset.date;

			if (eventDate === date) {
				reference.classList.add('fw-bold');
			}
		});
	}

	// crea la instancia del calendario, para evitar conflictos si hay mas de un calendario x pantalla
	function createCalendarInstance(selector, options = {}) {
		const calendarEl = document.querySelector(selector);
		const footerEl = calendarEl.querySelector('.calendar-footer');

		// Eventos de los select y el dia
		const monthSelectEl = calendarEl.querySelector('.month');
		const yearSelectEl = calendarEl.querySelector('.year');
		const daysEl = calendarEl.querySelector('.calendar-body tbody');

		const updateCalendar = (date) => {
			const [m, y] = date;
			const grid = getCalendarGrid(m, y, options.events);
			
			renderCalendarGrid(calendarEl, grid);
		};

		// el mes que mostraria el calenario al instanciarse, por defecto el actual
		let startDate = [todayDate.getMonth(), todayDate.getFullYear()];
		if (options.startDate) {
			const [yStr, mStr] = options.startDate.split('-');
			startDate = [parseInt(mStr) - 1, parseInt(yStr)];
		}

		updateCalendar(startDate);
		
		// los eventos de los elementos
		if (monthSelectEl) {
			monthSelectEl.value = startDate[0]; // month
			monthSelectEl.addEventListener('change', (_) => {
				updateCalendar([parseInt(monthSelectEl.value), parseInt(yearSelectEl.value)]);
			});
		}

		if (yearSelectEl) {
			yearSelectEl.value = startDate[1]; // year
			yearSelectEl.addEventListener('change', (_) => {
				updateCalendar([parseInt(monthSelectEl.value), parseInt(yearSelectEl.value)]);
			});
		}

		daysEl.addEventListener('click', (e) => {
			const cell = e.target.closest('td');
			if (!cell || cell.classList.contains('not-current')) return;

			calendarEl.querySelectorAll('.calendar-body td span span').forEach((el) => el.classList.remove('active'));
			cell.querySelector('span span').classList.add('active');

			if (cell.classList.contains('event-single') || cell.classList.contains('event-multiple')) {
				handleAccordion(calendarEl, cell.dataset.date);
			}
		});
	}

	
	// define la instancia de un calendario
	createCalendarInstance('#calendar', {
		startDate: '2026-02', // formato: año-mes, es el mes que se va a mostrar, de no pasarlo se mostrara el actual
		events: EVENTS_LIST,
	});

<div class="calendar">
    <div class="calendar-header">
        <h2 class="calendar-title">Enero</h2>
        <span class="calendar-year">2024</span>
    </div>
    <div class="calendar-body">
        <table>
        <thead>
            <tr class="calendar-week-header">
            <th><span>D</span></th>
            <th><span>L</span></th>
            <th><span>M</span></th>
            <th><span>M</span></th>
            <th><span>J</span></th>
            <th><span>V</span></th>
            <th><span>S</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="calendar-week">
            <td></td>
            <td>
              <a href="#" class="calendar-link" title="Nombre del evento.">
                <span class="active">1</span>
              </a>
            </td>
            <td><span>2</span></td>
            <td><span>3</span></td>
            <td><span>4</span></td>
            <td><span>5</span></td>
            <td><span>6</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>7</span></td>
            <td><span>8</span></td>
            <td><span>9</span></td>
            <td>
              <a href="#" class="calendar-link" title="Nombre del evento.">
                <span class="active">10</span>
              </a>
            </td>
            <td><span>11</span></td>
            <td><span>12</span></td>
            <td><span>13</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>14</span></td>
            <td><span>15</span></td>
            <td><span>16</span></td>
            <td><span>17</span></td>
            <td><span>18</span></td>
            <td><span>19</span></td>
            <td><span>20</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>21</span></td>
            <td><span>22</span></td>
            <td><span>23</span></td>
            <td><span>24</span></td>
            <td>
              <a href="#" class="calendar-link" title="Nombre del evento.">
                <span class="active">25</span>
              </a>
            </td>
            <td><span>26</span></td>
            <td><span>27</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>28</span></td>
            <td><span>29</span></td>
            <td><span>30</span></td>
            <td><span>31</span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
            <tr class="calendar-week">
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
        </tbody>
        </table>
    </div>
    <div class="calendar-footer">
        <ul class="calendar-footer-list">
        <li>
            <strong>1. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>10. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>25. </strong>
            Nombre del evento.
        </li>
        </ul>
    </div>
</div>

<div class="calendar">
    <div class="calendar-header">
        <h2 class="calendar-title">Enero</h2>
        <span class="calendar-year">2024</span>
    </div>
    <div class="calendar-body">
        <table>
        <thead>
            <tr class="calendar-week-header">
            <th><span>D</span></th>
            <th><span>L</span></th>
            <th><span>M</span></th>
            <th><span>M</span></th>
            <th><span>J</span></th>
            <th><span>V</span></th>
            <th><span>S</span></th>
            </tr>
        </thead>
        <tbody>
            <tr class="calendar-week">
            <td></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active-secondary">1</span>
                </span>
            </td>
            <td><span>2</span></td>
            <td><span>3</span></td>
            <td><span>4</span></td>
            <td><span>5</span></td>
            <td><span>6</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>7</span></td>
            <td><span>8</span></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">9</span>
                </span>
            </td>
            <td><span>10</span></td>
            <td><span>11</span></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active-secondary">12</span>
                </span>
            </td>
            <td>
                <span title="Nombre del evento.">
                <span class="active-secondary">13</span>
                </span>
            </td>
            </tr>
            <tr class="calendar-week">
            <td><span>14</span></td>
            <td><span>15</span></td>
            <td><span>16</span></td>
            <td><span>17</span></td>
            <td><span>18</span></td>
            <td><span>19</span></td>
            <td><span>20</span></td>
            </tr>
            <tr class="calendar-week">
            <td><span>21</span></td>
            <td><span>22</span></td>
            <td><span>23</span></td>
            <td><span>24</span></td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">25</span>
                </span>
            </td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">26</span>
                </span>
            </td>
            <td>
                <span title="Nombre del evento.">
                <span class="active">27</span>
                </span>
            </td>
            </tr>
            <tr class="calendar-week">
            <td><span>28</span></td>
            <td><span>29</span></td>
            <td><span>30</span></td>
            <td><span>31</span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
            <tr class="calendar-week">
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            <td><span></span></td>
            </tr>
        </tbody>
        </table>
    </div>
    <div class="calendar-footer">
        <ul class="calendar-footer-list">
        <li>
            <strong>1. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>9. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>12, 13. </strong>
            Nombre del evento.
        </li>
        <li>
            <strong>25 al 27. </strong>
            Nombre del evento.
        </li>
        </ul>
    </div>
</div>