Permalink

45

HowTo: Farbige Kalender Kategorien in SharePoint 2007

Der Kalender in Sharepoint 2007 hat gegenüber der Version 2003 einiges an Funktionen hinzugewonnen. Für die Zusammenarbeit mit externen Benutzern eignet sich der Kalender hervorragend um Termine zu planen und diese über die Firmengrenzen hinweg zu synchronisieren. Der SharePoint Kalender bildet zusammen mit dem eigenen Outlook eine gute Einheit. (An dieser Stelle noch einen kleinen Hinweise: Man kann in einer Sharepoint 2007 Kalender Seite eine neue Ansicht erstellen. Dort kann man dann „Gant“ als Ansichtsvorlage auswählen und der Kalender wird wie im Template „Projektaufgaben“ angezeigt. Viele Benutzer erstellen zuerst eine Teamseite. Brauchen sie dann ein kleines Projektaufgaben Management erstellen sie zusätzlich eine neue Liste mit dem „Projektaufgaben“ Template. Was im aktuellen Sharepoint nicht nötigt wäre, da man für diese Aufgabe auch die Kalenderliste verwenden kann.)

kalender_1.JPG

Im Unterschied zu Outlook kann aber der Sharepoint Kalender Einträge zwar in Kategorien einteilen, diese aber nicht farblich getrennt darstellen. Dies ist eine Funktion die persönlich ich sehr schätze. Meine Scolab Kollegen ebenso. Höchste Zeit hier einmal aktiv zu werden. Auf Codeplex finden sich dazu ein paar Lösungen. Die aber alle in Richtung WSP gehen. Ein paar Gespräche am SharePoint Booth in Barcelona und ein heisser Link von Agent Kuper gaben dem ganzen ein Gesicht. Mark Wilson hat hier eine kleine feine Java Lösung gebaut, die in jeden Kalender eingebaut werden kann.

kalender_2.JPG

Und so geht’s: Zuerst erstellt man sich eine normale Kalenderseite. Zu dieser fügt man nun eine neue Spalte hinzu. Diese benennt man „Kategorien“ vom Typ her ist es eine Auswahlliste. Zur Auswahl stellt man dann seine gewünschten Kategorien.

kalender_3.JPG

Nun wird eine Hilfsspalte erstellte. Diese muss „CatTitle“ heissen und vom Typ eine berechnete Spalte sein“. Die Spalte kann einen anderen Namen haben, dann muss aber das Script angepasst werden. Da diese Spalte nicht ausgefüllt und nicht sichtbar ist (Checkbox am Ende der Eingabe Maske deaktivieren) spielt es aber keine Rolle. Die Berechnung der Spalte sieht so aus:

=Kategorien & „|||“ & Title

„|||“ ist dabei ein Trennzeichen das im Script verwendet wird.

kalender_4.JPG

Nun wird noch bei der aktuellen Kalenderansicht die Ansicht so angepasst, dass bei der täglichen, wöchentlichen und monatlichen Ansicht immer die Hilfsspalte „CatTitle“ angezeigt wird.

kalender_5.JPG

So nun kommt das kleine Java Script von Mark Wilson ins Spiel. Dieses Script wird nun über das „content editor web part“ auf die Seite gebracht. Das Script wird dabei einfach über den „Source Editor“ hineinkopiert. Wichtig dabei ist: Das Web Part muss unter dem Kalender Web Part sein. Am besten setzt man das Web Part gleich noch „unsichtbar“.

kalender_6.JPG

Hier nun das Script:

<script>
var SEPARATOR = „|||“;

var nodes, category;

nodes = document.getElementsByTagName(„a“);

for(var i = 0; i < nodes.length; i++)
{

if(nodes[i].innerText.indexOf(SEPARATOR) != -1)
{
UpdateCalendarEntryText(nodes[i]);
var foundNode = nodes[i];
var trap = 0;

while(foundNode.nodeName.toLowerCase() != „td“)
{
foundNode = foundNode.parentNode;

trap++;
if(trap > 10)
{
break; // don’t want to end up in a loop

}
}

var colour = GetCalendarColour(category);
if(colour != „“)

foundNode.style.background = colour;
}
}

