Legen wir los! Wenn nicht schon vorhanden, klicke über Websiteinhalte auf App hinzufügen.
2. Füge einen Standardkalender hinzu und vergib einen Namen. In dem folgenden Beispiel habe ich den Namen “Eventkalender” verwendet.
3. Füge nun eine neue Spalte hinzu. Entweder über die Listeneinstellungen und dann Spalte hinzufügen oder direkt wie im folgenden Bild:
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.
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]
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.
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.
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.
<style>
.ms-acal-item{display:none;}
</style><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script><script type="text/javascript">
var shouldcolortext = true;
LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
window.setTimeout(ColorCalendar, 1000);
});
var SEPARATOR = "|||";
function ColorCalendar() {
var container = jQuery('#s4-bodyContainer');
var query = 'a:contains('' + SEPARATOR + '')';
if(container.find(query).length > 0)
{
container.find(query).each(function (i) {
var box = jQuery(this).parents('div[title]');
var colors = GetColorCodeFromCategory(GetCategory(this.innerHTML));
var anchor = jQuery(this);
anchor.text(GetActualText(anchor.text()))
box.attr("title", GetActualText(box.attr("title")));
box.css('background-color', colors[0]);
box.css('display', 'block');
if(shouldcolortext )
{
box.find('div, a').css("cssText", "color: " + colors[1] + " !important;");
}
});
}
window.setTimeout(ColorCalendar, 2000);
}
function GetActualText(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[0] + parts[2];
}
function GetCategory(originalText) {
var parts = originalText.split(SEPARATOR);
return parts[1];
}
function GetColorCodeFromCategory(category) {
var bgcolor = null;
var fgcolor = null;
switch (category.trim()) {
case 'Messe':
bgcolor = '#ECD078';
fgcolor = '#000000';
break;
case 'Release':
bgcolor = '#D95B43';
fgcolor = '#000000';
break;
case 'Vortrag':
bgcolor = '#C02942';
fgcolor = '#000000';
break;
case 'Etwas anderes':
bgcolor = '#53777A';
fgcolor = '#000000';
break;
}
return [bgcolor, fgcolor];
}
</script>
9.Nun hast du ihn! Deinen Kalender mit unterschiedlichen Farben pro Eventart. Nice job!
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.
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.
<script>
// created by Patrick - don't be afraIT.com
(function () {
var kategorieFieldCtx = {};
kategorieFieldCtx.Templates = {};
kategorieFieldCtx.Templates.Fields = {
"Art": {
"View": KategorieViewTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
kategorieFieldCtx
);
})();
function KategorieViewTemplate(ctx) {
var _kategorie = ctx.CurrentItem.Art;
if (_kategorie == 'Release')
{
return "<img src='http://sp13/events/SiteAssets/release_16.png'/>";
}
if (_kategorie == 'Messe')
{
return "<img src='http://sp13/events/SiteAssets/messe_16.png'/>";
}
if (_kategorie == 'Vortrag')
{
return "<img src='http://sp13/events/SiteAssets/vortrag_16.png'/>";
}
else
{
return "<img src='http://sp13/events/SiteAssets/etwasAnderes_16.png'/>";
}
}
</script>
Wie und wo man so etwas abspeichert erfährst du hier. Danach sollte deine Startseite fertig sein und in etwa so aussehen:
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!