Sharepoint FullCalendar jquery View

Introduction

In this tip, I describe how to represent in a calendar view a list of items from a collection of custom library Sharepoint using the modality provided by fullcalendar jquery.
The execution context is an aspx page or HTML created using Sharepoint designer 2010.
All code is implemented entirely by the client. The first step is to download the latest version and fullcalendar.js IQuery through the following links:

• http://blog.jquery.com/2011/11/21/jquery-1-7-1-released/
• http://arshaw.com/fullcalendar/

Then create an HTML page or aspx page through Sharepoint designer by connecting to the site in which you want to insert the object calendar.

Background

Security context that the best proposal is integrated into Sharepoint through a page created with the designer. This allows us to use Ajax to make requests do not suffer from cross site scripting since the script is executed internally to the site where it is posted on the calendar. Another way to enable cross-domain JSON requests or AJAX calls usually requires 2 steps. First, you must instruct the target server from where the script is being requested from that it’s OK to accept calls from other domains.

We do this by modifying the HTTP response header. Secondly, we need to use Microsoft ‘XDR’ (Cross-Domain Request) in our JavaScript JSON request so that our cross-domain request is compatible in Internet Explorer 8 and 9. Modern browsers Chrome, FireFox, Safari and Internet Explorer 10 use a cross domain standard called ‘CORS’ (Cross Origin Resource Standard) rather than XDR, so a regular $.getJSON or $.ajax call here will work fine.

The following command in the .htaccess file will modify the response headers for all incoming requests to any scripts within the folder (and all child folders) where the .htaccess file is placed.

Using the Code

The first thing to do is to configure the Head of the page by placing all the necessary references to the loading of CSS style sheets and script as shown below:

<table border="0" cellpadding="0" cellspacing="0" 
class="auto-style1" style="mso-cellspacing: 0cm; mso-yfti-tbllook: 1184; 
mso-padding-alt: 0cm 0cm 0cm 0cm" width="815">
<p class="MsoNormal"><!-- HTML HEAD PAGE -->

<link rel="stylesheet" href="fullcalendar.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="fullcalendar.min.js"></script>

</p>

At this point, we are ready with the inclusion of the functions needed to recover the data from our custom collection Sharepoint using JavaScript and CAML Query. It is important to specify in the query all the necessary metadata. To do this, insert the following piece of code as shown below:

var ele = new Array();
     
function Retrive() {
var soapEnv ="<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body>\
             <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                 <listName>My Collection Name Sharepoint</listName> \
                 <rowLimit>10000</rowLimit>\
                 <viewFields> \
                     <ViewFields> \
                         <FieldRef Name='Nome' /> \
                          <FieldRef Name='FileRef' /> \
                         <FieldRef Name='Date_x0020_meeting' /> \
                     </ViewFields> \
                 </viewFields> \
             </GetListItems> \
         </soapenv:Body> \
      </soapenv:Envelope>";


    $.ajax({
    url: "http://my site sharepoint/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv,
    complete: processResult,
    contentType: "text/xml; charset=\"utf-8\""
    });
    return ele;
};
            
    function processResult(xData, status) {

    //chrome compatible
    var test = xData.responseText, 
    data = $.parseXML(test), 
    $test = $(data); 
    var i=0; 

    $(test).find("z\\:row").each(function() {
    var liHtml =    '<a href="../' + $(this).attr("ows_FileRef").split
    ("#")[1]  + '"  onclick="ga(\'send\', 
    \'event\', \'button\', \'download\', \'' + 
    $(this).attr("ows_FileLeafRef").split("#")[1]+ '\');">' + 
    $(this).attr("ows_FileLeafRef").split("#")[1] +'' ;
    ele[i] ={
                title:liHtml,
                start  :  $(this).attr("ows_Date_x0020_meeting")
             };
     i=i+1; 
    });
}

We declare the Array object that will allow us to collect all the pairs title of the item dates from Sharepoint and date of the meeting "element []." This will be the object datasource we're going to set inside the constructor of our calendar jquery. It is important to note that the title is described by a string HTML that will contain direct link to the uploaded file in Sharepoint.

 //NOTE this value is insert as title into  ele[]

<a href="../' + $(this).attr("ows_FileRef").split("#")[1]  + 
'"  onclick="ga(\'send\', \'event\', \'button\', \'download\', \'' 
+ $(this).attr("ows_FileLeafRef").split("#")[1]+ '\');">' + 
$(this).attr("ows_FileLeafRef").split("#")[1] +' </a>' ;

Finally, to populate the data returned from Sharepoint with our array previously loaded, we refer to the official documentation shown here:

• http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/

We define a function that will be invoked through the BindCalendar invoke the document.ready as shown below in the code excerpt:

function BindCalendar()
{

    var calendarioDiv = $('#calendario');
    var fullCalendar = calendarioDiv.fullCalendar({
            //inserisco parametri come array dalla ricerca;
            events: ele,
            eventRender: function (event, element) {
                         element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
            },
            eventClick: callDetail,
            error: function () {
                alert('Errore');
            },
            header: {
                left: 'month,basicWeek',
                center: 'title',
                right: 'a today prev,next'
            },
            editable: false,
            firstDay: 1,
            monthNames: ['Gennaio', 'Febbraio',
            'Marzo', 'Aprile', 'Maggio',
            'Giugno', 'Luglio', 'Agosto', 'Settembre',
            'Ottobre', 'Novembre', 'Dicembre'],
            dayNames: ['Domenica', 'Lunedi', 'Martedi',
            'Mercoledi', 'Giovedi', 'Venerdi', 'Sabato'],
            dayNamesShort: ['Dom', 'Lun', 'Mar',
            'Mer', 'Gio', 'Ven', 'Sab'],
            buttonText: {
                today: 'oggi',
                month: 'mese',
                week: 'settimana',
                day: 'giorno'
            },
            loading: function(isLoading, view) { var loadingGif= $('#loadingGif');
            if (isLoading) loadingGif.show(); else loadingGif.hide(); }
        } );
        $("#loadingGif").hide();
}

function callDetail(calEvent, jsEvent, view) { }

The function eventRender will allow us to insert HTML in our calendar through education innerHTML.
All we have to do at this point is to build the call to functions taking into account the response time. It is important to note that the Timeout function will allow us to obtain the first loading of the array object and then load it into the object calendar.

 $(document).ready(function () {
    Retrive();
             window.setTimeout("BindCalendar()",500);
});

References

• http://blog.jquery.com/2011/11/21/jquery-1-7-1-released/
• http://arshaw.com/fullcalendar/
• http://www.webdevdoor.com/jquery/cross-domain-browser-json-ajax/
• http://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx
• http://msdn.microsoft.com/en-us/library/office/ee535717(v=office.14).aspx