Legen wir los! Wenn nicht schon vorhanden, klicke über Websiteinhalte auf App hinzufügen.

Color Calender and Icons in 10 easy Steps (de)_1

 

2. Füge einen Standardkalender hinzu und vergib einen Namen. In dem folgenden Beispiel habe ich den Namen “Eventkalender” verwendet.

Color Calender and Icons in 10 easy Steps (de)_2

 

3. Füge nun eine neue Spalte hinzu. Entweder über die Listeneinstellungen und dann Spalte hinzufügen oder direkt wie im folgenden Bild:

Color Calender and Icons in 10 easy Steps (de)_3

 

4. Diese Spalte dient später dazu ein Icon anzuzeigen und die Art des Events festzulegen.
In meinem Fall ist der Name der Spalte “Art” und die Dropdownoptionen sind: Messe, Release, Vortrag und Etwas anderes.

Color Calender and Icons in 10 easy Steps (de)_4

 

5. Füge nun noch eine weitere Spalte vom Typ “Berechnet” wie im nächsten Bild beschrieben hinzu. Diese dient dazu, dass das spätere Skript auch nur die richtigen Elemente findet und diese einfärbt.
Die Formel lautet: = “|||” & [Art] & “|||” & [Titel]

 

Color Calender and Icons in 10 easy Steps (de)_5

6. So langsam nimmt es Formen an 😉
Nun erstelle oder bearbeite die Ansicht des Kalenders und ändere den Titel der Monats, Wochen und Tagesansicht in die berechnet Spalte (ArtTitel). In meinem Beispiel wurde lediglich die Standardansicht verwendet.

Color Calender and Icons in 10 easy Steps (de)_6

 

7. Bearbeite nun die Seite und füge dieser einen Inhalts-Editor hinzu. Wie du vielleicht schon gesehen hast, hast du nun im Titel deiner Termine die “|||”, die Art, “|||” und den Titel.

Color Calender and Icons in 10 easy Steps (de)_7

 

8. Nun passiert die Magie. 🙂 Füge das nachfolgende Skript in den Inhalts-Editor ein, indem du zuerst auf “Klicken Sie hier um neuen Inhalt hinzuzufügen” klickst, dann auf Quelle bearbeiten und dann das Skript einfügst und alles speicherst.
Wenn du andere Werte im Dropdownfeld hast musst du diese natürlich abändern (Messe, Release, Vortrag, Etwas anderes). Die Farben kannst du über bgcolor (Hintergrundfarbe) und fgcolor (Schriftfarbe) abändern.

 

Color Calender and Icons in 10 easy Steps (de)_8

9.Nun hast du ihn! Deinen Kalender mit unterschiedlichen Farben pro Eventart. Nice job!

Color Calender and Icons in 10 easy Steps (de)_9

 

10. Wenn du den Kalender auf einer anderen Seite als Webpart einbindest, musst du daran denken, dass du auch dort den Inhaltseditor mit dem Skript einfügen musst um die Einfärbung auch dort zu erhalten.

Dies habe ich auf der Startseite “Events” gemacht und rechts daneben nochmals den Kalender in einer Standardansicht (Art, Titel, Anfangsdatum und Endzeit) hinzugefügt. Diese Liste dient dazu dem User eine bekannte Art der Übersicht zu geben und ausserdem mit einem Icon das Design etwas ansprechender zu gestalten.

Color Calender and Icons in 10 easy Steps (de)_10

 

Speicher das nachfolgende Skript ab und füge es der Eventübersichtsliste hinzu.
Wenn du andere Werte im Dropdownfeld hast musst du diese natürlich abändern (Messe, Release, Vortrag, Etwas anderes) auch wenn die Spalte nicht Art heisst oder die Icons an einer anderen Stelle liegen musst du dies im Skript deinen Bedürfnissen anpassen.

Wie und wo man so etwas abspeichert erfährst du hier. Danach sollte deine Startseite fertig sein und in etwa so aussehen:

Color Calender and Icons in 10 easy Steps (de)_11

 

Die Icons für Messe, Release, Vortrag und Etwas anderes kannst du dir hier gerne herunterladen.
Auch die Skripte für den Inhaltseditor (Einfärben) und das Javascript (für das rendern der Icons) sind dort hochgeladen.

Das war’s. Hoffe dieser Blogpost hat dir gefallen. Wenn ja, kannst du diesen gerne auf Facebook teilen oder twittern. Bei Fragen, don’t be afraIT und frag oder kommentiere einfach!

LEAVE A REPLY

Please enter your comment!
Please enter your name here