function UpdateCalendarEntryText(anchorNode)
{

var children = anchorNode.childNodes;
for(var i = 0; i < children.length; i++)
{

if(children[i].nodeType == 3 && children[i].nodeValue.indexOf(SEPARATOR) != -1)
{
var parts = children[i].nodeValue.split(SEPARATOR);

category = parts[0];
children[i].nodeValue = parts[1];
}

else
UpdateCalendarEntryText(children[i]);
}
}

function GetCalendarColour(desc)
{

var colour;
switch(desc.toLowerCase())
{
case „geschäftlich“:

colour = „#ffd266“;
break;
case „privat“:

colour = „#ae99dc“;
break;
case „projekt1“:

colour = „#8aabe0“;
break;
default:
colour = „“;
}

return colour;
}

</script>

kalender_7.JPG

Die Namen der Kategorien und die definierten Farben werden am Schluss eingetragen. Wichtig dabei ist, dass die Namen der Kategorien mit der Auswahlliste korrespondieren. Ebenso müssen die Kategorien im Script immer in Kleinbuchstaben angegeben werden (lower case). Eigene zusätzliche Kategorien können am Ende des Scripts mit der gleichen Syntax wie die Beispiele angebracht (vor „default : ….“) werden.

case „scolab“:

colour = „#ae99dc“;
break;

Die Farben der Kategorien werden ebenfalls hier angegeben. Dies über den Hex-Code der entsprechenden Farbe. Eine gute Übersicht findet man auf Wikipedia.

Autor: Christoph Müller

Christoph Müller ist Consultant, Blogger und Podcaster rund ums Thema SharePoint, Digital Transformation, Cloud, Mobile und Netzpolitik.

