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.)
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.
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.
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.
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.
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”.
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>
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.
MrZweig meinte am 6.12.2007 um 10:50:
Geniales Tutorial, leider funktioniert es bei mir nicht. Muss für dieses Java-Script noch etwas aktiviert werden?
Christoph Müller meinte am 6.12.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.
Uwe Endres meinte am 18.12.2007 um 22:48:
Tolles Feature !
Danke!
Gibt es auch eine “farbige” Lösung für die “GANT”-Balken?
Markus meinte am 11.1.2008 um 16:08:
Hallo,
hört sich sehr gut an. funktioniert das auch mit den WSS?
Schönen Gruß
Christoph Müller meinte am 11.1.2008 um 16:12:
@ Markus
Yep, das geht mit WSS 3.0
Oliver Hüppe meinte am 22.1.2008 um 23:53:
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
Oliver Hüppe meinte am 22.1.2008 um 23:55:
Nochmal Hallo,
hat denn jemand so etwas für Gant entwickelt? Das müßte über einen ähnlichen Weg zu machen sein.
Gruß
Oliver
Wolfi meinte am 23.1.2008 um 10:45:
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
Oliver Hüppe meinte am 23.1.2008 um 15:09:
@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
Wolfi meinte am 23.1.2008 um 16:24:
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.
Thomas meinte am 14.2.2008 um 17:23:
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
Thomas meinte am 14.2.2008 um 17:30:
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?
Daniel meinte am 29.2.2008 um 16:42:
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)
Daniel meinte am 29.2.2008 um 17:06:
Ich korrigiere mich: Anscheinend funktioniert es doch mit upper case, also mit “Projekt1″ anstatt “projekt1″
Thomas meinte am 15.3.2008 um 15:48:
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.
Goofy meinte am 10.7.2008 um 11:16:
Hallo,
ich habe mich auch mit dem Script versucht
Jetzt denke ich liegt es daran, dass ich ein
Habe es auch so weit hinbekommen das “urlaub|||goofy” im Kalender steht.
Allerdings wird keine Farbe angezeigt
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
Goofy meinte am 10.7.2008 um 11:54:
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 ?
Menne meinte am 8.8.2008 um 18:02:
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)
ToZi meinte am 18.8.2008 um 11:55:
@ 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
Der Ralf meinte am 1.10.2008 um 14:15:
Joo..krasse scheiße.. Und funktioniert..
Ich musste allerdings auch alle Anführungszeichen im Skript durch Shift+2 ersetzen. Danach lief’s
Manastir meinte am 29.10.2008 um 17:38:
Super, nach anfänglich den selben Schwierigkeiten, wie alle vor mir (Riesen dank an Euch *g*) – läufts super.
Florian L. meinte am 17.11.2008 um 15:03:
Interessant … seit dem SP1 läuft das Script *nicht* mehr bei mir, bei meinem Kollegen ist es nie gelaufen. Hat jemand ähnliche Probleme?
Karin S. meinte am 19.2.2009 um 15:59:
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…
Fabian A. meinte am 7.8.2009 um 19:14:
Servus!
Danke tolles Tutorial. Gibt es denn auch eine Möglichkeit diese Kategorie dann in Outlook anzuzeigen und beim Anlegen von Terminen auszufüllen?
Gernot meinte am 12.11.2009 um 17:12:
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.
zem meinte am 20.11.2009 um 18:30:
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
Schröder meinte am 26.11.2009 um 17:35:
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!
Schröder meinte am 26.11.2009 um 18:11:
hat sich erledigt.. mit dem IE gehts natürlich.. :S
Trotzdem vielen Dank für das Tutorial !
zem meinte am 30.12.2009 um 12:58:
@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
zanpen meinte am 13.4.2010 um 14:08:
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!!!!
ALBI meinte am 11.5.2010 um 10:10:
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
Richard Z. meinte am 22.6.2010 um 16:00:
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?
tom meinte am 23.6.2010 um 15:42:
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;
}