/
ICS - Kalenderabruf | Beispiel Ratsinformationskalender

ICS - Kalenderabruf | Beispiel Ratsinformationskalender




Veranstaltungskalender
(aus Google, Exchange oder Spezialanwendung etc.)

Nutzen Sie Termin Exporte um z.B. auf Ihren Sitzungskalender in unserem Templatedesigner zugreifen zu können.

Kopieren Sie die Adresse der ICS - Datei für den Abruf und fügen Sie diesen in Ihr gestaltetes Template ein.

So erstellen Sie einmalig eine Templatevorlage und haben immer Ihre aktuellen Inhalte geladen:



Im Templatedesigner wird eine Template Vorlage nach Ihrem CI vorbereitet.

Jetzt wird in dem Template ein neues Element "Datenschnittstelle" hinzugefügt.



Das folgende Menü erscheint:


Im neuen Menü wählen Sie dann die Auswahl Schnittstelle:

  • Bundesagentur für Arbeit - Jobsuche
  • Bundesagentur für Arbeit - Veranstaltungen
  • Facebook - Seitenabruf
  • Facebook - Seitenabruf ohne QR-Tag
  • ICS - Kalenderabruf
  • RSS / Atom Feed
  • RSS / Atom Feed - ohne Bild
  • RSS / Atom Feed - ohne QR
  • RSS / Atom Feed - ohne QR - ohne Bild
  • strait CMS WIM Angebote
  • strait CMS WIM Events
  • strait CMS WIM Events (Events in Kürze)
  • strait CMS WIM Jobs

Aktualisierungsintervall: (in Minuten)


Die Auswahl übernehmen:

Das Feld der Datenschnittstelle entsprechend skalieren und positionieren

Rechts im Menü die Einstellungen Datenschnittstelle vornehmen:

  • URL: hier die Quelle für den Datenabruf eintragen
  • Anzahl der Tage die geladen werden sollen, soweit es eingeschränkt werden soll (Wenn keine Eingabe erfolgt wird 90 Tage gezogen)
  • Verhalten bei längerem Inhalt
    • Objekt scrollen
    • Objekt wechseln
  • Darstellungszeit pro Wechsel in Sekunden
  • Anzahl der Inhalte pro Wechsel
  • Startposition
    • erstes Element
    • zufällig
    • fortlaufend (merkt sich beim Durchlauf der Playliste die Ausspielposition und führt beim nächsten Durchlauf fort)
  • Verhalten beim letzten Element
    • stoppen
    • zum Anfang scrollen
    • wieder von vorne beginnen
  • zusätzliche Template CSS - siehe rechte Spalte
    • über Vorlage laden werden die Standarteinstellungen angezeigt
      • hier hat man die Möglichkeit Korrekturen zu Farbe etc. einzugeben


Intelligentes Verhalten der Schnittstelle:

Ist momentan kein Kalendereintrag vorhanden, wird das Template in der Ausspielung nicht angezeigt und übersprungen.

Sind wieder Inhalte vorhanden spielt sich das Template wieder automatisiert an Ihren Monitoren aus.



Mit übernehmen und speichern abschließen:

  • das Objekt wird berechnet


Beim nächsten Öffnen des Objektes ist eine Vorschau sichtbar und Korrekturen können vorgenommen werden.

Einstellungen zu Gestaltung und Animation vornehmen.


Das Template wie gewohnt speichern.

Das Objekt befindet sich in der Objektauflistung.


Eine Vorschau ist über eine Playliste zur Beurteilung möglich:


Anpassungen des Standarts können über HTML oder CSS angepasste werden:

HTML Beispiel

CSS Beispiel

<div class="entry"> <div class="left-block"> <div class="date-info"> <div class="time-different"> <span class="start-date">04.06.2020</span> <span class="start-time">18:00</span><span class="time-separator"> - </span><span class="end-time">20:00</span> </div> </div> </div> <div class="right-block"> <div class="standort">Rathaus der Stadt Vreden, 48691 Vreden, Kleiner Sitzungssaal</div> <div class="headline">Bildungs-, Sport- und Kulturausschuss</div> <div class="teaser">Bildungs-, Sport- und Kulturausschuss</div> </div> <div class="clear"></div> </div>

* {font-size: 30px;color: #4b4b4b;padding: 0;margin: 0;}

.left-block {float: left;width: 250px;text-align: right;}

.right-block {margin-left: 250px;}

.headline {font-weight: bold;padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.teaser {padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.date-info {vertical-align: top;padding-right: 15px;}

.date-info .start-date, .date-info .end-date {font-size: 30px;font-weight: bold;}

.date-info .start-time, .date-info .end-time {font-size: 24px;}

.date-info .time-different .start-date {display: block;}

.date-info .date-different .time-separator {display: block;}

.standort {border-left: 2px solid #4b4b4b;padding-left: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.clear {clear: both;}

.entry {padding-top: 30px;margin-top: 30px;border-top: 1px solid #4b4b4b;position: relative;}

.switch+.entry {border: 0;margin-top: 0;}

.entry:last-child {border: 0;}

.entry+.switch {margin-top: 30px;}.switch {border-bottom: 1px solid #4b4b4b;}

.switch-text {background-color: #4b4b4b;color: #FFF;padding: 5px 10px;display: inline-block;width: 232px;

}.entry:first-child .switch {margin-top: 0;}




Related content

RSS - Atom Feed
More like this
Datenschnittstellen nutzen
Datenschnittstellen nutzen
More like this
Facebook | Vorbereitung zur Einbindung der Datenschnittstelle und Umsetzung
Facebook | Vorbereitung zur Einbindung der Datenschnittstelle und Umsetzung
More like this
Menüführung / Erklärung
Menüführung / Erklärung
More like this
Eigene animierte Templates gestalten.
Eigene animierte Templates gestalten.
More like this