image

Kürzlich wurde ich vor die Aufgabe gestellt einen flexiblen, voll anpassungsfähigen Kalender auf einer SharePoint-Seite zu integrieren.
Da der Standard-Kalender den Anforderungen nicht gerecht wird, entschied ich mich für einen Kalender auf Basis von HTML/CSS und JavaScript, der dann einfach über den Content-Editor auf der Seite eingebettet werden konnte.
Nach Motto “keep it simple” habe ich mich im Internet auf die Suche nach einem freien, geeigneten Kalender gemacht und den Calendar JavaScript [DOM] von Michael Loesler ausgewählt.
Leider war der Kalender in seiner originalen Form nicht mit SharePoint kompatibel, da der enthaltene JavaScript-Code die Oberflächen von SharePoint unbrauchbar gemacht hat.
Die Lösung bestand in einer Anpassung des Codes und das Ergebnis möchte ich gerne mit euch teilen Smiley

Die Anpassungen bestanden aus einer generellen Vereinfachung des Codes.

Für die SharePoint-Integration musste noch die “window.onLoad”-Methode durch die Methode “_spBodyOnLoadFunctionNames.push(‚HVCalendarInit‘);” ersetzt werden. Diese Methode dient dazu, eigene JavaScript-Funktionen an die von SharePoint verwaltete OnLoad-Methode anzuhängen.

<div id="HVCalendar" ></div>
<script type="text/javascript"> 
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Based On~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +
+                          Calendar JS  v2.2                           +
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~And~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +
+          Calendar JavaScript [DOM] v3.11 by Michael Loesler          +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Copyright (C) 2005-06 by Michael Loesler, http://derletztekick.de    +
+                                                                      +
+                                                                      +
+ This program is free software; you can redistribute it and/or modify +
+ it under the terms of the GNU General Public License as published by +
+ the Free Software Foundation; either version 2 of the License, or    +
+ (at your option) any later version.                                  +
+                                                                      +
+ This program is distributed in the hope that it will be useful,      +
+ but WITHOUT ANY WARRANTY; without even the implied warranty of       +
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the        +
+ GNU General Public License for more details.                         +
+                                                                      +
+ You should have received a copy of the GNU General Public License    +
+ along with this program; if not, write to the                        +
+ Free Software Foundation, Inc.,                                      +
+ 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.            +
+                                                                      +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

