Widget calendario per il sito del dipartimento
# Install all dependencies
$ npm install
# Start the development server
$ npm run dev
Il progetto può essere costruito con
# Build the project
$ npm run build
Il progetto è impostato in modo tale che vengono generati due file ./out/lib/dm-calendar.js
e ./out/lib/dm-calendar.css
, il file in js esporta un'unica funzione createCalendar($el, options)
.
Un esempio di utilizzo si trova in ./src/main.js
, comunque si può partire da questo esempio
import { DMCalendar } from './element.jsx'
render(
<DMCalendar
endpoint="https://manage.dm.unipi.it/"
queryEvents={async queryEvents({ from, to }) {
...
}}
/>,
document.querySelector('.calendar-container')
)
La funzione queryEvents
deve ritornare una lista di eventi con i seguenti campi
type Event = {
title: string
start: Date | string
end: Date | string
// imposta questo evento come "tutta la giornata"
allDay?: boolean
// imposta un url per questo evento, rendendolo un link cliccabile
url?: string
}
<script src="https://unipisa.github.io/dm-calendar/lib/dm-calendar-element.iife.js"></script>
<dm-calendar
endpoint="https://manage.dm.unipi.it/"
includes="phd-courses seminar-category=ID1 seminar-category=ID2 ..."></dm-calendar>
WebComponent Attributes.
-
endpoint
— https://github.com/Unipisa/dm-manager instance to use. -
includes
— is a string in a special syntax to tell the component which event sources to use. For now the available ones are-
phd-courses
— include all lessons for phd courses -
seminar-category=LABEL
— includes all seminar for a specific category using its unique wordpress label
TODO:
seminars
— includes all seminars
-
The following is an example of how to use the calendar in a WordPress page using a shortcode
<!-- WordPress Shortcode -->
[event_calendar includes="phd-courses seminar-category=ID1 ..."]
And the following is an example of how to register the shortcode in a WordPress theme
<?php
wp_register_script('dm-calendar', 'https://unipisa.github.io/dm-calendar/lib/dm-calendar-element.iife.js');
function calendar_shortcode( $atts ) {
wp_enqueue_script('dm-calendar');
$includes = !empty($atts['includes']) ? $atts['includes'] : 'phd-courses seminar-category=pysanum seminar-category=baby-geometri-seminar seminar-category=seminari-map';
return <<<EOF
<dm-calendar
endpoint="https://manage.dm.unipi.it"
includes="{$includes}"></dm-calendar>
EOF;
}
add_shortcode('event_calendar', 'calendar_shortcode');
Il cookie preso dalla sessione del browser, jq
è usato solo per formattare il json e renderlo leggibile
# Direct model data
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/event-phd-course?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/phd-courses.json
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/event-seminar?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/seminars.json
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/event-conference?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/conferences.json
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/conference-room?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/conference-rooms.json
# Public endpoints
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/public/lessons?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/lessons.json
curl -s 'https://manage.develop.lb.cs.dm.unipi.it/api/v0/public/seminars?_limit=9999' -H 'Authorization: Bearer ...' \
| jq > src/samples/seminars.json