45 Kommentare

  1. Geniales Tutorial, leider funktioniert es bei mir nicht. Muss für dieses Java-Script noch etwas aktiviert werden?

  2. Christoph Müller 6. Dezember 2007 um 17:05

    Was passiert dann, Fehlermledung, falsche Farben, keine Farben,…..?

    Hier aber ein paar Quick Tips:

    Wichtig: Das Web Part muss unter dem Kalender Web Part sein.

    Die Kategorien im Script müssen in Kleinbuchstaben angegeben werden.

  3. Hallo,
    super Idee, genau was ich gesucht habe. Leider funktioniert das Script bei mir nicht. Ich habe auf alle Hinweise geachtet, aber die Farben ändern sich nicht bzw. alle termine sind jetzt weiß.
    Wie kann ich das Script debuggen um die Fehlerquelle zu finden?

    Vielen Dank im Voraus

  4. Nochmal Hallo,

    hat denn jemand so etwas für Gant entwickelt? Das müßte über einen ähnlichen Weg zu machen sein.

    Gruß
    Oliver

  5. Also bei mir funktioniert es einwandfrei. ich musste nur alle anführungszeichen austauschen und title in titel umwandeln. dann klappte es auch aufm deutschen wss3.0

  6. @Wolfi
    an die Anführungszeichen habe ich auch schon gedacht, denn im Listing werden verschiedene Arten benutzt. Du hast also aus “ ein “ gemacht? Oder müssen das nicht unsere normalen Anführungszeichen sein.

    Title hatte ich gegen Titel schon getauscht.

    Gruß
    Oliver

  7. ich hab alle gänsefüßchen gegen unsre ausgetauscht. also shift+2
    und das „Title“ hab ich in dieser formel ausgetauscht: =Kategorien&“|||“&Title —> =Kategorie&“|||“&Titel . wobei ich auch hier die gänsefüßchen getauscht hab. also sowohl im script, als auch in der formel.
    dann gings.

  8. Bei mir klappt´s nicht 🙁
    Ich habe als Berechnung „=Kategorien&“|||“&Titel“ eingetragen, alle Anführungszeichen auf die „deutsche“ Version umgestellt (Shift + 2) und trotzdem klappt das nicht …
    Gibt es irgendein Problem, wenn man einen englischen WSS hat und dort eine deutsche Teamseite betreibt? Mehr fällt mir dazu leider nicht ein.
    Feedback dringend erwünscht!
    Danke, T

  9. Ach ja: Bei mir werden die Einträge im Kalender übrigens so angezeigt:
    geschäftlich|||aaaa

    „aaaa“ war einfach der Titel des Ereignisses. Ich habe jetzt auf den Screenshots hier gesehen, dass dort immer nur der Titel auftaucht, nie die Kategorie (die wird ja durch die Fabe repräsentiert). Also scheint es da irgendwo zu hängen?
    Irgendeine Idee?

  10. Also bei mir hats geklappt, allerdings erst nach mehreren anläufen.

    1. die formel in CatTitle muss von hand eingetippt werden, nicht kopieren, am besten die kategorie und den titel durch doppelklick einfügen.
    2. CatTitle muss logischerweise in der ansicht des kalenders ausgewählt sein.
    3. ALLE anführungszeichen/gänsefüsschen müssen von hand durch „unsere“ anführungszeichen ersetzt werden.
    4. Das Webpart mit dem Script muss sich UNTER dem Kalender befinden (so ist es auch möglich an anderen orten, wie z.B. der Start Seite den kalender als webpart anzuzeigen, dort muss das webpart mit dem script sich auch unterhalb des Kalenders befinden)
    5. Die punkte unter „Kategorien“ MÜSSEN klein geschrieben sein, also anstatt „Projekt1“ „projekt1“

    So das wars glaub ich erstmal , bei Problemen helf ich gerne weiter (soweit ich kann)

  11. Ich korrigiere mich: Anscheinend funktioniert es doch mit upper case, also mit „Projekt1“ anstatt „projekt1“

  12. Hallo,

    Danke für die Infos – sehe erst jetzt mal wieder auf die Seiten, da sich am Anfang niemand gemeldet hatte. Ich werde es nächste Woche nochmal probieren und hier mein Scheitern oder meinen Erfolg vermelden.

    Vielen Dank nochmal und ein schönes Wochenende,
    T.

  13. Hallo,

    ich habe mich auch mit dem Script versucht 🙂
    Habe es auch so weit hinbekommen das „urlaub|||goofy“ im Kalender steht.
    Allerdings wird keine Farbe angezeigt 🙁 Jetzt denke ich liegt es daran, dass ich ein
    deutsches Sharepoint installiert habe und sich das Skript auf die Englischen Feldnamen bezieht, hatte jemand schon das selbe Problem und dafür eine Lösung ?

    Wäre super – wenn jemand mal kurz das Skript für eine deutsche Sharepoint installation Posten könnte

    DANKE

  14. OK, habs hin bekommen 🙂
    Hatte noch einen Schreibfehler im Skript 🙂

    Jetzt hätte ich noch eine andere Frage, ist es nicht möglich mit diesem Skript
    die ANzeige zu Sortieren ? dh zB alle Kategorien „Urlaub“ unter einander und so weiter ?

  15. So weit so gut. Doch nun möchte ich gern noch den Benutzernamen in der berechneten Spalte CAtTitle darstellen. Die Titel-Spalte ist eine berechnete Spalte vom Typ Text, in der eine Zeichenkette zusammengesetzt wird. Ein Teil der Zeichenkette soll den AD-Anzeigenamen enthalten, wie er in der Standardspalte „Author“ (Erstellt von) angezeigt wird. Nun kann ich aber bei berechneten Spalten nur auf eine begrenzte Auswahl von Spalten zugreifen, „Erstellt von“ ist hier nicht dabei. Ich kam auf die Idee, eine neue Textpalte „Mitarbeiter“ anzulegen und diese mit dem Standardwert [Ich] vorzubelegen. Die Funktion [Ich] liefert mir aber den kryptischen Loginnamen zurück.
    Wie kann ich den Benutzernamen (und generell andere Spalten) in Formeln für berechnete Spalten verwenden? Ich habe auch die Anforderung, lookup-Spalten (Nachschlagen) in der Formel für berechnete Spalten zu verwenden, bzw. einen Spaltenwert aus einer anderen Liste direkt in die Formel einzufügen.

    Erstellt von (Author; Typ Person): AD-Anzeigename
    Mitarbeiter (Typ Text) = [Ich]: Loginname (DOMÄNE\benutzerkonto)

  16. @ Goofy

    Ich habe auch den „deutschen“ SharePoint im Einsatz. Könntest Du bitte das Script posten? Ich habe den selben Fehler wie Du…

    Grüße
    ToZi

  17. Joo..krasse scheiße.. Und funktioniert..
    Ich musste allerdings auch alle Anführungszeichen im Skript durch Shift+2 ersetzen. Danach lief’s

    🙂

  18. Super, nach anfänglich den selben Schwierigkeiten, wie alle vor mir (Riesen dank an Euch *g*) – läufts super.

  19. Interessant … seit dem SP1 läuft das Script *nicht* mehr bei mir, bei meinem Kollegen ist es nie gelaufen. Hat jemand ähnliche Probleme?

  20. Also, ich habe das Script installiert und es funktioniert tadellos. Jetzt will ich aber unterschiedliche Farben abbilden, abhängig davon, ob eine Abwesenheit genehmigt wurde oder nicht.
    Wie kann ich das anstellen? Hat jemand sowas schon mal umgesetzt?
    Für Tipps wäre ich sehr dankbar…

  21. Servus!
    Danke tolles Tutorial. Gibt es denn auch eine Möglichkeit diese Kategorie dann in Outlook anzuzeigen und beim Anlegen von Terminen auszufüllen?

  22. Vielen Dank für das Howto!

    Ein Problem, das es bei mir zu beheben galt: Unicode-Zeichen wollten sich heimlich in die ANSI-Codierung hineinschleichen. Die konnten dann aber nicht richtig verarbeitet werden.

  23. Hallo,

    ich habe gerade das Script eingebaut und dabei alle mögliche Hacken beachtet, trotzdem funktioniert es nicht … kann vllt jemand ein „sauberes“ deutsches Script ohne Schreibfehler bitte poste….
    Wäre echt Super …

    Danke
    zem

  24. hallo,
    bin auch dabei das Skript einzubinden allerdings habe ich das grundlegende Problem, dass ich das Webpart nicht unter den Kalender bekomme. Wie kann man die Webparts denn vertauschen oder verschieben. Habe bisher nichts im Web gefunden. Wahrscheinlich ist die Lösung sehr trivial…

    Vielen Dank!

  25. @schröder: in den Webpartseinstellungen unter Layout ZonenIndex. Damit kanns du die Reihenfolge eisntellen. Viel Erfolg noch!! Un kriege ich sonst noch hilfe hier?? Ich habe es immer noch nicht bei mir zum laufen gebracht 🙁

  26. Hallo,
    leider versuche ich vergeblich irgendwo das deutsche Script zufinden, habe einen deutschspr. SSP07! Bei mir funzt das mit den Farben einfach nicht ;-(((
    Wäre nicht schlecht für eine schnelle Anwort danke!!!!

  27. Hi zanpen. Ich bin heute auch auf dieses deutschsprachige How-To gestoßen, nachdem ich mit dem original von mark wilson kein erfolg hatte, und hatte die selben Probleme wie du bei einem deutschspr. SSP07, alle Anführungszeichen (vorraussichtlich) geändert, und auch sonst der Anleitung bis ins kleinste gefolgt. Den Code jetzt hier rein zu hacken ist denke ich zu viel des Guten, aber sei dir Gewiss – nachdem du das 10. oder 15. mal alle Anführungszeichen geändert hast, dann funktioniert’s. Oder, wenn es dir ganz enorm wichtig ist, schreib es dir nochmal komplett im notepad o.ä. ab.

    Aber es funktioniert und ist wirklich klasse.

    Jetzt sitz ich allerdings auch an dem Problem (ähh der Herausforderung) dass ich in dem Kalender nicht den Titel stehen haben will, sondern den Namen vom Mitarbeiter. Das ist in dem Moment, wo ich „CatTitle“ in der Kalenderansicht festlege nicht mehr so einfach möglich. Nehme ich anstatt von „CatTitel“ „Erstellt von“ habe ich zwar den Namen, aber logischerweise nicht mehr die Farben. … Ein Teufelskreis 🙂

  28. Es gibt von Mark Wilson schon eine Lösung für die 2010er Version. Ich bekomme diese aber nicht auf dem deutschsprachigen zum laufen. Jemand schon erfolg für 2010 gehabt?

  29. var SEPARATOR = „|||“;
    var nodes, category;
    nodes = document.getElementsByTagName(„a“);
    function getObjInnerText (obj)
    {
    return (obj.innerText) ? obj.innerText : (obj.textContent) ? obj.textContent : „“;
    }
    for(var i = 0; i 10)
    {
    break; // don’t want to end up in a loop
    }
    }
    var colourinfo = GetCalendarColourInfo(category);
    if(colourinfo.bg != „“)
    {
    foundNode.style.background = colourinfo.bg;
    }
    // try and update the text colour if we can TD/A/NOBR/B/#text
    if(colourinfo.fg != „“)
    {
    try
    {
    // there should only be one anchor tag
    childNodes = foundNode.all;
    for(var j = 0; j < childNodes.length; j++)
    {
    if(childNodes[j].nodeName.toLowerCase() == "a")
    {
    // found anchor tag
    childNodes[j].style.color = colourinfo.fg;
    // set the NOBR tag as well to set the time if it is shown, but set it on the B tag for month view
    if(childNodes[j].children[0].nodeName.toLowerCase() == "nobr")
    { // month view has an extra b tag surrounding the text
    childNodes[j].children[0].style.color = colourinfo.fg;
    if(childNodes[j].children[0].children[0].nodeName.toLowerCase() == "b")
    {
    childNodes[j].children[0].children[0].style.color = colourinfo.fg;
    }
    }
    break;
    }
    }
    }
    catch(e) {}
    }
    }
    }
    function ColourInfo(bg, fg)
    {
    this.bg = bg;
    this.fg = fg;
    }
    function UpdateCalendarEntryText(anchorNode)
    {
    var children = anchorNode.childNodes;
    for(var i = 0; i < children.length; i++)
    {
    if(children[i].nodeType == 3 && children[i].nodeValue.indexOf(SEPARATOR) != -1)
    {
    var parts = children[i].nodeValue.split(SEPARATOR);
    category = parts[0];
    children[i].nodeValue = parts[1];
    }
    else
    UpdateCalendarEntryText(children[i]);
    }
    }
    function GetCalendarColourInfo(desc)
    {
    var colour = new ColourInfo("", "");
    var trimmed = desc.replace(/^\s+|\s+$/g, '') ;
    switch(trimmed.toLowerCase())
    {
    case "appointment":
    colour.bg = "#ffd266";
    colour.fg = "";
    break;
    case "birthday":
    colour.bg = "#ae99dc";
    colour.fg = "";
    break;
    case "business":
    colour.bg = "#8aabe0";
    colour.fg = "";
    break;
    case "important":
    colour.bg = "#e77379";
    colour.fg = "";
    break;
    case "vacation":
    colour.bg = "#fffa91";
    colour.fg = "";
    break;
    default:
    {
    colour.bg = "";
    colour.fg = "";
    }
    }
    return colour;
    }

  30. Hallo!
    Ich hab Eure Diskussion gefunden und bin auf der Suche nach einer Lösung für folgendes Problem:

    Wir benutzen den SharePoint Kalender für „normale“ Termine, aber auch für Geburtstage. Dabei sollen aber auch die Jahreszahlen angegeben werden (speziell bei runden Geburtstagen oder Jubiläen usw…). Ist sowas mit einer Abwandlung von obigem Script zu realisieren? Ich bin relativ neu im SharePont Sektor, aber wenn man sieht, was man mit obigem Script schon erreichen kann, dann wäre es – denk ich – schon möglich, auch die Jahreszahl eines Serientermins – seit Beginn – zu generieren.
    Es sollte z.B. so aussehen:

    Kalender:
    09.08.2010 Geburtstag Huber (45)
    10.08.2010 Firmenjubiläum (50)

    Könntet Ihr mir dabei helfen, bitte?

    Viele Grüße
    Andreas

  31. Ich schon wieder!
    Ich bin mit meiner Geburtstagsliste schon wieder ein wenig weiter. Ich hab jetzt den Heute-Bug ausgenutzt und folgendes gemacht:

    -Spalte „Heute“ angelegt
    – Spalte „Alter“ angelegt, rechnenede Spalte
    – Berechnung Jahr von „Heute“ Minus jahr von „BeginnTermin“ (ohne hier die Syntax zu berücksichtigen)
    – Spalte eingefügt.

    Jetzt hab ich nur noch ein klitzekleines großes Problem, nämlich dass mir die Spalten in meiner Kalender-Terminübersicht zu breit werden.
    Es sieht dann so aus: Anfangsdatum Geburtstag XY Geburtstag: 32

    Die Geburtstagsspalte ist so breit, dass die ganze Spalte in eine neue Zeile gezogen wird, wodurch der Kalender furchtbar aufgebläht wird. Kann man die Spaltenbreite irgendwo verändern bzw. das gesamte Layout ändern? Stichwort SharePoint Designer?
    Wenn ja, dann weiß ich nicht mehr weiter….. Wo ändere ich was? Wo liegen die Layout-Definitionen meiner Seite????

    Bittte nochmals um Hilfe. Danke.

    Andreas

  32. Hallo

    Ich hab das Script unter SP2010 mal ausprobiert aber irgendwie läuft es nicht.
    Unter SP2010 gibt es im ContentEditorWebpart auch keine Option für eine Eingabe von SourceCode. Ich kann dort lediglich eine Textdatei über einen Link einbinden. In dieser hab ich das Script gespeichert.

    Bin für jede Info dankbar.

    HuLa

  33. einen wunderschönen guten tag!

    erst mal danke für die anleitung. ich habe es bei WSS 3 (de) versucht umzusetzen. leider zuerst ohne erfolg. bei mir half dann zu beginn des scripts die script language mit zu geben:
    nu läufts. dies nur für die jenigen die evtl. das gleiche problem haben.

    guß

  34. Hallo zusammen,

    wie kann ich denn die Einträge im Dashboard farbig anzeigen lassen? Hat das schon jemand versucht?

    Gruß

  35. Hallo,

    ich habe das Skript auch eingebaut. leider läuft es nicht. ich habe aber alles beachtet. wir verwenden microsoft online services, haben also kein „richtiges“ sharepoint. trotzdem sind die funktionen nahezu gleich. wie gesagt, habe alles beachtet, wie anführungsstriche. das webpart steht auch unter dem kalender.
    was mache ich falsch? wäre nett, wenn mir jemand weiter helfen kann!!

    danke!

  36. Hallo,
    das Script läuft mitlerweile bei mir, jedoch hätte ich gerne anstatt den Titel, den Ersteller angezeigt! Wie geht das ?
    Danke im vorraus 😉

  37. Hallo,

    mittlerweile habe ich es auch geschafft, dass die Farben angezeigt werden. Allerdings nur im IE. Hat es jemand für den Firefox geschafft?

  38. Hi, ich suche genau diese Funktion, habe alles – glaube ich – eingestellt, wie im Beitrag angegeben, aber ausser „Name ||| Titel“ ist nichts zu sehen.
    gibt es neue Erkenntnisse zu sharepoint 2007 WSS?
    Gruß spider

  39. Servus miteinander,

    System: Sharepoint 2007 deutsch

    Ich habe immer wieder die Anleitung durchgespielt und auch einen Texteditor bemüht der nur die Ansizeichen erlaubt hat. Das hat nie funktioniert.

    Geklappt hat dann Folgendes:
    Ich habe das Script auf der „Wilson-Seite“ verwendet und den Rest wie oben beschrieben umgesetzt.
    http://planetwilson.blogspot.com/2007/09/sharepoint-2007-colour-color-calendar.html

    Evtl. hängt es immer mit der Grund-Installation des Sharepointservers und der Languagepacks zusammen. Ich glaube, dass wir einen englischen Sharepoint mit deutschem Languagepack einsetzen.

    Wenn man jetzt noch die Kategorien über Outlook anzeigen und eintragen könnte, wäre der „Kalender in Farbe“ komplett. (Diese Funktion sollte eigentlich direkt von Microsoft mitgeliefert werden!)

    Grüße Jay