JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="calendar-container">
  <!-- Die Tabelle wird dynamisch per JavaScript erzeugt -->
</div>

CSS

body {
      font-family: sans-serif;
      margin: 20px;
    }

    /* Container für den Kalender */
    #calendar-container {
      overflow-x: auto; /* Damit die Tabelle scrollbar wird, wenn sie zu breit ist */
      white-space: nowrap;
    }

    table {
      border-collapse: collapse;
      min-width: 800px;
      width: 100%;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
      text-align: center;
      position: relative;
    }

    th {
      background-color: #f2f2f2;
      font-weight: bold;
    }

    /* Zelle mit dem Ressourcennamen (linke Spalte) */
    .resource-cell {
      background-color: #fafafa;
      text-align: left;
      white-space: nowrap;
      width: 150px;
      font-weight: bold;
    }

    /* Event-Balken (wird in die Zelle gelegt) */
    .event-block {
      background-color: rgba(0, 128, 255, 0.2);
      border: 1px solid #007BFF;
      border-radius: 4px;
      padding: 3px 5px;
      margin: 2px;
      display: block;
      text-align: center;
      font-size: 0.9em;
    }

JavaScript

/**
 * Beispiel-Ressourcen
 */
const resources = [
  "Resource A",
  "Resource B",
  "Resource C",
  "Resource D",
  "Resource E",
  "Resource F",
  "Resource G"
];

/**
 * Beispiel-Events
 * - start und end sind JS-Date-Objekte
 * - Achtung: Monat in JS ist 0-basiert (0 = Januar, 11 = Dezember)
 */
const events = [
  {
    title: "Event 1",
    resource: "Resource A",
    start: new Date(2021, 11, 1),  // 01.12.2021
    end: new Date(2021, 11, 3),    // 03.12.2021
    color: "#FF9999"
  },
  {
    title: "Event 2",
    resource: "Resource A",
    start: new Date(2021, 11, 5),  // 05.12.2021
    end: new Date(2021, 11, 5),    // 05.12.2021 (eintägig)
    color: "#FFA500"
  },
  {
    title: "Event 3",
    resource: "Resource B",
    start: new Date(2021, 11, 2),  // 02.12.2021
    end: new Date(2021, 11, 4),    // 04.12.2021
    color: "#99CCFF"
  },
  {
    title: "Event 4",
    resource: "Resource C",
    start: new Date(2021, 11, 10), // 10.12.2021
    end: new Date(2021, 11, 12),   // 12.12.2021
    color: "#99FFCC"
  },
  {
    title: "Event 5",
    resource: "Resource G",
    start: new Date(2021, 11, 5),
    end: new Date(2021, 11, 7),
    color: "#CCFF99"
  }
];

/**
 * Erzeugt eine Liste aller Datumsobjekte zwischen start und end (inklusive).
 * Wir arbeiten hier nur auf Tagesebene (keine Stunden/Minuten).
 */
function getDateRange(start, end) {
  const dates = [];
  const current = new Date(start);
  // auf 00:00 Uhr setzen, um Vergleiche zu vereinfachen
  current.setHours(0,0,0,0);

  while (current <= end) {
    dates.push(new Date(current));
    current.setDate(current.getDate() + 1);
  }
  return dates;
}

/**
 * Hilfsfunktion, um zu prüfen, ob zwei Datumsobjekte am selben Tag liegen.
 */
function isSameDay(d1, d2) {
  return (
    d1.getFullYear() === d2.getFullYear() &&
    d1.getMonth() === d2.getMonth() &&
    d1.getDate() === d2.getDate()
  );
}

/**
 * Generiert den Kalender (Tabelle) und platziert die Events
 */
function...