SharePoint full calendar

gistfile1.js

<style>

#calendar28 { 
  padding-top: 15px;
  width: 850px; 
} 
 
.fc-header-title h2 { 
    font-size: 14px; 
    width:80;
    white-space: normal !important; 
} 

.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {   
    font-size: 11px; 
    font-weight: bold;
    font-family: verdana;
    text-align: center;
    color: red;
    margin: 2px;
} 
</style>


<div id="yrq" style="display:none">
    <table>
        <tr>            
            <td valign="top">
                <b><font color='DarkBlue'>Select Time Frame:</font></b>

                <select name="ddlYear" id="ddlYear" onChange="ChangedDate()">
                    <option>2012</option>
                    <option>2013</option>
                    <option>2014</option>
                    <option>2015</option>
                    <option>2016</option>
                </select>
         
                <select name="ddlQuarter" id="ddlQuarter" onChange="ChangedDate()">
                    <option></option>
                    <option>Q1</option>
                    <option>Q2</option>
                    <option>Q3</option>
                    <option>Q4</option>    
                </select>
            </td>
            
            <td width="5px">
            </td>
            
            <td valign="top">
            
                <div id="divDept">
                    <b><font color='DarkBlue'>   Filter by Department:</font></b>
                    <select id="filterDept">                   
                    </select>
                </div>
                
            </td>
            
            <td>
                <div id="legend1">
                </div>
            </td>
        </tr>
    </table>
</div>

<br/><br/><br/><br/>

<div id="tooltip" style="position:absolute;display:none;background-color:white;border:solid 1px gray;padding:5px;z-index:50;" >
</div>


<div id="outputDiv1" style="display:none">
    <img id="progressSpinner" enableviewstate="true" src="/_layouts/images/gears_an.gif" alt="This is the spinner..." />  
    <font color="red"><i>Please wait as page loads...</i></font>
    <br/><br/><br/>
</div>


<div id="outputDiv" style="display:none">
    <font color="red"><i>Please wait as page loads...</i></font>
    <br/><br/><br/>
</div>


<table width="100%" id="tblCalendar">
    <tr>    
        <td>
            <div id="calendar1">
            </div>
            <br/><br/>        
        </td>            
    </tr>
    <tr>        
        <td>
            <div id="calendar2">
            </div><br/><br/>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar3">
            </div>
        </td>    
    </tr>
    <tr>    
        <td>
            <div id="calendar4">
            </div>
        </td>
    </tr>
    <tr>    
        <td>
            <div id="calendar5">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar6">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar7">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar8">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar9">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar10">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar11">
            </div>
        </td>
    </tr>
    <tr>        
        <td>
            <div id="calendar12">
            </div>
        </td>
    </tr>
</table>


<link rel="stylesheet" type="text/css" href="http://sitename/css/jquery-ui-1.8.16.custom/css/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" href="http://sitename/js/fullcalendar-1.5.2/fullcalendar.css" />
<link rel='stylesheet' type='text/css' href='http://sitename/js/fullcalendar-1.5.2/fullcalendar.css' media='print' />

<script type='text/javascript' language='javascript' src='http://sitename/js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' language='javascript' src='http://sitename/js/jquery-ui-1.8.17.custom.min.js'></script>
<script type="text/javascript" language="javascript" src="http://sitename/js/SPServices/jquery.SPServices-0.6.2.js"></script>
<script type="text/javascript" language="javascript" src="http://sitename/js/fullcalendar-1.5.2/fullcalendar.min.js"></script>
<script type="text/javascript" language="javascript" src="http://sitename/js/jquery.qtip-1.0.0-rc3.min.js"></script>


<script type="text/javascript" language="javascript"> 
//Written By Shirin Parsee
//http://dcsharepointchick.blogspot.com/2012/06/sharepoint-calendar-by-fiscal-year.html 

var siteURL = $().SPServices.SPGetCurrentSite();
var curPageURL = window.location.pathname;

