Commit 43e1fad4 authored by Carsten  Rose's avatar Carsten Rose

Add doc for FullCalendar.js

parent f37c5632
Pipeline #3145 passed with stages
in 1 minute and 54 seconds
......@@ -40,4 +40,5 @@ Software distributed together with QFQ
* Twig - https://twig.symfony.com
* Twitter typeahead JS - https://twitter.github.io/typeahead.js/
* bootstrap-validator.js - https://github.com/1000hz/bootstrap-validator
* Event Emitter - https://git.io/ee
\ No newline at end of file
* Event Emitter - https://git.io/ee
* FullCalendar - https://fullcalendar.io/
......@@ -226,6 +226,9 @@ Setup CSS & JS
file05 = typo3conf/ext/qfq/Resources/Public/Css/qfq-bs.css
file06 = typo3conf/ext/qfq/Resources/Public/Css/tablesorter-bootstrap.css
file07 = typo3conf/ext/qfq/Resources/Public/Css/font-awesome.min.css
# Only needed in case FullCalendar is used
file08 = typo3conf/ext/qfq/Resources/Public/Css/fullCalendar.min.css
}
page.includeJS {
......@@ -243,8 +246,11 @@ Setup CSS & JS
file12 = typo3conf/ext/qfq/Resources/Public/JavaScript/widget-columnSelector.min.js
# Only needed in case FormElement 'annotate' is used.
file20 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
file21 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
file13 = typo3conf/ext/qfq/Resources/Public/JavaScript/fabric.min.js
file14 = typo3conf/ext/qfq/Resources/Public/JavaScript/qfq.fabric.min.js
# Only needed in case FullCalendar is used
file15 = typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar.min.js
}
......@@ -7806,6 +7812,39 @@ to the file is SIP protected. Any file on the server is possible.
10.sql = SELECT 'file:{{sqlLog:Y}}' AS _monitor, '<pre id="monitor-1" style="white-space: pre-wrap;">Please wait</pre>'
.. _calendar_view:
Calendar View
-------------
QFQ is shipped with the JavaScript library https://fullcalendar.io/ to provides various calendar views.
Docs: https://fullcalendar.io/docs
Include the JS & CSS files via Typoscript
* typo3conf/ext/qfq/Resources/Public/Css/fullCalendar.min.css
* typo3conf/ext/qfq/Resources/Public/JavaScript/fullCalendar.min.js
Integration: Create a `<div>` with
* CSS class "qfq-calendar"
* Tag `data-config`. The content is a Javascript object.
Example::
10.sql = SELECT 'Test'
10.head = <div class="qfq-calendar"
data-config='{"plugins": [ "timeGrid" ],
"weekends": false,
"defaultView": "timeGridWeek",
"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>
Report Examples
---------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment