Project

General

Profile

Feature #8658

Calendar UI read/write/show

Added by Carsten Rose over 1 year ago. Updated 10 months ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
Start date:
02.07.2019
Due date:
% Done:

0%

Estimated time:
Discuss:

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:

Suche: calendar ui javascript php


Related issues

Related to QFQ - Feature #8056: Termin Organisation (Reservation)Some day maybe15.03.2019

Actions
Related to QFQ - Support #9924: fullCalendar: events do not start on full hourClosedBenjamin Baer21.01.2020

Actions
#1

Updated by Carsten Rose over 1 year ago

  • Description updated (diff)
#2

Updated by Marc Egger over 1 year ago

  • Due date changed from 11.07.2019 to 30.09.2019
#3

Updated by Carsten Rose over 1 year ago

  • Tracker changed from Support to Feature
#4

Updated by Marc Egger about 1 year ago

  • Due date changed from 30.09.2019 to 30.10.2019
#5

Updated by Marc Egger about 1 year ago

  • Due date changed from 30.10.2019 to 30.11.2019
#7

Updated by Marc Egger about 1 year ago

  • Related to Feature #8056: Termin Organisation (Reservation) added
#8

Updated by Marc Egger about 1 year ago

  • Due date changed from 30.11.2019 to 31.12.2019
#9

Updated by Carsten Rose 12 months ago

  • Status changed from New to Some day maybe
#10

Updated by Marc Egger 12 months ago

  • Due date deleted (31.12.2019)
#12

Updated by Marc Egger 11 months ago

  • Description updated (diff)
#13

Updated by Marc Egger 11 months ago

  • Description updated (diff)
#14

Updated by Benjamin Baer 11 months ago

  • Vermutlich wird fullCalendar eingebunden
  • Implementierung wird getestet im Branch f8658-Calendar
  • Testsetup auf webwork16/bbaer

(nur notizen)

#15

Updated by Benjamin Baer 11 months 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)

#16

Updated by Benjamin Baer 11 months ago

Simplified the includes:

typo3conf/ext/qfq/Resources/Public/Css/fullCalendar.min.css
typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar.min.js

#17

Updated by Benjamin Baer 11 months 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

#18

Updated by Benjamin Baer 11 months ago

Alles im FullCalendarBS3 Branch

#19

Updated by Benjamin Baer 11 months 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>
#20

Updated by Benjamin Baer 11 months 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.)

#21

Updated by Benjamin Baer 11 months 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.

#22

Updated by Carsten Rose 11 months ago

  • Status changed from Some day maybe to New
  • Assignee changed from Marc Egger to Benjamin Baer

Danke, sieht sehr schoen aus.

New:

Vielen Dank

#23

Updated by Benjamin Baer 11 months 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

#24

Updated by Carsten Rose 11 months ago

  • Related to Support #9924: fullCalendar: events do not start on full hour added
#25

Updated by Benjamin Baer 11 months ago

  • Status changed from New to Priorize
#26

Updated by Carsten Rose 10 months ago

  • Status changed from Priorize to Closed
  • Target version set to 20.2.0

Also available in: Atom PDF