//TODO: Change to your calendar name
var listCalendarName = "Calendar";
var legendColors = new Array();
var curLoadedCalendars = 0;
var calendarsToLoad = 3;
var datesToLoad = new Array();


$(document).ready( function() 
{
    ShowProgressBar(true);
    ShowCalendarTable(false);    
    
    setTimeout("Load()", 50);
});


var paramfilterDept = "";

function Load()
{
    var paramfilterFY = getParameterByName("FY");
    var paramfilterQuarter = getParameterByName("Quarter");

    paramfilterDept = getParameterByName("Dept");

    if( paramfilterFY == "" )
    {
        var curDate = new Date();
        var yr = curDate.getFullYear();            
        var curMonth = curDate.getMonth();
    
        if( curMonth ==9 || curMonth == 10 || curMonth ==11)
        {
            quarter = "Q1";
        }
        else if( curMonth ==0 || curMonth== 1 || curMonth==2)
        {
            quarter = "Q2";
        }        
        else if( curMonth ==3 || curMonth == 4 || curMonth ==5)
        {
            quarter = "Q3";
        }
        else if( curMonth ==6 || curMonth== 7 || curMonth ==8)
        {
            quarter = "Q4";
        }
        
        paramfilterFY = yr;
        paramfilterQuarter = quarter;
    }
    
    
    var e = document.getElementById("ddlYear");     
    for (var h = 0; h < e.options.length; h++) 
    {    
        if (e.options[h].text == paramfilterFY) 
        {       
            e.selectedIndex = h;    
            break;     
        } 
    } 
    
    
    e = document.getElementById("ddlQuarter");  
    for (var h = 0; h < e.options.length; h++) 
    {    
        if (e.options[h].text == paramfilterQuarter) 
        {       
            e.selectedIndex = h;    
            break;     
        } 
    } 
    
    document.getElementById("yrq").style.display = "";
    LoadCalendars();    
}


// Format UTC dates as local date/time strings.
function formatDateToLocal( date ) {

    var dateUTC;

    if ( typeof date === "string" ) {

        // Convert UTC string to date object
        var d = new Date();
        var year = date.split('-')[0];
        var month = date.split('-')[1] - 1;
        var day;
        var hour;
        var minute;
        var second;
        day = date.split('-')[2].split('T')[0];
        hour = date.split('T')[1].split(':')[0];
        minute = date.split('T')[1].split(':')[1].split(':')[0];
        second = date.split('T')[1].split(':')[2].split('Z')[0];
        dateUTC = new Date( Date.UTC( year, month, day, hour, minute, second ) );
    }
    else if ( typeof date === "object" ) {
        dateUTC = date;
    }
    else {
        alert( "Date is not a valid string or date object." );
    }

    // Create local date strings from UTC date object
    var year = "" + dateUTC.getFullYear();
    var month = "" + ( dateUTC.getMonth() + 1 ); // Add 1 to month because months are zero-indexed.
    var day = "" + dateUTC.getDate();
    var hour = "" + dateUTC.getHours();
    var minute = "" + dateUTC.getMinutes();
    var second = "" + dateUTC.getSeconds();

    // Add leading zeros to single-digit months, days, hours, minutes, and seconds
    if ( month.length < 2 ) {
        month = "0" + month;
    }
    if ( day.length < 2 ) {
        day = "0" + day;
    }
    if ( hour.length < 2 ) {
        hour = "0" + hour;
    }
    if ( minute.length < 2 ) {
        minute = "0" + minute;
    }
    if ( second.length < 2 ) {
        second = "0" + second;
    }

    var localDateString = year + "-" + month + "-" + day + "T" + hour + ":" + minute + ":" + second;
    return localDateString;
}

function ChangedDate()
{
    ClearDropDownItems("filterDept");
    
    ShowCalendarTable(false);
    ShowProgressBar(true);

    ClearCalendars();
    ClearLegend();
    
    var xxx = setTimeout("LoadCalendars()", 50);
}