var HVCalendarNow = new Date(); 
var HVCalendarDate = HVCalendarNow.getDate();
var HVCalendarMonth = HVCalendarNow.getMonth();
var HVCalendarYear = HVCalendarNow.getFullYear();    

    function getHVCalendar(mm, yy){
        var sevendaysaweek = 0;
        var begin = new Date(yy,mm,1);
        var firstday = begin.getDay()-1;
        if (firstday < 0){
                       firstday = 6;
        }
        dayname = new Array("Mo","Di","Mi","Do","Fr","Sa","So");
        HVCalendarMonthname = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
        daysperHVCalendarMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
        if ((yy%4==0) && ((yy%100!=0) || (yy%400==0))){
                       daysperHVCalendarMonth[1] = 29;
        }
        if ((mm != HVCalendarMonth) || (yy != HVCalendarYear)){
                       var today = '';
        }
        else {
                       var today = HVCalendarDate+'.';
        }
        var showcalendar = document.getElementById("HVCalendar");
        for (var i=0; i<showcalendar.childNodes.length; i++){
                       showcalendar.removeChild(showcalendar.childNodes[i]);
        }
        var newHVCalendarTable = document.createElement('table');
        newHVCalendarTable.id = "HVCalendarTable";   newHVCalendarTable.title = 'Zum Kalender';

        var newCalTHead = document.createElement('thead');
        var newCalTBody = document.createElement('tbody');
        var newCalTFoot = createHVCalendarTableFoot();

        var newCalRow = document.createElement('tr');

        var newCalHead = document.createElement('th');
        newCalHead.colSpan = 7;
        newCalHead.appendChild(document.createTextNode(today+" "+HVCalendarMonthname[mm]+" "+yy));
        newCalRow.appendChild(newCalHead);

        newCalRow.appendChild(newCalHead);
        newCalTHead.appendChild(newCalRow);

        var newCalRow = document.createElement('tr');
        for (var i=0; i<dayname.length; i++){
                       var newCalDayname = document.createElement('th');
                       newCalDayname.className = "weekday";
                       newCalDayname.appendChild(document.createTextNode(dayname[i]));
                       newCalRow.appendChild(newCalDayname);
        }
        newCalTHead.appendChild(newCalRow);

        var newCalRow = document.createElement('tr');
        for (var i=0; i<firstday; i++){
                       var newCalDays = document.createElement('td');
                       newCalDays.appendChild(document.createTextNode(String.fromCharCode(160)));
                       newCalRow.appendChild(newCalDays);
                       sevendaysaweek++;
        }

        for (var i=1; i<=daysperHVCalendarMonth[mm]; i++){
                       if (dayname.length == sevendaysaweek){
                                       newCalTBody.appendChild(newCalRow);
                                       var newCalRow = document.createElement('tr');
                                       var newCalDays = document.createElement('td');

                                            if(i == HVCalendarDate)
                                            {
                                                newCalDays.className = "today";
                                            }

                                       newCalDays.appendChild(document.createTextNode(i));
                                       newCalRow.appendChild(newCalDays);
                                       sevendaysaweek = 0;
                       }
                       else {
                                       var newCalDays = document.createElement('td');
                                        if(sevendaysaweek <= 4){      
                                            if(i == HVCalendarDate)
                                            {
                                                newCalDays.className = "today";
                                            }
                                       }
                                       else if(sevendaysaweek >= 5 )
                                       {
                                            if(i == HVCalendarDate){
                                                newCalDays.className = "today weekend";
                                            }
                                            else{
                                                newCalDays.className = "weekend";
                                            }
                                       }
                                       newCalDays.appendChild(document.createTextNode(i));
                                       newCalRow.appendChild(newCalDays);
                       }
                       sevendaysaweek++;
        }

        for (var i=sevendaysaweek; i<dayname.length; i++){
                       var newCalDays = document.createElement('td');
                       newCalDays.appendChild(document.createTextNode(String.fromCharCode(160)));
                       newCalRow.appendChild(newCalDays);
        }

        newCalTBody.appendChild(newCalRow);

        newHVCalendarTable.appendChild(newCalTHead);
        newHVCalendarTable.appendChild(newCalTBody);
        newHVCalendarTable.appendChild(newCalTFoot);
        showcalendar.appendChild(newHVCalendarTable);
    }

    function HVCalendartGetCell(tag, str, cssClass) {
        var El = document.createElement( tag );
        El.appendChild(document.createTextNode( str ));
        if (cssClass != null)
            El.className = cssClass;
        return El;
    }

    function HVCalendartTmeTrigger(){
        var HVCalendarNow = new Date();
        var ss = (HVCalendarNow.getSeconds()<10)?"0"+HVCalendarNow.getSeconds():HVCalendarNow.getSeconds();
        var mm = (HVCalendarNow.getMinutes()<10)?"0"+HVCalendarNow.getMinutes():HVCalendarNow.getMinutes();
        var hh  = (HVCalendarNow.getHours()<10)?"0"+HVCalendarNow.getHours():HVCalendarNow.getHours();
        var str = hh+":"+mm+":"+ss;
        return str;
    }

    function getHVCalendarWeek(j,m,t) {
        var cwDate = this.HVCalendarNow;
        if (!t) {
            j = cwDate.getFullYear();
            m = cwDate.getMonth(); 
            t = cwDate.getDate();
        }
        cwDate = new Date(j,m,t);
        var doDat = new Date(cwDate.getTime() + (3-((cwDate.getDay()+6) % 7)) * 86400000);
        cwYear = doDat.getFullYear();
        var doCW = new Date(new Date(cwYear,0,4).getTime() + (3-((new Date(cwYear,0,4).getDay()+6) % 7)) * 86400000);
        cw = Math.floor(1.5+(doDat.getTime()-doCW.getTime())/86400000/7);
        return cw;
    }

    function createHVCalendarTableFoot() {
        var tfoot = document.createElement("tfoot");
        var tr = document.createElement("tr");
        var td = HVCalendartGetCell( "td", "KW\u00a0" + getHVCalendarWeek(HVCalendarYear, HVCalendarMonth, HVCalendarDate), "calendar_week" );
        td.colSpan = 3;
        tr.appendChild( td );
        var td = HVCalendartGetCell( "td", HVCalendartTmeTrigger(), "clock" );
        td.colSpan = 4;
        tr.appendChild( td );
        tfoot.appendChild( tr );
        window.setInterval(function() { td.firstChild.nodeValue = HVCalendartTmeTrigger(); }, 500);
        return tfoot;
    }
    window.onLoad(getHVCalendar(HVCalendarMonth, HVCalendarYear));

