Filter Calender View WebPart with Month and Year for Easy Navigation

In SharePoint, calender view doest not have scope for year-wise navigation. To fix this use the following code in your content editor webpart as per your requirement

CODE 

function getSelectedValue()
{

var valYear = document.getElementById(“YearDropDown”).value;

var valMonth = document.getElementById(“MonthDropDown”).value;

var valFinalValue = valMonth+”\u002f01\u002f”+valYear;

MoveToDate(valFinalValue ,’WPQ2′);

// Here MoveToDate is a microsoft defined java script function. WPQ2 is your calender view webpart ID

}
</script>

<select name=”Month” id=”MonthDropDown”>

<option value=”1″>Jan</option>

<option value=”2″>Feb</option>

<option value=”3″>Mar</option>

<option value=”4″>Apr</option>

<option value=”5″>May</option>

<option value=”6″>Jun</option>

<option value=”7″>Jul</option>

<option value=”8″>Aug</option>

<option value=”9″>Sep</option>

<option value=”10″>Oct</option>

<option value=”11″>Nov</option>

<option value=”12″>Dec</option>

</select>

<select name=”Year” id=”YearDropDown”>

<option value=”2008″>2008</option>

<option value=”2009″>2009</option>

<option value=”2010″>2010</option>

<option value=”2011″>2011</option>

<option value=”2012″>2012</option>

</select>

<input onclick=”getSelectedValue();” type=”button” value=”Go”/>

Happy SharePointing 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.