function LoadCalendars()
{
    var e = document.getElementById("ddlYear"); 
    var ddlYearVal = e.options[e.selectedIndex].text;
    
    var e1 = document.getElementById("ddlQuarter"); 
    var ddlQuarterVal = e1.options[e1.selectedIndex].text;
    
    var c1Date = "";
    var c2Date = "";
    var c3Date = "";
    var c4Date = "";
    var c5Date = "";
    var c6Date = "";
    var c7Date = "";
    var c8Date = "";
    var c9Date = "";
    var c10Date = "";
    var c11Date = "";
    var c12Date = "";

    var c1yr = 0;
    var c1mo = 0;
    
    var c2yr = 0;
    var c2mo = 0;
    
    var c3yr = 0;
    var c3mo = 0;
    
    var c4yr = 0;
    var c4mo = 0;

    var c5yr = 0;
    var c5mo = 0;

    var c6yr = 0;
    var c6mo = 0;

    var c7yr = 0;
    var c7mo = 0;

    var c8yr = 0;
    var c8mo = 0;

    var c9yr = 0;
    var c9mo = 0;
    
    var c10yr = 0;
    var c10mo = 0;
    
    var c11yr = 0;
    var c11mo = 0;

    var c12yr = 0;
    var c12mo = 0;

    
    datesToLoad = new Array();
    
    if( ddlQuarterVal == "Q1" )
    {
        var yrModified = parseInt(ddlYearVal,10)-1;
        c1Date = yrModified + "-10-01";        
        c2Date = yrModified + "-11-01";
        c3Date = yrModified + "-12-01";    
        
        c1yr = yrModified;
        c1mo = 09;        
        
        c2yr = yrModified;
        c2mo = 10;    
        
        c3yr = yrModified;
        c3mo = 11;    
        
        datesToLoad.push([c1Date, c1yr, c1mo]);
        datesToLoad.push([c2Date, c2yr, c2mo]);
        datesToLoad.push([c3Date, c3yr, c3mo]);
        
    }
    else if( ddlQuarterVal == "Q2" )
    {
        var yrModified = parseInt(ddlYearVal,10)-1;

        c1Date = ddlYearVal + "-01-01";        
        c2Date = ddlYearVal + "-02-01";
        c3Date = ddlYearVal + "-03-01";    
        
        c1yr = yrModified;
        c1mo = 12;        
        
        c2yr = ddlYearVal;
        c2mo = 01;    
        
        c3yr = ddlYearVal;        
        c3mo = 02;
        
        datesToLoad.push([c1Date, c1yr, c1mo]);
        datesToLoad.push([c2Date, c2yr, c2mo]);
        datesToLoad.push([c3Date, c3yr, c3mo]);
        
    }
    else if( ddlQuarterVal == "Q3" )
    {
        c1Date = ddlYearVal + "-04-01";        
        c2Date = ddlYearVal + "-05-01";
        c3Date = ddlYearVal + "-06-01";        
                
        c1yr = ddlYearVal;
        c1mo = 03;        
        
        c2yr = ddlYearVal;
        c2mo = 04;    
        
        c3yr = ddlYearVal;
        c3mo = 05;
        
        datesToLoad.push([c1Date, c1yr, c1mo]);
        datesToLoad.push([c2Date, c2yr, c2mo]);
        datesToLoad.push([c3Date, c3yr, c3mo]);

    }
    else if( ddlQuarterVal == "Q4" )
    {
        c1Date = ddlYearVal + "-07-01";        
        c2Date = ddlYearVal + "-08-01";
        c3Date = ddlYearVal + "-09-01";        
        
        c1yr = ddlYearVal;
        c1mo = 06;        
        
        c2mo = 07;    
        c2yr = ddlYearVal;
        
        c3mo = 08;
        c3yr = ddlYearVal;
        
        datesToLoad.push([c1Date, c1yr, c1mo]);
        datesToLoad.push([c2Date, c2yr, c2mo]);
        datesToLoad.push([c3Date, c3yr, c3mo]);
    }
    else if( ddlQuarterVal == "" )
    {
    
        calendarsToLoad = 12;
        
        
        var yrModified = parseInt(ddlYearVal,10)-1;
        c1Date = yrModified + "-10-01";        
        c2Date = yrModified + "-11-01";
        c3Date = yrModified + "-12-01";    
        
        c1yr = yrModified;
        c1mo = 09;        
        
        c2yr = yrModified;
        c2mo = 10;    
        
        c3yr = yrModified;
        c3mo = 11;    
        
        
        c4Date = ddlYearVal + "-01-01";        
        c5Date = ddlYearVal + "-02-01";
        c6Date = ddlYearVal + "-03-01";    
        
        c4yr = yrModified;
        c4mo = 12;        
        
        c5yr = ddlYearVal;
        c5mo = 01;    
        
        c6yr = ddlYearVal;        
        c6mo = 02;
        
        c7Date = ddlYearVal + "-04-01";        
        c8Date = ddlYearVal + "-05-01";
        c9Date = ddlYearVal + "-06-01";        
                
        c7yr = ddlYearVal;
        c7mo = 03;        
        
        c8yr = ddlYearVal;
        c8mo = 04;    
        
        c9yr = ddlYearVal;
        c9mo = 05;
        
        c10Date = ddlYearVal + "-07-01";        
        c11Date = ddlYearVal + "-08-01";
        c12Date = ddlYearVal + "-09-01";        
        
        c10yr = ddlYearVal;
        c10mo = 06;        
        
        c11mo = 07;    
        c11yr = ddlYearVal;
        
        c12mo = 08;
        c12yr = ddlYearVal;
        
        datesToLoad.push([c1Date, c1yr, c1mo]);
        datesToLoad.push([c2Date, c2yr, c2mo]);
        datesToLoad.push([c3Date, c3yr, c3mo]);
        datesToLoad.push([c4Date, c4yr, c4mo]);
        datesToLoad.push([c5Date, c5yr, c5mo]);
        datesToLoad.push([c6Date, c6yr, c6mo]);
        datesToLoad.push([c7Date, c7yr, c7mo]);
        datesToLoad.push([c8Date, c8yr, c8mo]);
        datesToLoad.push([c9Date, c9yr, c9mo]);
        datesToLoad.push([c10Date, c10yr, c10mo]);
        datesToLoad.push([c11Date, c11yr, c11mo]);
        datesToLoad.push([c12Date, c12yr, c12mo]);
    }
    
    
    LoadCalendar('#calendar1', c1Date, c1yr, c1mo);
}

