kanone

Das Event-Widget

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-typestart, archive, week-reservation-time, month-reservation (default ist start)
data-interface/dropnetapps/event/api/
data-categoryID der Event Kategorie
data-languagede, en ...
data-linkAuf diese Seite wird nach dem Klick gesprungen. Im Moment ist das der öffentliche Bereich aus DropEvent.
sortdate_start
sort-directionASC 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.

DropEvent als Terminvereinbarungssystem

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">

Anmeldeoptionen (options_xml)

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>

DropEvent als Raumreservation

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.

Einbau des Widgets

<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">

Anmeldeoptionen

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.

Designanpassung mit CSS

Damit der Kalender auch einigermassen nach Wochenansicht aussieht, braucht es ein wenig CSS.

CSS für die Wochenansicht

/**
 * 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;
}

CSS für die Farben der Wochenansicht

/**
 * 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;
}

CSS für die Farben der Monatsansicht

/**
 * 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;
}