mehr vorlesungen, farben, kleinerer text

author: Friedrich Beckmann <friedrich.beckmann@gmx.de> 2025-04-04 22:31:57 +0200
committer: Friedrich Beckmann <friedrich.beckmann@gmx.de> 2025-04-04 22:31:57 +0200
commit: d120b47cb9e2282d3e5d3e42964485ac3eaa49a8 (patch)
tree: 7010dac9f8c807ea7651f0cc9a61cc71cb5584ec /index.html
parent: cf0e5d04eeeb75d02cdf2c422ab3c081d5716d03 (diff)
1 files changed, 152 insertions, 2 deletions
diff --git a/index.html b/index.html
index ae190b0..636f3b2 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,25 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Event Calendar</title>
+    <link rel="stylesheet" href="calendar/event-calendar.min.css">
+    <link rel="stylesheet" href="calendar/global.css">
+    <script src="calendar/event-calendar.min.js"></script>
+
+    <style>
+        .ec-timeline .ec-time, .ec-timeline .ec-line {
+            width: 80px;
+        }
+    </style>
 </head>
 <body>
 <header class="row">
     <h4 class="col"><a href="https://github.com/vkurko/calendar">Event Calendar</a> Demo</h4>
 </header>
 <main>
+<p>Stundenplan</p>
+    <div id="ec" class="col"></div>
+
+<p>Liste der Wahlpflichtfächer</p>
     <table id="myTable">
         <thead>
           <tr>
@@ -35,8 +48,7 @@
 </main>
 
 <script type="text/javascript">
