i using jquery's full calendar sharepoint calendar list. want filter events multiple checkbox selection. want filter events based on rooms selected in checkboxes.
for using following script.
script :
<link rel="stylesheet" type="text/css" href="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/fullcalendar.css" /> <link rel="stylesheet" type="text/css" href="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/jquery-ui-1.8.16.custom.css" /> <script type="text/javascript" src="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/jquery-2.1.4.js"></script> <script type="text/javascript" src="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/jquery-ui-1.8.16.custom.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.spservices/0.7.1a/jquery.spservices-0.7.1a.min.js"></script> <script type="text/javascript" src="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/moment.min.js"></script> <script type="text/javascript" src="http://bisp2013-04:1000/sites/exercise2/style%20library/fullcalendar/fullcalendar.js"></script> <script type=text/javascript"> </script> <script type="text/javascript"> // format utc dates local date/time strings. var rooms = []; var selectedrooms = []; var events = []; var filteredsource = []; var roomselection = []; var date = new date(); function closedialog(result) { sp.ui.modaldialog.refreshpage(result); } function formatdatetolocal( date ) { var dateutc; if ( typeof date === "string" ) { // convert utc string 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 not valid string or date object." ); } // create local date strings utc date object var year = "" + dateutc.getfullyear(); var month = "" + ( dateutc.getmonth() + 1 ); // add 1 month because months zero-indexed. var day = "" + dateutc.getdate(); var hour = "" + dateutc.gethours(); var minute = "" + dateutc.getminutes(); var second = "" + dateutc.getseconds(); // add leading zeros single-digit months, days, hours, minutes, , 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; } $(document).ready( function() { $().spservices({ operation: "getlistitems", async: false, listname: "training rooms", completefunc: function (xdata, status) { if(status == 'success' ) { $(xdata.responsexml).spfilternode("z:row").each(function() { var value= $(this).attr("ows_id"); var text = $(this).attr("ows_title"); var roomcolor = $(this).attr("ows_bifctpeventcolor") rooms.push({ title: text, id: value, color: roomcolor }); $("#filterbox").append ( "<input id='chk_" + value + "' type='checkbox' value='" + value + "' style='background:"+roomcolor+"' onchange='filtercalendar(" + value + ",this)'/><label for='chk_" + value + "'>" + text + "</label>" ); }); } } }); $( '#calendar' ).fullcalendar({ // assign buttons header of calendar. see fullcalendar documentation details. header: { left:'prev,next today', center: 'title', right: 'month, agendaweek, agendaday' }, dayclick: function (date, jsevent, view) { var = new date(); if (date.sethours(0,0,0,0) < now.sethours(0,0,0,0)) { alert('you can not add event on date'); } else { var siteurl = window.location.protocol + "//" + window.location.host + _sppagecontextinfo.siteserverrelativeurl; var mylinksurl = siteurl + "/lists/roomreservation/newform.aspx"; var options = { url: mylinksurl, title: "room reservation", dialogreturnvaluecallback: closedialog }; sp.sod.execute('sp.ui.dialog.js', 'sp.ui.modaldialog.showmodaldialog', options); } }, defaultview: "month", // set default view month /* when user select timeslot option code execute. has 3 arguments. start,end , allday. start means starting time of event. end means ending time of event. allday means if events entire day or not. */ selectable: true, selecthelper: true, select: function(start, end, allday) { if(start < date) { // whatever want here. alert('cannot select dates.'); return; } var title = prompt('event title:'); if (title) { $( '#calendar' ).fullcalendar('renderevent', { title: title, start: start, end: end, allday: allday }, true // make event "stick" ); } $( '#calendar' ).fullcalendar('unselect'); }, editable: true, // add events calendar. events: function( start, end, callback ) { // create array hold events. events = []; // set date pull events based on first visible day in current calendar view. month view, several days previous month. can use fullcalendar's built-in getview method along formatdate utility function create date string in format sharepoint requires. must in format yyyy-mm-ddthh:mm:ssz. due time zone differences, omit after day. var startdate = moment().format($('#calendar').fullcalendar('getview').intervalstart, "u").split("t")[0]; // current view of calendar (agendaweek, agendaday, month, etc.). set camlview appropriate value pass web service. way retrieve events needed current view (e.g. agendaweek view retrieve events during current week rather getting events current month). var calview = $( '#calendar' ).fullcalendar( 'getview' ).title; var camlview = ""; switch( calview ) { case "agendaweek": camlview = "<week />"; break; case "agendaday": camlview = "<week />"; break; default: // default month view camlview = "<month />"; } // set camlfields, camlquery, , camloptions appropriate values pass web service. can add additional <viewfields /> or adjust caml query if have custom columns want filter or display data from. values below pretty minimum you'll want start 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' /></viewfields>"; var camlquery = "<query><where><and><geq><fieldref name='eventdate' /><value includetimevalue='true' type='datetime'>"+moment(start).toisostring()+"</value></geq><leq><fieldref name='enddate' /><value includetimevalue='true' type='datetime'>"+moment(end).toisostring()+"</value></leq></and></where></query>"; var camloptions = "<queryoptions><calendardate>" + startdate + "</calendardate><recurrencepatternxmlversion>v3</recurrencepatternxmlversion><expandrecurrence>true</expandrecurrence><dateinutc>true</dateinutc></queryoptions>"; // make web service call retrieve events. $().spservices({ operation: "getlistitems", async: false, listname: "room reservation", // change guid or display name of calendar. if calendar on different site, can use display name weburl option (see spservices.codeplex.com more information). camlviewfields: camlfields, camlquery: camlquery, camlqueryoptions: camloptions, completefunc: function( xdata, status ) { $( xdata.responsexml ).find( "z\\:row, row" ).each( function() { // check day events var fade = $( ).attr( 'ows_falldayevent' ); var thisade = false; var thisstart; var thisend; if ( typeof fade !== "undefined" && fade !== "0" ) { thisade = true; // start , end date/time of event. fullcalendar parse date strings in local time automagically, , don't need local time conversions day events, can use utc date strings sharepoint without converting them local time. var thisstart = $( ).attr( 'ows_eventdate' ); var thisend = $( ).attr( 'ows_enddate' ); } else { // start , end date/time of event. fullcalendar parse date strings in local time automagically, need convert utc date strings sharepoint local time. formatdatetolocal() function above take care of this. see comments in function more information. var thisstart = formatdatetolocal( $( ).attr( 'ows_eventdate' ) ); var thisend = formatdatetolocal( $( ).attr( 'ows_enddate' ) ); } // list item id , recurrence date if present. used generate id query string parameter link event (or specific instance of recurring event). id query string parameter must in format "id.0.yyyy-mm-ddthh:mm:ssz" recurring events (where "id" list item id event). event id's returned number (for non-recurring events) or several numbers separated ";#" in 2007 or "." in 2010 indicate individual instances of recurring events. splitting , joining id way, thisid set valid query string parameter whether event recurring or not both versions of sharepoint. var thisid = $( ).attr( 'ows_id' ).split( ';#' ).join( '.' ); var thisroom = $(this).attr('ows_bifctptrainingroom').split(';#')[0]; // fullcalendar documentation specifies recurring events should have same id value when building events array (the id optional, i'm including completeness). can list item id (which same instances of recurring events) without recurrence information splitting thisid. var eventid = thisid.split( '.' )[0]; // event title. displayed on calendar along start time of event. var thistitle = $( ).attr( 'ows_title' ); // event description. don't use in example, use something, perhaps tooltip when hovering on event. var thisdesc = $( ).attr( 'ows_description' ); // add event information events array fullcalendar can display it. events.push({ title: thistitle, id: eventid, start: thisstart, end: thisend, allday: thisade, room:thisroom, // adjust url link display form calendar events. can include source parameter allow users return fullcalendar page. url: _sppagecontextinfo.siteabsoluteurl + '/lists/roomreservation/dispform.aspx?id=' + thisid + '&source=' + window.location, description: 'check calendar events' }); }); callback( events ); } }); }, eventrender: function eventrender( event, element, view ) { var isfound = false; var backgroundcolor = ""; (var roomid in rooms) { var currentroom = rooms[roomid]; if (currentroom.id == event.room) { backgroundcolor = currentroom.color; element.find(".fc-event-time").html(event.start.format("hh:mm") + "-" + event.end.format("hh:mm")); element.find(".fc-title").parent().attr("title", event.title); element.css('color','black'); element.find('.fc-event-skin').css('background-color', backgroundcolor); element.css('background-color', backgroundcolor); isfound = true; break; } } return isfound; } }); }) </script> <style type="text/css"> #calendar { width: 900px; margin: 0 auto; } </style> <div id="filterbox"> </div> <div id="calendar"> <!-- calendar added here --> </div><!-- #calendar --> this how screen looks @ present: 
what want on change event of each of checkbox. want filter calendar events , show events selected rooms.
you need use event source, can split events in different sources (rooms in case).
then, can show / hide events add event source , remove event source.
so code like:
$('#calendar').fullcalendar({ // put options , callbacks here eventsources: [source1, source2] }) and bound checkbox:
$('#calendar').fullcalendar( 'addeventsource', source1 ); //show $('#calendar').fullcalendar( 'removeeventsource', source1 ); //hide i did a plunker can reproduce it.
Comments
Post a Comment