</script>

<style type="text/css">
/********************************************************/
/* Calendar JS Cascading Style Sheets by Michael Lösler */
/* Alle Rechte vorbehalten! (C) 2004 by Michael Lösler  */
/* media:screen www.derletztekick.de                    */
/********************************************************/

                #HVCalendar {
                    TEXT-ALIGN: center
                }
                #HVCalendar TABLE{
                    cursor: pointer;
                    }
                #HVCalendar TABLE THEAD TH {
                    TEXT-ALIGN: center;
                    LINE-HEIGHT: 1.5em;
                    BACKGROUND-COLOR: #666666;
                    COLOR: #FFFFFF;
                    FONT-SIZE: 0.75em;
                    FONT-WEIGHT: bold
                }
                #HVCalendar TABLE THEAD TH.weekday {
                    BORDER: #222222 1px solid;
                    TEXT-ALIGN: center;
                    LINE-HEIGHT: 1.5em;
                    BACKGROUND-COLOR: #BBBBBB;
                    COLOR: #000000;
                    FONT-SIZE: 0.5em;
                    FONT-WEIGHT: bold;
                }
                #HVCalendar TABLE TBODY TD {
                    BORDER: #CCCCCC 1px solid;
                    TEXT-ALIGN: right;
                    LINE-HEIGHT: 1.5em;
                    PADDING-LEFT: 0.6em;
                    WIDTH: 2em;
                    PADDING-RIGHT: 0.6em;
                    COLOR: #000000;
                    FONT-SIZE: 1em;
                    FONT-WEIGHT: normal;
                }
                #HVCalendar TABLE TFOOT TD {
                    BORDER-BOTTOM: #ccd2d8 1px solid;
                    TEXT-ALIGN: right;
                    BORDER-LEFT: #ccd2d8 1px solid;
                    LINE-HEIGHT: 1.5em; PADDING-LEFT: 0.6em;
                    WIDTH: 2em; PADDING-RIGHT: 0.6em;
                    COLOR: #0e224b; FONT-SIZE: 1em;
                    BORDER-TOP: #ccd2d8 1px solid;
                    FONT-WEIGHT: normal;
                    BORDER-RIGHT: #ccd2d8 1px solid
                }
                #HVCalendar TABLE TFOOT TD {
                    BORDER-BOTTOM: medium none;
                    BORDER-LEFT: medium none;
                    FONT-SIZE: 0.65em;
                    BORDER-TOP: medium none;
                    BORDER-RIGHT: medium none
                }

                #HVCalendar TABLE TBODY TD.weekend {
                    COLOR: #9a2525
                }
                #HVCalendar TABLE TBODY TD.today {
                    BACKGROUND-COLOR: #AAAAAA
                }
                #HVCalendar TABLE TFOOT TD.calendar_week {
                    TEXT-ALIGN: left
                }

                #HVCalendar TABLE {
                    BORDER-BOTTOM: #AAAAAA 2px solid;
                    BORDER-LEFT: #AAAAAA 2px solid;
                    PADDING-BOTTOM: 0px;
                    BACKGROUND-COLOR: #f6f6f6;
                    PADDING-LEFT: 0px; PADDING-RIGHT: 0px;
                    BORDER-COLLAPSE: collapse;
                    MARGIN-LEFT: auto;
                    BORDER-TOP: #AAAAAA 2px solid;
                    MARGIN-RIGHT: auto;
                    BORDER-RIGHT: #AAAAAA 2px solid;
                    PADDING-TOP: 0px
                }
</style>

1 Comments

  1. Pingback: SharePoint-Gadgets: Dynamischer Kalender für den Inhaltseditor - SharePoint Blogs in German - Bamboo Nation

Leave a comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.