Für die Darstellung der Events existiert unterdessen auch ein Widget. Es stellt die Events als Item-Objekte dar. Im Moment liefert es nur die Übersicht der Events. Die Detaildarstellung mit Anmeldeprozess usw. muss noch mit PHP eingebaut sein. Ein Beispiel findet man bei www.anthrosana.ch.
<img class="dropapp-event" id="dropapp-event-01" data-type="start" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps/event/api/" data-category="460" data-language="de" data-link="/demo/veranstaltungen/details.php" alt="" width="16" height="16">
| data-type | start, archive, week-reservation-time, month-reservation (default ist start) |
| data-interface | /dropnetapps/event/api/ |
| data-category | ID der Event Kategorie |
| data-language | de, en ... |
| data-link | Auf diese Seite wird nach dem Klick gesprungen. Im Moment ist das der öffentliche Bereich aus DropEvent. |
| sort | date_start |
| sort-direction | ASC oder DESC |
Wenn man den data-type=archive setzt, werden die Daten im umgekehrter Sortierfolge geliefert, unabhängig vom Parameter data-sort-direction. Als Sortierkriterium wird nur date_start unterstützt.
Optiker, Zahnärzte oder Coiffures pflegen einen Kalender mit den Kundenterminen. Bei modernen Unternehmen kann der Kunde direkt online seinen Termin abmachen. Mit dem data-type=”week-reservation-time” übernimmt das Widget den kompletten Ablauf.
<img class="dropapp-event" data-type="week-reservation-time" src="/dropnetimages/dropbox/standard/status-wait-big.gif" data-interface="/dropnetapps/event/api/" data-title="Wählen Sie einen Tag und eine Uhrzeit." data-link="/events/termin.php" data-category="93" data-language="de" alt="" data-limit="1000" width="16">
In der Kategorie, die Angezeigt wird, wird ein Eintrag im “options_xml" benötigt. Dieser kann folgendermassen aussehen. Das Attribut timetable ist folgendermassen aufgebaut. Die erste Zahl gibt den Gesamtzeitraum in Minuten an. Ab dann kommt immer ein Wert in Minuten für den möglichen Termin und ein Wert für die Pause.
<fields timetable="540, 60, 0, 60, 0, 60, 120, 60, 0, 60, 0, 60, 0, 60" sender_email="info@dropnet.ch">
</fields>
Im Gegensatz zur Terminvereinbarung werden bei Räumen oder Plätzen oft ganze Tage oder Tage mit Start- und Endzeit reserviert. Dann macht auch eine Monatsdarstellung mehr Sinn. Das Widget übernimmt mit dem data-type=”month-reservation” den kompletten Ablauf.
<img class="dropapp-event" data-type="month-reservation" data-calendar="173" data-category="568" src="/dropnetimages/dropbox/standard/status-wait-big.gif" data-interface="/dropnetapps/event/api/" data-title="Reservationsanfrage" data-subject="Danke für die Reservationsanfrage" data-link="/events/termin.php" data-language="de" alt="" data-limit="1000" width="16">
Pro Kategorie können Anmeldeoptionen definiert werden. Diese Zusatzfelder werden während der Anmeldung erfragt und abgelegt. Es kann alles, was HTML bietet, abgefragt werden. Diese Anmeldeoptionen können bequem in DropEvent bei den Kategorien angepasst werden.
Damit der Kalender auch einigermassen nach Wochenansicht aussieht, braucht es ein wenig CSS.
/**
* Definition der Wochenansicht
*/
.dropapp-event-week {
margin-top: 15px;
}
.dropapp-event-week .firstrow {
width: 5rem;
display: inline-block;
vertical-align: top;
text-align: center;
}
.dropapp-event-week .firstline .day {
text-align: center;
font-size: 0.8rem;
font-weight: 600;
}
.dropapp-event-week .day {
width: calc((100% - 5rem) / 7);
display: inline-block;
vertical-align: top;
}
.dropapp-event-week > div > .timeslot {
height: 40px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.dropapp-event-week > div > .timeslot p {
margin: 0;
font-size: 0.8rem;
line-height: 1rem;
}
.dropapp-event-week > div > h3 {
padding: 10px;
}
/**
* Farben der Wochenansicht
*/
.dropapp-event-week .firstrow,
.dropapp-event-week .firstline {
background-color: #eee;
}
.dropapp-event-week > div > .timeslot {
border-bottom: 1px solid #ccc;
}
.dropapp-event-week .weekend {
color: #d10000;
}
.dropapp-event-week > div.day.weekend {
background-color: rgb(255, 244, 228);
}
.dropapp-event-week .timeslot .glyphicon-ok-circle {
color: #26355f;
font-size: 1.4rem;
}
.dropapp-event-week .timeslot:hover .glyphicon-ok-circle {
color: #000;
}
.dropapp-event-week .timeslot .glyphicon-ban-circle {
color: #ddd;
font-size: 1.4rem;
}
.dropapp-event-week .dropapp-event-timeslot-free {
cursor: pointer;
}
.dropapp-event-select-category .glyphicon-ok-circle {
color: #000;
}
.dropapp-event-select-category .selected .glyphicon-ok-circle {
color: #26355f;
}
.dropapp-event-select-category h6 {
font-size: 1rem;
}
/**
* DropEvent Monatsdarstellung
*/
.dropapp-event-month {
background-color: #faf3e6;
}
.dropapp-event-month > div > div > h3,
.dropapp-event-month a:link,
.dropapp-event-month a:active,
.dropapp-event-month a:visited,
.dropapp-event-month a:focus,
.dropapp-event-month .modal-body legend {
color: #8c4e29;
}
.dropapp-event-month .dropapp-event-timeslot-free > span {
background-color: #6e9015;
}
.dropapp-event-month .modal-header,
.dropapp-event-month .modal-header .modal-title,
.dropapp-event-month .modal-header button.close > span,
.dropapp-event-month button.btn.btn-primary {
background-color: #8c4e29;
}
.dropapp-event-month input.form-control,
.dropapp-event-month textarea.form-control,
.dropapp-event-month button.btn.btn-primary,
.dropapp-event-month .btn.btn-primary {
border-color: #8c4e29;
}
