I ended up making the changes in SharePoint Designer, which allows for parameters and multiple filters based on those parameters. \u00a0Unfortunately it wasn’t as easy as adding a DateTimeControl to the view, as the DateTimeControl outputs dates in a format that’s incompatible with the list filters. \u00a0I ended up writing some Javascript to do the date conversion as well as populate the DateTimeControl with a default date of today. \u00a0Here’s how to do it:<\/p>\n
- \n
- Open SharePoint Designer
\n<\/strong><\/li>\n- Select Lists and Libraries<\/strong><\/li>\n
- Select the calendar you would like to add the filtered list to.
\n![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/1SelectLibrary-500x267.png\" "\\"1SelectLibrary\\"")
<\/li>\n- Add a new view to your list.
\n![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/2AddView-500x241.png\" "\\"2AddView\\"")
<\/a><\/li>\n- Click the view to edit it.<\/li>\n
- Put your cursor just above the list and select:
\nInsert -> SharePoint -> DateTimeControl
\n![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/3AddDateTimeControl-500x305.png\" "\\"3AddDateTimeControl\\"")
<\/a>\u00a0<\/em><\/li>\n- Modify the properties of the DateTimeControl. Set:
\nAutoPostBack = True<\/em>
\nDateOnly = True<\/em><\/li>\n- Now we have to add in some javascript to convert the output of the DateTimeControl to a format that the SharePoint filters will recognize (YYYY-MM-DD). Go to the Code view and between the <\/div> and <\/content> of the DateTimeControl add the following:<\/li>\n<\/ul>\n
\r\n<input type="hidden" name="spFilterDate" id="spFilterDate"\/>\r\n\r\n <script type="text\/javascript">\r\n function formatDateSharePoint(date)\r\n {\r\n var d = date.getDate();\r\n var m = date.getMonth()+1;\r\n var y = date.getFullYear();\r\n return '' + y +'-'+ (m<=9?'0'+m:m) +'-'+ (d<=9?'0'+d:d);\r\n }\r\n\r\nfunction formatDateSharePointView(date)\r\n {\r\n var d = date.getDate();\r\n var m = date.getMonth()+1;\r\n var y = date.getFullYear();\r\n return '' + (m<=9?'0'+m:m) +'\/'+ (d<=9?'0'+d:d) + '\/' + y;\r\n }\r\n\r\nfunction datePickerChange()\r\n {\r\n var datePicker = document.getElementById(g_strDateTimeControlIDs["DateTimeControl1"]);\r\n var date = new Date(datePicker.value);\r\n var dateField = document.getElementById("spFilterDate");\r\n dateField.value = formatDateSharePoint(date);\r\n }\r\n\r\nfunction datePickerDefault()\r\n {\r\n var datePicker = document.getElementById(g_strDateTimeControlIDs["DateTimeControl1"]);\r\n var date = new Date(datePicker.value);\r\n if (isNaN( date.getTime() ))\r\n {\r\n date = new Date();\r\n datePicker.value = formatDateSharePointView(date);\r\n __doPostBack(g_strDateTimeControlIDs["DateTimeControl1"],"");\r\n }\r\n\r\n}\r\n\r\n\/\/Call the datePickerChange on Postback, as the client side DatePickerControl events only work on IE.\r\n \/\/The only reliable way to call the function on postback seems to be to override the __doPostBack function\r\n var __originalPostBack= __doPostBack;\r\n\r\nfunction beforePostBack(eventTarget, eventArgument) {\r\n datePickerChange();\r\n __originalPostBack(eventTarget, eventArgument);\r\n }\r\n\r\n__doPostBack = beforePostBack;\r\n\r\n\/\/Default the date picker to Today, if it's not already set\r\n datePickerDefault();\r\n\r\n<\/script>\r\n<\/pre>\nSo now the code for the DateTime Control should look like:<\/p>\n
\r\n<content>\r\n <div>\r\n <SharePoint:DateTimeControl runat="server" id="DateTimeControl1" AutoPostBack="True" DateOnly="True" \/>\r\n <\/div>\r\n\r\n <input type="hidden" name="spFilterDate" id="spFilterDate"\/>\r\n\r\n <script type="text\/javascript">\r\n function formatDateSharePoint(date)\r\n {\r\n var d = date.getDate();\r\n var m = date.getMonth()+1;\r\n var y = date.getFullYear();\r\n return '' + y +'-'+ (m<=9?'0'+m:m) +'-'+ (d<=9?'0'+d:d);\r\n }\r\n\r\n...\r\n\r\n__doPostBack = beforePostBack;\r\n\r\n\/\/Default the date picker to Today, if it's not already set\r\n datePickerDefault();\r\n\r\n<\/script>\r\n\r\n<\/content>\r\n<\/pre>\nSo what we’ve done is made it so that every time the DateTimeControl is changed, a hidden field is updated with the date in a format that’s valid for the list filter. \u00a0Now we need to read that value into a parameter and filter the list based on that parameter:<\/p>\n
- \n
- Go back to design view, select and list and choose Options -> Parameters<\/em>.<\/li>\n
- Create a new parameter – we’ll call it DateFilter<\/strong>. Set the Source to ‘Form<\/strong>‘ and the Form Field to ‘spFilterDate<\/strong>‘ which is the name of our hidden field.
\n![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/5AddParameter-500x337.png\" "\\"5AddParameter\\"")
<\/a><\/li>\n- Now click on Options -> Filter and create two filters:
\nStartTime Less Than or Equal To DateFilter And<\/em>
\n EndTime Greater Than or Equal To DateFilter
\n![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/6AddFilters.png\" "\\"6AddFilters\\"")
<\/a><\/em><\/li>\n- Save the view.<\/li>\n<\/ul>\n
You can now use this view in SharePoint to filter the calendar to items that occur on a specific date.<\/p>\n
- Create a new parameter – we’ll call it DateFilter<\/strong>. Set the Source to ‘Form<\/strong>‘ and the Form Field to ‘spFilterDate<\/strong>‘ which is the name of our hidden field.
- Select Lists and Libraries<\/strong><\/li>\n
![\"\"](\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2012\/11\/7ViewList-500x387.png\" "\\"7ViewList\\"")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"