Feature #8658
closed
Calendar UI read/write/show
0%
Description
- Fuer 'Consulting' benoetigt QFQ eine Moeglichkeit Time Slots anzubieten, in denen anonnyme User ein Date buchen koennen.
- Die User sollen sehen koennen welche Zeiten alle moeglich sind und selber Termine eintragen koennen.
- Die User sehen nur moegliche Zeiten. Erfolgte Belegungen koennen nicht gebucht werden (werden nicht angeboten)
- Option:
- Keine Slots vorgeben, jeder Termin sollte moeglich sein.
- Mehrere Calender koennen uebereinander gelegt werden.
- Option: CR moechte die Planung der Studies (wann wer da ist, wiederkehrende Termine mit Ausnahmen) darueber laufen lassen.
Kleine Google Suche:
- https://github.com/ZContent/icalendar
- https://icalendar.org/ - Testet ical Files.
- https://icalendar.org/php-library.html - Library.
- https://www.twilio.com/blog/how-create-ical-calendar-feed-php-laravel-lumen
- https://www.phpclasses.org/package/9277-PHP-Parse-iCalendar-ics-files-to-extract-event-details.html#view_files
Suche: calendar ui javascript php
- https://github.com/BrandonDusseau/ics-display
- https://fullcalendar.io/ (<<< Sieht gut aus, MIT Lizenz)
- https://www.jqueryscript.net/tags.php?/Calendar/
Related issues
Updated by Marc Egger over 4 years ago
- Due date changed from 11.07.2019 to 30.09.2019
Updated by Carsten Rose over 4 years ago
- Tracker changed from Support to Feature
Updated by Marc Egger about 4 years ago
- Due date changed from 30.09.2019 to 30.10.2019
Updated by Marc Egger about 4 years ago
- Due date changed from 30.10.2019 to 30.11.2019
Updated by Marc Egger about 4 years ago
- Related to Feature #8056: Termin Organisation (Reservation) added
Updated by Marc Egger about 4 years ago
- Due date changed from 30.11.2019 to 31.12.2019
Updated by Carsten Rose almost 4 years ago
- Status changed from New to Some day maybe
Updated by Benjamin Baer almost 4 years ago
- Vermutlich wird fullCalendar eingebunden
- Implementierung wird getestet im Branch f8658-Calendar
- Testsetup auf webwork16/bbaer
(nur notizen)
Updated by Benjamin Baer almost 4 years ago
Implementiert.
Beispiel: https://webwork16.math.uzh.ch/bbaer/index.php?id=12
Neue Includes:
CSS
file08 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/core/main.css
file09 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/daygrid/main.css
file10 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/timegrid/main.css
JS
file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/core/main.min.js
file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/daygrid/main.min.js
file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/timegrid/main.min.js
Aufruf:
<div class="qfq-calendar" data-config='{ "plugins": [ "timeGrid" ] }'></div>
Events hinzufuegen:
events: [
{
id: 'a',
title: 'my event',
start: '2020-01-21'
},
{
id: 'b',
title: 'my other event',
start: '2020-01-16T09:00:00',
end: '2020-01-16T11:30:00'
}
]
Ist Part von data-config - kann auch extern geladen werden. Dazu im data-config das events auf eine URL setzen: "events": "https://..../event-api" oder "https://.../events.json"
Nuetzliche Parameter:
"weekends": "true" / "false" (anzeige der Wochenende)
"minTime" / "maxTime": "09:00:00" (setzt die Mindest / Maximale Zeit die angezeigt wird im Kalender)
"businessHours": <object> (Graut Zeiten aus)
Updated by Benjamin Baer almost 4 years ago
Simplified the includes:
typo3conf/ext/qfq/Resources/Public/Css/fullCalendar.min.css
typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar.min.js
Updated by Benjamin Baer almost 4 years ago
Neuer / Alter Kalender!
- Latest fullCalendar.js ist fuer BS4 - es gibt Probleme bei der Darstellung.
- Downgrade damit wir BS3 verwenden koennen.
neues Zeug zum Einbinden:
CSS
file08 = typo3conf/ext/qfq/Resources/Public/Css/fullcalendar.min.css
JS
file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/moment.min.js
file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullcalendar.min.js
Vorsicht: Neu Kleingeschrieben!~
beispiel auf der seite:10.sql = SELECT 'Test' 10.head = <div class="qfq-calendar" data-config='{ "themeSystem": "bootstrap3", "height": "auto", "weekends": false, "defaultView": "agendaWeek", "minTime": "05:00:00", "maxTime": "20:00:00", "businessHours": { "daysOfWeek": [ 1, 2, 3, 4 ], "startTime": "10:00", "endTime": "18:00" }, "events": [ { "id": "a","title": "my event","start": "2020-01-21"}, {"id": "b", "title": "my other event", "start": "2020-01-16T09:00:00", "end": "2020-01-16T11:30:00"} ]}'></div>
Wichtig: agendaWeek anstelle von timeGrid, kein Plugin mehr.
Ansehbar hier: https://webwork16.math.uzh.ch/bbaer/index.php?id=12
Updated by Benjamin Baer almost 4 years ago
10.sql = SELECT 'Test'
10.head = <div class="qfq-calendar" data-config='{
"themeSystem": "bootstrap3",
"height": "auto",
"defaultDate": "2020-01-13",
"weekends": false,
"defaultView": "agendaWeek",
"minTime": "05:00:00",
"maxTime": "20:00:00",
"businessHours": { "daysOfWeek": [ 1, 2, 3, 4 ], "startTime": "10:00", "endTime": "18:00" },
"events": [
{ "id": "a","title": "my event","start": "2020-01-21"},
{"id": "b", "title": "my other event", "start": "2020-01-16T09:00:00", "end": "2020-01-16T11:30:00"}
]}'></div>
Updated by Benjamin Baer almost 4 years ago
Hinzugefuegt.
5.sql = SELECT 'Test'
5.head = <div class="qfq-calendar" data-config='{
"themeSystem": "bootstrap3",
"height": "auto",
"header": {
"left": "title",
"center": "",
"right": "agenda,listWeek"
},
"defaultDate": "2020-01-14",
"allDaySlot": false,
"weekends": false,
"defaultView": "agenda",
"dayCount": 3,
"minTime": "05:00:00",
"maxTime": "20:00:00",
"businessHours": { "daysOfWeek": [ 1, 2, 3, 4 ], "startTime": "10:00", "endTime": "18:00" },
"events": [
{ "id": "a","title": "my event","start": "2020-01-15T10:15:00", "end": "2020-01-15T11:50:00", "color": "#25adf1", "textColor": "#000"},
{"id": "b", "title": "my other event", "start": "2020-01-16T09:00:00", "end": "2020-01-16T11:30:00", "color": "#5cb85c", "textColor": "#000"},
{"id": "c", "title": "Eventli", "start": "2020-01-15T13:10:00", "end": "2020-01-15T16:30:00", "color": "#fbb64f", "textColor": "#000"},
{"id": "d", "title": "Evento", "start": "2020-01-14T13:50:00", "end": "2020-01-14T15:00:00", "color": "#fb4f4f", "textColor": "#000"}
]}'></div>
https://webwork16.math.uzh.ch/bbaer/index.php?id=12
Beispiel mit Farben pro Event, custom header und nur einer bestimmten Anzahl Tage (hier durch defaultView: Agenda, dayCount: 3, kann aber auch durch ranges eingestellt werden.)
Updated by Benjamin Baer almost 4 years ago
5.sql = SELECT 'Test'
5.head = <div class="qfq-calendar" data-config='{
"themeSystem": "bootstrap3",
"height": "auto",
"header": {
"left": "title",
"center": "",
"right": "agenda,listWeek"
},
"defaultDate": "2020-01-14",
"now": "1999-12-31",
"allDaySlot": false,
"weekends": false,
"defaultView": "agenda",
"dayCount": 3,
"minTime": "05:00:00",
"maxTime": "20:00:00",
"businessHours": { "daysOfWeek": [ 1, 2, 3, 4 ], "startTime": "10:00", "endTime": "18:00" },
"events": [
{ "id": "a","title": "my event","start": "2020-01-15T10:15:00", "end": "2020-01-15T11:50:00", "color": "#25adf1", "textColor": "#000"},
{"id": "b", "title": "my other event", "start": "2020-01-16T09:00:00", "end": "2020-01-16T11:30:00", "color": "#5cb85c", "textColor": "#000"},
{"id": "c", "title": "Eventli", "start": "2020-01-15T13:10:00", "end": "2020-01-15T16:30:00", "color": "#fbb64f", "textColor": "#000"},
{"id": "d", "title": "Evento", "start": "2020-01-14T13:50:00", "end": "2020-01-14T15:00:00", "color": "#fb4f4f", "textColor": "#000"},
{"id": "d", "title": "Busy", "start": "2020-01-14T09:00:00", "end": "2020-01-14T12:00:00", "color": "#ccc", "textColor": "#000"},
{"id": "e", "title": "Banana", "start": "2020-01-16T13:30:00", "end": "2020-01-16T16:00:00", "color": "#fff45b", "textColor": "#000"}
]}'></div>
Noch ein update. 2 mehr farben hinzugefuegt.
Man kann den "heute" indikator nicht aendern (ausser generell entfernen per CSS) aber man kann heute auf ein falsches Datum setzen, deswegen now: "1999-12-31" - denke es ist die bessere Variante, da man teilweise den heute Indikator sehen will.
Updated by Carsten Rose almost 4 years ago
- Status changed from Some day maybe to New
- Assignee changed from Marc Egger to Benjamin Baer
Danke, sieht sehr schoen aus.
New:
- Wie stellt man denn auf Deutsch um? https://fullcalendar.io/docs/v3/locale - hat bei mir nicht funktioniert.
- Wie aendert man die Achsenbeschriftung?
Vielen Dank
Updated by Benjamin Baer almost 4 years ago
https://webwork16.math.uzh.ch/bbaer/index.php?id=12
anfuegen: "locale": "de-ch"
plus importieren der gewuenschten locale like so:
file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/de-ch.js
file16 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/fr-ch.js
file17 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/it.js
oder
typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar/locale-all.js
ist im fullCalendarBS3 branch
Updated by Carsten Rose almost 4 years ago
- Related to Support #9924: fullCalendar: events do not start on full hour added
Updated by Benjamin Baer almost 4 years ago
- Status changed from New to Priorize
Updated by Carsten Rose almost 4 years ago
- Status changed from Priorize to Closed
- Target version set to 20.2.0