function LoadCalendar(calendarName, cDate, cyr, cmo)
{
    curLoadedCalendars++;
        
    var yr = document.getElementById("ddlYear"); 
    var yrValue = yr.options[yr.selectedIndex].text;
    var quarter = document.getElementById("ddlQuarter"); 
    var qValue = quarter.options[quarter.selectedIndex].text;
    
    
    var currentUrl = curPageURL + "?FY=" + yrValue+ "&Quarter=" + qValue;
    var sourceUrl =    currentUrl.replace("&", "%26");
                        
                        
    $( calendarName ).fullCalendar({

        // Assign buttons to the header of the calendar. See FullCalendar documentation for details.
        header: {
            left:'prev,next today',
            center: 'title',
            right: 'month, agendaWeek, agendaDay'
        },
        defaultView: "month", // Set the default view to month
        firstHour: "5", // Set the first visible hour in agenda views to 5 a.m.
        height: 720, // Set the height of the calendar in pixels
        weekMode: "liquid", // Only display the weeks that are needed
        theme: true, // Use a jQuery UI theme instead of the default fullcalendar theme
        editable: false, // Set the calendar to read-only; events can't be dragged or resized

        // Add events to the calendar. This is where the "magic" happens!
        events: function( start, end, callback ) {

            // Create an array to hold the events.
            var events = [];

            // Set the date from which to pull events based on the first visible day in the current calendar view. For a month view, this will usually be several days into the previous month. We can use FullCalendar's built-in getView method along with the formatDate utility function to create a date string in the format that SharePoint requires. It must be in the format YYYY-MM-DDTHH:MM:SSZ. Due to time zone differences, we will omit everything after the day.
            //var startDate = $.fullCalendar.formatDate( $( '#calendar2' ).fullCalendar( 'getView' ).start, "u" ).split( "T" )[0];
            
            $( calendarName ).fullCalendar( 'gotoDate', cyr, cmo );        
            var startDate = cDate;            
            
            // Get the current view of the calendar (agendaWeek, agendaDay, month, etc.). Then set the camlView to the appropriate value to pass to the web service. This way we will only retrieve events needed by the current view (e.g. the agendaWeek view will only retrieve events during the current week rather than getting all events for the current month).
            var calView = $( calendarName ).fullCalendar( 'getView' ).title;
            var camlView = "";

            switch( calView ) {
                case "agendaWeek":
                    camlView = "<Week />";
                    break;
                case "agendaDay":
                    camlView = "<Week />";
                    break;
                default: // Default to month view
                    camlView = "<Month />";
            }

            
            //TODO: Check for Color and Department names (color is a calculated field and Department is a choice)
            
            // Set the camlFields, camlQuery, and camlOptions to the appropriate values to pass to the web service. You can add additional <ViewFields /> or adjust the CAML query if you have some custom columns that you want to filter by or display data from. The values below are the pretty much the minimum you'll want to start from to get it working.
            var camlFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='Location' /><FieldRef Name='Description' /><FieldRef Name='fRecurrence' /><FieldRef Name='RecurrenceData' /><FieldRef Name='RecurrenceID' /><FieldRef Name='fAllDayEvent' /><FieldRef Name='Color' /><FieldRef Name='Department' /></ViewFields>";
            var camlQuery = "<Query><CalendarDate>" + startDate + "</CalendarDate><Where><DateRangesOverlap><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /><FieldRef Name='RecurrenceID' /><Value Type='DateTime'>" + camlView + "</Value></DateRangesOverlap></Where><OrderBy><FieldRef Name='EventDate' /></OrderBy></Query>";
            var camlOptions = "<QueryOptions><CalendarDate>" + startDate + "</CalendarDate><RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion><ExpandRecurrence>TRUE</ExpandRecurrence><DateInUtc>TRUE</DateInUtc></QueryOptions>";

            
            
            // Make the web service call to retrieve events.
            $().SPServices({
                operation: "GetListItems",
                async: false,
                listName: listCalendarName, // Change this to the GUID or display name of your calendar. If the calendar is on a different site, you can use the display name with the webURL option (see SPServices.CodePlex.com for more information).
                CAMLViewFields: camlFields,
                CAMLQuery: camlQuery,
                CAMLQueryOptions: camlOptions,
                completefunc: function( xData, Status ) {
                
                //alert(Status);
                //alert(xData.responseText);
                //$( xData.responseXML ).find( '[nodeName="z:row"]' ).each( function() {
                 //$(xData.responseXML).SPFilterNode("z:row").each(function() {
                 
                $(xData.responseXML).find("z\\:row, row").each(function() {

                        // Check for all day events
                        var fADE = $( this ).attr( 'ows_fAllDayEvent' );
                        var thisADE = false;
                        var thisStart;
                        var thisEnd;

                        if ( typeof fADE !== "undefined" && fADE !== "0" ) {
                            thisADE = true;
                            // Get the start and end date/time of the event. FullCalendar will parse date strings in local time automagically, and we don't need to do any local time conversions for all day events, so we can use the UTC date strings from SharePoint without converting them to local time.
                            var thisStart = $( this ).attr( 'ows_EventDate' );
                            var thisEnd = $( this ).attr( 'ows_EndDate' );
                        }
                        else {
                            // Get the start and end date/time of the event. FullCalendar will parse date strings in local time automagically, so we need to convert the UTC date strings from SharePoint into local time. The formatDateToLocal() function above will take care of this. See comments in that function for more information.
                            var thisStart = formatDateToLocal( $( this ).attr( 'ows_EventDate' ) );
                            var thisEnd = formatDateToLocal( $( this ).attr( 'ows_EndDate' ) );
                        }

                        // Get the list item ID and recurrence date if present. This will be used to generate the ID query string parameter to link to the event (or the specific instance of a recurring event). The ID query string parameter must be in the format "ID.0.yyyy-MM-ddTHH:mm:ssZ" for recurring events (where "ID" is the list item ID for the event). Event ID's are returned as just a number (for non-recurring events) or several numbers separated by ";#" in 2007 or "." in 2010 to indicate individual instances of recurring events. By splitting and joining the ID this way, thisID will be set to a valid query string parameter whether an event is recurring or not for both versions of SharePoint.
                        var thisID = $( this ).attr( 'ows_ID' ).split( ';#' ).join( '.' );

                        // FullCalendar documentation specifies that recurring events should all have the same id value when building the events array (the id is optional, but I'm including it for completeness). We can get the list item ID (which is the same for all instances of recurring events) without the recurrence information by simply splitting thisID.
                        var eventID = thisID.split( '.' )[0];

                        // Get the event title. This is displayed on the calendar along with the start time of the event.
                        var thisTitle = $( this ).attr( 'ows_Title' );
                        
                        // Get the event description. I don't use it in this example, but you could use it for something, perhaps as a tooltip when hovering over the event.
                        var thisDesc = $( this ).attr( 'ows_Description' );
                        if( thisDesc == "<div></div>")
                            thisDesc = "";

                        var thisColor = $( this ).attr( 'ows_Color' );
                        if( thisColor != null && thisColor != "")
                        {
                            thisColor = thisColor.split(";#")[1];
                        }
                        else
                        {
                            thisColor = "Yellow";
                        }
                        
                        var thisDepartmentName = $( this ).attr( 'ows_Department' );                        
                        var deptName = AddColorToLegend(thisDepartmentName, thisColor);                        
                        
                        events.push({
                            title: thisTitle,
                            id: eventID,
                            start: thisStart,
                            end: thisEnd,
                            allDay: thisADE,
                            backgroundColor: thisColor,
                            textColor:'Navy',
                            // Adjust this URL to link to the display form for your calendar events. You can include a Source parameter to allow users to easily return to the FullCalendar page.
                            url: siteURL + '/Lists/' + listCalendarName + '/DispForm.aspx?ID=' + thisID + '&Source=' + sourceUrl,
                            description: thisDesc,
                            department:deptName
                        });

                    });

                    callback( events );

                }
            });

        },
        eventRender: function(event, element) 
        {     
        
            tooltipTitle = event.title;
        
            if( event.description != null && event.description != "" )
            {
                tooltipTitle = tooltipTitle + ": " + event.description ;
            }
            element.qtip({                 
                content: tooltipTitle,
                style: 'cream'                     
            });           
            
        }         
    });
    
    if( curLoadedCalendars < calendarsToLoad )
    {    
        setTimeout("LoadCalendar2()", 50);        
    }
    else
    {    
        $(".fc-button-today").toggle($('.fc-button-today').css('display') == 'none');   
        ShowCalendars();
    }
}


