JQuery Datatable and SharePoint Services to Build Dynamic Grid for Event Calendar

SPServices are more flexible with Jquery plug in. Here you can show your recent calendar events in grid with sorting and paging.

//Proceed class is used for button style
< style type = "text/css" >
    body {
        font: 90 % /1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
background-color: ‪#‎ fff‬;
    }


div.container {
    min - width: 980 px;
    margin: 0 auto;
}

.ProceedClass {
    -moz - box - shadow: 0 px 1 px 0 px 0 px‪#‎ DCDCDC‬; - webkit - box - shadow: 0 px 1 px 0 px 0 px# DCDCDC;
    box - shadow: 0 px 1 px 0 px 0 px# DCDCDC;
    background: -webkit - gradient(linear, left top, left bottom, color - stop(0.05, #DCDCDC), color - stop(1, #DCDCDC));
    background: -moz - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
    background: -webkit - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
    background: -o - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
    background: -ms - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
    background: linear - gradient(to bottom, #DCDCDC 5 % , #DCDCDC 100 % );
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#DCDCDC', endColorstr = '#DCDCDC', GradientType = 0);
    background - color: #DCDCDC; - moz - border - radius: 6 px; - webkit - border - radius: 6 px;
    border - radius: 6 px;
    border: 1 px solid# DCDCDC;
    display: inline - block;
    cursor: pointer;
    color: #DCDCDC;
    font - family: arial;
    font - size: 15 px;
    font - weight: bold;
    padding: 6 px 24 px;
    text - decoration: none;
    text - shadow: 0 px 1 px 0 px# DCDCDC;
}
.ProceedClass: hover {
        background: -webkit - gradient(linear, left top, left bottom, color - stop(0.05, #DCDCDC), color - stop(1, #DCDCDC));
        background: -moz - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
        background: -webkit - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
        background: -o - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
        background: -ms - linear - gradient(top, #DCDCDC 5 % , #DCDCDC 100 % );
        background: linear - gradient(to bottom, #DCDCDC 5 % , #DCDCDC 100 % );
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#DCDCDC', endColorstr = '#DCDCDC', GradientType = 0);
        background - color: #DCDCDC;
    }
    .ProceedClass: active {
        position: relative;
        top: 1 px;
    }


< /style><link rel="stylesheet" type="text/css
" href=" / SiteAssets / jquery.dataTables.css "/><style type="
text / css " class="
init "></style><script type="
text / javascript " src=" / SiteAssets / jquery - 1.10.2. min.js "></script><script type="
text / javascript " src=" / SiteAssets / jquery.dataTables.js "></script><script type="
text / javascript " src=" / SiteAssets / jquery.SPServices - 0.7.2. min.js "></script><script type="
text / javascript ">


$(document).ready(function() {

    var vTitle;
    var vEventdate;
    var vEnddate;
    var vLocation;
    var vID;


    $().SPServices({
        debug: true,
        operation: "GetListItems",
        async: false,
        webURL: 'http://localhost/',
        listName: "Calendar",
        CAMLQuery: "<Query><Where></Where></Query>",

        completefunc: function(xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var row = $("<tr>");

                vTitle = $(this).attr("ows_Title");
                vEventdate = $(this).attr("ows_EventDate");
                vEnddate = $(this).attr("ows_EndDate");
                vLocation = $(this).attr("ows_Location");
                vID = $(this).attr("ows_ID");
                vID = vID.replace(",", "");
                var str = "<a href='http://localhost/Lists/Calendar/DispForm.aspx?ID=" + vID + "'>" + vTitle + "</a><br/>Start Time:" + vEventdate + "<br/>End Time:" + vEnddate + "<br/>Location:" + vLocation;
                row.append($("<td>").html(str));

                $("#EventCalendar").append(row);
            });
        }
    });

    var table = $('#EventCalendar').DataTable();


    // Setup - add a text input to each footer cell
    $('#EventCalendar tfoot th').each(function() {
        var title = $('#EventCalendar thead th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    // DataTable


    // Apply the filter
    $("#EventCalendar tfoot input").on('keyup change', function() {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

});


< /script> < center >
    < /center> < br / >
    < br / >
    < br / > ? ? ?
    < table id = "EventCalendar"
class = "display"
width = "500px"
border = "1" >
    < thead >
    < tr >
    < th > Events < a href = "/Lists/Calendar/calendar.aspx" > Calendar View < /a></th >
    < /tr> < /thead> < tfoot >
    < tr >
    < th > Events < /th> < /tr> < /tfoot> < tbody > ? < /tbody>  < /table>