Click here to Skip to main content
15,394,479 members
Articles / Web Development / HTML
Posted 16 Jun 2014


3 bookmarked

Sharepoint FullCalendar jquery View

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
16 Jun 2014CPOL3 min read
A simple way to create a Calendar View for Sharepoint Custom Library in aspx Page created in Sharepoint Designer 2010

FullCalendar jquery


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:

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.


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.

sharepoint designer create page

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.

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin: *

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>


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=''> \
             <GetListItems xmlns=''> \
                 <listName>My Collection Name Sharepoint</listName> \
                 <viewFields> \
                     <ViewFields> \
                         <FieldRef Name='Nome' /> \
                          <FieldRef Name='FileRef' /> \
                         <FieldRef Name='Date_x0020_meeting' /> \
                     </ViewFields> \
                 </viewFields> \
             </GetListItems> \
         </soapenv:Body> \

    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] ={
                start  :  $(this).attr("ows_Date_x0020_meeting")

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:

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) {
            eventClick: callDetail,
            error: function () {
            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); else 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 () {



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Vincenzo Malvone
Italy Italy
Vincenzo Malvone
ICT Engineer System Analyst - Solution Developer .NET

Comments and Discussions

QuestionLoading large lists?, Awesome blog Pin
Member 1139261121-Jan-15 11:18
MemberMember 1139261121-Jan-15 11:18 
AnswerRe: Loading large lists?, Awesome blog Pin
Member 1139261122-Jan-15 4:55
MemberMember 1139261122-Jan-15 4:55 
AnswerRe: Loading large lists?, Awesome blog Pin
Vincenzo Malvone7-Feb-15 1:17
MemberVincenzo Malvone7-Feb-15 1:17 
GeneralMy vote of 5 Pin
Lydia Gabriella16-Jul-14 10:56
MemberLydia Gabriella16-Jul-14 10:56 
GeneralRe: My vote of 5 Pin
Vincenzo Malvone16-Jul-14 21:09
MemberVincenzo Malvone16-Jul-14 21:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.