function LoadCalendar2()
{
    var indexToLoad = curLoadedCalendars;
    var calendarIndex = indexToLoad+1;
    var calendarNameToLoad = "#calendar" + calendarIndex;

    LoadCalendar(calendarNameToLoad, datesToLoad[indexToLoad][0],datesToLoad[indexToLoad][1], datesToLoad[indexToLoad][2]);
}


function AddColorToLegend(dept, color)
{
    
    var bFound = false;
    
    if( dept != null)
    {
        if( dept.indexOf(':') >= 0 )
        {
            dept = dept.split(':')[0];
        }
        
        for( var x =0; x < legendColors.length; x++ )
        {
            if( legendColors[x][0] == dept)
            {
                bFound = true;
                break;
            }
        }
        
        if( bFound == false)
        {
            if( color != null )
            {
                legendColors.push([dept,color]);        
            }
        }
    }
    else
    {
        dept = "";
    }
    return dept;
}



function ShowCalendars()
{
    legendColors.sort(DeptSort);
    
    var output = "<table>";
    
    ClearDropDownItems("filterDept");
    
    AddItem("filterDept", "-- Show All --", "ShowAll");

    for( var x = 0; x < legendColors.length; x++ )
    {
        var deptName = legendColors[x][0];
        var color = legendColors[x][1];
        output += "<tr bgcolor='" + color + "'><td><font color='Navy'><b>" + deptName +"</b></font></td></tr>";
        
        
        AddItem("filterDept", deptName, deptName);
    }
    output += "</table>";

    
    /* set filter on dept */ 
    var e = document.getElementById("filterDept");     
    for (var h = 0; h < e.options.length; h++) 
    {    
        if (e.options[h].text == paramfilterDept) 
        {       
            e.selectedIndex = h;  

            filterCount = 0;
            DoRefetch();
            break;     
        } 
    } 
    
    document.getElementById("legend1").innerHTML = output;
        
    ShowProgressBar(false);
    ShowCalendarTable(true);
}

