Introduction
The customer wants to hide calendar recurring events which are not relevant for the current day. The calendar view doesn't have options to filter the recurring days.
Background
The calendar view was displaying all the events on All Events view even the events are not valid for current day. The customer did not want to show those events to users which are not relevant for today (current day). The below code will help to hide unwanted events from calendar view.
Using the Code
The jQuery code block can be used in content editor web part on the current view. This code will first retrieve all the recurrence events using SPServices and CAML query, the CAML query can be modified based on requirement. The value of RecurrenceData will be needed to check event days and HideTableRow
function will decide if the current event has to be hidden.
The value of RecurrenceData field looks as below:
<recurrence>
<rule>
<firstDayOfWeek>su</firstDayOfWeek>
<repeat><weekly mo="TRUE" tu="TRUE"
weekFrequency="1" /></repeat>
<repeatInstances>100</repeatInstances>
</rule>
</recurrence>
The HideTableRow
method will decide if current event has to be hidden from the view and below jQuery line will hide the event based on User Name
and Purpose
field values. Any row that contains these values will be hidden from the view. This filter can be changed based on demand.
$('div#WebPartWPQ2 table.ms-listviewtable tr:(:contains("' + name + '")
&& contains("' + purpose + '"))').hide();
Below is the complete code to hide event:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.SPServices.min.js" type="text/javascript"></script>
$(document).ready(function(){
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Calender",
CAMLViewFields: "<ViewFields><FieldRef Name='Name' />
<FieldRef Name='fRecurrence' /><FieldRef Name='RecurrenceData' />
<FieldRef Name='Purpose' /></ViewFields>",
CAMLQuery: "<Query><Where><Eq><FieldRef Name='fRecurrence'
Explicit='TRUE'/><Value Type='Recurrence'>1
</Value></Eq></Where></Query>",
completefunc: function (xData, Status){
$(xData.responseXML).SPFilterNode("z:row").each(function(){
var xml = $(this).attr("ows_RecurrenceData");
var name = $(this).attr("ows_Name");
var purpose = $(this).attr("ows_Purpose");
var result = HideTableRow(xml);
if(result==true){
name = name.split('#')[1];
$('div#WebPartWPQ2 table.ms-listviewtable tr:(:contains
("' + name + '") && contains("' + purpose + '"))').hide();
}
});
}
});
});
function HideTableRow(xmlData)
{
var today=new Date();var thisDay=today.getDay();var hideRow=false;
$(xmlData).find('weekly').each(function() {
$.each(this.attributes, function(i, attrib){
var day = attrib.name;var value = attrib.value;
if(day.length==2){
if(!((thisDay==1 && day=="mo")||(thisDay==2 &&
day=="tu")||(thisDay==3 && day=="we")||
(thisDay==4 && day=="th")||(thisDay==5 && day=="fr"))){
hideRow=true;
}
else{hideRow=false;return false;}
}
});
});
return hideRow
}
Points of Interest
I found it easy to hide a table row using jQuery, the row can be hidden without writing a complex logic. :)
History
- 22nd March, 2016: Initial version