-    const courses = [{"Vertiefung": "Elektronik", "Name": "Mikroelektronik", "Dozent": "Beckmann", "Semester": "WS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "14:00", "Ende1": "15:30", "Raum1": "E6.04", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Energie", "Name": "Erneuerbare Energien", "Dozent": "Schw\u00e4gerl", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "14:00", "Ende1": "17:10", "Raum1": "A3.10", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Autom./Robotik", "Name": "Robot Systems Engineering", "Dozent": "Dietrich", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Mittwoch", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "H1.22", "Tag2": "Donnerstag", "Startzeit2": "11:40", "Ende2": "13:10", "Raum2": "H1.22"}, {"Vertiefung": "Elektronik", "Name": "Schaltungstechnik", "Dozent": "Kopystynski", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "A3.19", "Tag2": "Donnerstag", "Startzeit2": "14:00", "Ende2": "15:30", "Raum2": "A2.15"}];
-
+const courses = [{"Vertiefung": "Kommunikation", "Name": "Hochfrequenztechnik", "Dozent": "Stolle", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Dienstag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A2.16", "Tag2": "Donnerstag", "Startzeit2": "09:50", "Ende2": "11:20", "Raum2": "E3.06"}, {"Vertiefung": "Kommunikation", "Name": "Nachrichtentechnik", "Dozent": "Kamuf", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Mittwoch", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A2.16/E6.01", "Tag2": "Freitag", "Startzeit2": "14:00", "Ende2": "15:30", "Raum2": "A2.16/E6.01"}, {"Vertiefung": "Information", "Name": "K\u00fcnstliche Intelligenz", "Dozent": "Legat", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A3.10", "Tag2": "Montag", "Startzeit2": "17:10", "Ende2": "18:40", "Raum2": "E3.06"}, {"Vertiefung": "Information", "Name": "Digitale Zwillinge", "Dozent": "Legat", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "H1.22", "Tag2": "Freitag", "Startzeit2": "09:50", "Ende2": "11:20", "Raum2": "H1.22"}, {"Vertiefung": "Energietechnik", "Name": "Erneuerbare Energien", "Dozent": "Schw\u00e4gerl", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "14:00", "Ende1": "17:10", "Raum1": "A3.10", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Energietechnik", "Name": "Erneuerbare Energien Praktikum", "Dozent": "Schw\u00e4gerl", "Semester": "SS", "SWS": "2", "CP": "2", "Tag1": "Mittwoch", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "E1.01", "Tag2": "Mittwoch", "Startzeit2": "14:00", "Ende2": "15:30", "Raum2": "E1.01"}, {"Vertiefung": "Energietechnik", "Name": "Elektrische Maschinen", "Dozent": "Meyer", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Dienstag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A3.13", "Tag2": "Donnerstag", "Startzeit2": "08:00", "Ende2": "09:30", "Raum2": "E3.06"}, {"Vertiefung": "Energietechnik", "Name": "Leistungselektronik", "Dozent": "Ritter", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Donnerstag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A3.10", "Tag2": "Donnerstag", "Startzeit2": "14:00", "Ende2": "15:30", "Raum2": "H1.22"}, {"Vertiefung": "Energietechnik", "Name": "Hochspannungstechnik", "Dozent": "Finkel", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Dienstag", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "E1.02", "Tag2": "Freitag", "Startzeit2": "09:50", "Ende2": "11:20", "Raum2": "E1.02"}, {"Vertiefung": "Elektronik", "Name": "Schaltungstechnik", "Dozent": "Kopystynski", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Montag", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "A3.19", "Tag2": "Donnerstag", "Startzeit2": "14:00", "Ende2": "15:30", "Raum2": "A2.15"}, {"Vertiefung": "Elektronik", "Name": "Messtechnik 2", "Dozent": "Gro\u00dfmann", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Dienstag", "Startzeit1": "14:00", "Ende1": "15:30", "Raum1": "E3.06", "Tag2": "Freitag", "Startzeit2": "08:00", "Ende2": "09:30", "Raum2": "E3.06"}, {"Vertiefung": "Autom./Robotik", "Name": "Robot Systems Engineering", "Dozent": "Dietrich", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Mittwoch", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "H1.22", "Tag2": "Donnerstag", "Startzeit2": "11:40", "Ende2": "13:10", "Raum2": "H1.22"}, {"Vertiefung": "Autom./Robotik", "Name": "Automatisierungstechnik", "Dozent": "Zeller", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Mittwoch", "Startzeit1": "08:00", "Ende1": "11:20", "Raum1": "E4.06", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Aufbau", "Name": "Messtechnik Praktikum", "Dozent": "Gro\u00dfmann", "Semester": "SS", "SWS": "2", "CP": "2", "Tag1": "Montag", "Startzeit1": "14:00", "Ende1": "17:10", "Raum1": "E3.01", "Tag2": "Dienstag", "Startzeit2": "08:00", "Ende2": "11:20", "Raum2": "E3.01"}, {"Vertiefung": "Allgemein", "Name": "Systemdenken", "Dozent": "K\u00f6nigbauer", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Donnerstag", "Startzeit1": "15:40", "Ende1": "18:40", "Raum1": "E4.06", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Allgemein", "Name": "Matlab/Simulink", "Dozent": "Werthschulte", "Semester": "WS/SS", "SWS": "2", "CP": "2", "Tag1": "Montag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "H3.15", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Allgemein", "Name": "Optimale Prozesse und Produkte", "Dozent": "Frommelt", "Semester": "SS", "SWS": "2", "CP": "2", "Tag1": "Montag", "Startzeit1": "11:40", "Ende1": "13:10", "Raum1": "H3.10", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Allgemein", "Name": "Systems Engineering", "Dozent": "Frommelt", "Semester": "WS/SS", "SWS": "4", "CP": "5", "Tag1": "Freitag", "Startzeit1": "14:00", "Ende1": "17:10", "Raum1": "H1.28", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}, {"Vertiefung": "Allgemein", "Name": "Fertigungstechnik", "Dozent": "Dietrich", "Semester": "SS", "SWS": "4", "CP": "5", "Tag1": "Dienstag", "Startzeit1": "08:00", "Ende1": "09:30", "Raum1": "E4.06", "Tag2": "Freitag", "Startzeit2": "09:50", "Ende2": "11:20", "Raum2": "A3.10"}, {"Vertiefung": "Allgemein", "Name": "Sicherheitstechnik", "Dozent": "Pasker", "Semester": "SS", "SWS": "2", "CP": "2", "Tag1": "Freitag", "Startzeit1": "09:50", "Ende1": "11:20", "Raum1": "A2.15", "Tag2": "", "Startzeit2": "", "Ende2": "", "Raum2": ""}];
 const table = document.getElementById("tableBody");
 courses.map(course=>{
    let row = table.insertRow();
@@ -50,6 +62,12 @@ courses.map(course=>{
 
 function onCheckBoxClicked(e) {
     console.log("clicked", e);
+    if (e.currentTarget.checked) {
+        addtocalendar(e.currentTarget.id);
+    } else {
+        removefromcalendar(e.currentTarget.id);
+    }
+    return;
     let listofchecked = [];
     courses.map(course=>{
         const checkb = document.getElementById(course.Name);
@@ -58,8 +76,140 @@ function onCheckBoxClicked(e) {
         }
     });
     console.log(listofchecked);
+}
+
+function dayname2number(dayname) {
+    const d2n = new Map ([
+        ["Montag", 1], 
+        ["Dienstag", 2],
+        ["Mittwoch", 3],
+        ["Donnerstag", 4],
+        ["Freitag", 5],
+        ["Samstag", 6]
+    ]);
+    return d2n.get(dayname);
+}
+
+function addpart2calendar (name,dozent,tag,startzeit,ende,raum,id,color) {
+    let day = new Date();
+    day.setDate(day.getDate() - day.getDay() + dayname2number(tag));
+    caldatestring = day.getFullYear() + "-" + _pad(day.getMonth()+1) + "-" + _pad(day.getDate()) + " "
+    event = {
+        "start": caldatestring + startzeit,
+        "end":   caldatestring + ende,
+        "title": {html: name + "</br>" + "Raum: " + raum},
+        "id": id,
+        "color": color
+    };
+    ec.addEvent(event) ;
+}
 
+function hsv2rgb(h,s,v) 
+{                              
+  let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);
+  return "#" + (1 << 24 | f(5)*255 << 16 | f(3)*255 << 8 | f(1)*255).toString(16).slice(1); 
+}   
+
+function addtocalendar(name) {
+    course = courses.find((element) => element.Name == name);
+    hue = courses.indexOf(course)*360.0/courses.length;
+    color = hsv2rgb(hue,1.0,1.0);
+    if (dayname2number(course.Tag1) === undefined)
+        return;
+    addpart2calendar(course.Name,course.Dozent,
+      course.Tag1,course.Startzeit1,course.Ende1,
+      course.Raum1,course.Name+"1",color);
+    if (dayname2number(course.Tag2) === undefined)
+        return;
+    addpart2calendar(course.Name,course.Dozent,
+      course.Tag2,course.Startzeit2,course.Ende2,
+      course.Raum2,course.Name+"2",color);
+}
+
+function removefromcalendar(name) {
+        ec.removeEventById(name + "1");
+        ec.removeEventById(name + "2");
 }
+
+const ec = new EventCalendar(document.getElementById('ec'), {
+        view: 'timeGridWeek',
+        headerToolbar: {
+            start: 'prev,next today',
+            center: 'title',
+            end: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek resourceTimeGridWeek,resourceTimelineWeek'
+        },
+        resources: [
+            {id: 1, title: 'Resource A'},
+            {id: 2, title: 'Resource B'}
+        ],
+        scrollTime: '09:00:00',
+        events: createEvents(),
+        views: {
+            timeGridWeek: {pointer: true},
+            resourceTimeGridWeek: {pointer: true},
+            resourceTimelineWeek: {
+                pointer: true,
+                slotMinTime: '09:00',
+                slotMaxTime: '21:00',
+                slotWidth: 80,
+                resources: [
+                    {id: 1, title: 'Resource A'},
+                    {id: 2, title: 'Resource B'},
+                    {id: 3, title: 'Resource C'},
+                    {id: 4, title: 'Resource D'},
+                    {id: 5, title: 'Resource E'},
+                    {id: 6, title: 'Resource F'},
+                    {id: 7, title: 'Resource G'},
+                    {id: 8, title: 'Resource H'},
+                    {id: 9, title: 'Resource I', children: [
+                        {id: 10, title: 'Resource J'},
+                        {id: 11, title: 'Resource K'},
+                        {id: 12, title: 'Resource L', children: [
+                            {id: 13, title: 'Resource M'},
+                            {id: 14, title: 'Resource N'},
+                            {id: 15, title: 'Resource O'}
+                        ]}
+                    ]}
+                ]
+            }
+        },
+        dayMaxEvents: true,
+        nowIndicator: true,
+        firstDay: 1,
+        hiddenDays: [0,6],
+        selectable: true
+    });
+
+    function createEvents() {
+        return [];
+        let days = [];
+        for (let i = 0; i < 7; ++i) {
+            let day = new Date();
+            let diff = i - day.getDay();
+            day.setDate(day.getDate() + diff);
+            days[i] = day.getFullYear() + "-" + _pad(day.getMonth()+1) + "-" + _pad(day.getDate());
+        }
+
+        return [
+            {start: days[0] + " 00:00", end: days[0] + " 09:00", resourceId: 1, display: "background"},
+            {start: days[1] + " 12:00", end: days[1] + " 14:00", resourceId: 2, display: "background"},
+            {start: days[2] + " 17:00", end: days[2] + " 24:00", resourceId: 1, display: "background"},
+            {start: days[0] + " 10:00", end: days[0] + " 14:00", resourceId: 1, title: "The calendar can display background and regular events", color: "#FE6B64"},
+            {start: days[1] + " 16:00", end: days[2] + " 08:00", resourceId: 2, title: "An event may span to another day", color: "#B29DD9"},
+            {start: days[2] + " 09:00", end: days[2] + " 13:00", resourceId: 2, title: "Events can be assigned to resources and the calendar has the resources view built-in", color: "#779ECB"},
+            {start: days[3] + " 14:00", end: days[3] + " 20:00", resourceId: 1, title: "", color: "#FE6B64"},
+            {start: days[3] + " 15:00", end: days[3] + " 18:00", resourceId: 1, title: "Overlapping events are positioned properly", color: "#779ECB"},
+            {start: days[5] + " 10:00", end: days[5] + " 16:00", resourceId: 2, title: {html: "You have complete control over the <i><b>display</b></i> of events…"}, color: "#779ECB"},
+            {start: days[5] + " 14:00", end: days[5] + " 19:00", resourceId: 2, title: "…and you can drag and drop the events!", color: "#FE6B64"},
+            {start: days[5] + " 18:00", end: days[5] + " 21:00", resourceId: 2, title: "", color: "#B29DD9"},
+            {start: days[1], end: days[3], resourceId: 1, title: "All-day events can be displayed at the top", color: "#B29DD9", allDay: true}
+        ];
+    }
+
+    function _pad(num) {
+        let norm = Math.floor(Math.abs(num));
+        return (norm < 10 ? '0' : '') + norm;
+    }
 </script>
 </body>
 </html>
author	Friedrich Beckmann <friedrich.beckmann@gmx.de>	2025-04-04 22:31:57 +0200
committer	Friedrich Beckmann <friedrich.beckmann@gmx.de>	2025-04-04 22:31:57 +0200
commit	d120b47cb9e2282d3e5d3e42964485ac3eaa49a8 (patch)
tree	7010dac9f8c807ea7651f0cc9a61cc71cb5584ec /index.html
parent	cf0e5d04eeeb75d02cdf2c422ab3c081d5716d03 (diff)