function DeptSort(a, b)
{ 
    var aDept = a[0];
    
    var bDept = b[0];
    if( aDept > bDept)
        return 1;
    else if( aDept = bDept)
        return 0;
    else
        return -1;
}



function ShowCalendarTable( show )
{
    if( show )    
    {
        document.getElementById('tblCalendar').style.visibility = "visible";
        document.getElementById('divDept').style.visibility = "visible";
    }
    else
    {
        document.getElementById('tblCalendar').style.visibility = "hidden";
        document.getElementById('divDept').style.visibility = "hidden";
    }
}

function ShowProgressBar(show)
{
    if( show )
        document.getElementById("outputDiv").style.display = "";
    else
        document.getElementById("outputDiv").style.display = "none";
}


function ClearCalendars()
{
    var calendarName = "calendar";
    for( var x = 1; x <= 12; x++ )
    {
        document.getElementById(calendarName + x).innerHTML = "";    
    }
    
    curLoadedCalendars = 0;
    calendarsToLoad = 3;
}

function ClearLegend()
{

    document.getElementById("legend1").innerHTML = "";        
    legendColors = new Array();
}


var filterCount = 0;
$("#filterDept").change(function () 
{

    filterCount = 0;
    DoRefetch();
});

function DoRefetch()
{    
    var index = filterCount + 1;    
    
    $("#calendar" + index).fullCalendar("refetchEvents", filter);
    $("#calendar" + index).fullCalendar("removeEvents", filter);
    
    filterCount++;
    
    if( filterCount < calendarsToLoad )
    {
        setTimeout("DoRefetch()", 50);
    }
}


