Crear un panel con FullCalendar y Flatpickr

FullCalendar te da un calendario interactivo (vista mensual/semanal, eventos, arrastrar, etc.). Flatpickr es un selector de fechas ligero y muy cómodo. Juntos sirven para montar un panel tipo “agenda” o “gestión de proyectos”.

1) Incluir librerías (CDN)

FullCalendar:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>

Flatpickr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

2) HTML del panel

<div class="container my-4">
  <div class="row g-4">
    <div class="col-12 col-lg-8">
      <div id="calendar"></div>
    </div>
    <div class="col-12 col-lg-4">
      <h2 class="h5">Crear evento (demo)</h2>
      <input id="date" class="form-control mb-2" placeholder="Selecciona fecha">
      <input id="title" class="form-control mb-2" placeholder="Título">
      <button id="add" class="btn btn-primary w-100">Añadir</button>
    </div>
  </div>
</div>

3) Inicializar FullCalendar

let calendar;

document.addEventListener("DOMContentLoaded", () => {
  const el = document.querySelector("#calendar");

  calendar = new FullCalendar.Calendar(el, {
    initialView: "dayGridMonth",
    height: "auto",
    locale: "es",
    events: [
      { title: "Demo", start: "2026-04-24" },
    ],
  });

  calendar.render();
});

4) Inicializar Flatpickr y crear eventos

document.addEventListener("DOMContentLoaded", () => {
  const dateInput = document.querySelector("#date");
  const titleInput = document.querySelector("#title");
  const addBtn = document.querySelector("#add");

  flatpickr(dateInput, { dateFormat: "Y-m-d" });

  addBtn.addEventListener("click", () => {
    const start = dateInput.value;
    const title = titleInput.value.trim();

    if (!start || !title) return;
    calendar.addEvent({ title, start });

    titleInput.value = "";
  });
});

5) Siguiente paso real

En un panel real (como “JNO Software”), lo normal es persistir eventos en una API o en localStorage y añadir:

Editar/borrar eventos
Vista semanal / lista
Arrastrar y soltar (drag & drop)
Filtros por proyecto/usuario