function filter(event) 
{
    if( $("#filterDept > option:selected").attr("id") == "ShowAll")
        return 0;
    else
        return $("#filterDept > option:selected").attr("id") != event.department;
}


 
function AddItem(DropDownID,Text,Value)
{
    try
    {
        // Add an Option object to Drop Down/List Box
        dropDown = document.getElementById(DropDownID);
        if( dropDown == null )
        {
        }
        else
        {
            var opt = document.createElement("option");
            
            dropDown.options.add(opt);
            opt.id = Value;
            opt.text = Text;
            opt.value = Value;
        }
    }
    catch(err)
    {
    
    }
}

 
function ClearDropDownItems(DropDownID)
{
     var theDropDown = document.getElementById(DropDownID);
    if(theDropDown != null )
    {   
        var numberOfOptions = theDropDown.options.length;   
        for (i = 0; i < numberOfOptions; i++) 
        {   
             theDropDown.remove(0); 
        }
    }   
    else
    {
        alert(DropDownID + " not found");
    }
}   


function getParameterByName(name) {   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");   var regexS = "[\\?&]" + name + "=([^&#]*)";   var regex = new RegExp(regexS);   var results = regex.exec(window.location.href);   if(results == null)     return "";   else     return decodeURIComponent(results[1].replace(/\+/g, " ")); } 
 

</script>