How to Filter Calendar Plus

UPDATE: With the release of version 4.0, Calendar Plus Web Part now provides the capability to display up to 10 SharePoint Lists and Libraries in a single instance of Calendar Plus Web Part of any list or library type.  This provides users flexibility to aggregate multiple sources of information into a single view.  Since the list and/or library types are different, Calendar Plus Web Part is unable to retrieve a standard schema across all included lists and libraries, resulting in a limitation with Web Part Connections.  If Calendar Plus Web Part is connected directly to SharePoint Lists and Libraries, the Web Part Connection configuration screen only provides the Calendar Plus attributes Title, Start Date and End Date.  We greatly apologize for this inconvenience.  Although when Calendar Plus Web Part is connected directly to a SharePoint List or Library, Web Part Connections is limited to only 3 attributes, the other 3 connection modes are not limited, and display the full list of columns since there is a single connection schema Calendar Plus Web Part can consume.  As a result, a potential workaround is to instead of connecting Calendar Plus Web Part directly to a SharePoint List or Library, create a Bamboo List Rollup view and include the SharePoint List or Library in that view, then display that rollup in Calendar Plus Web Part. 

Are you, like me and thousands of other users, a huge fan of Bamboo's Calendar Plus Web Part?  It's a fantastic product, isn't it?  

Calendar Plus provides the ability to: color-code based on a specific choice value; show different calendar views of a list or library; define the display column in the calendar, and define additional columns to be displayed as tool tips; connect to different sources, such as Lists, Libraries, SQL Table/View, and our List Rollup Web Part; and many, many more features.

However, there has been one request that takes a little more ingenuity to accomplish.  It has been a request to provide the ability of "real-time" filtering to their end users.  The "real-time" filtering is a drop down menu that allows users to select a specific value and as a result, only items that match that selection will be displayed.  Luckily our product has the ability to consume filters from other sources using an out-of-box feature called Web Part Connections.

Web Part Connections creates a link between two Web Parts, allowing them to pass or receive information from each other.  In this article, I will be providing you with 2 methods of how to pass filters into Calendar Plus Web Part using Web Part Connections.

Creating a custom list with the filtered values

The first option I am going to discuss is using a custom list to provide the filter values to Calendar Plus Web Part.  A visual example is below

In the above example, you will notice on the right side of the screen is Calendar Plus Web Part configured to an Event list.  On the left side of the screen is a custom list that has 5 items related to Event Types.  Each of these Event Types relates to a choice column in the Events list called Calendar Type.  When a user selects a specific Event Type by clicking a radio button, the Calendar Plus Web Part will then filter automatically to display only Events that match that Event Type.  In our example, only Daisy A - Vacation matches the Event Type Vacation.  Here are the steps to achieve this -

1. Decide which columns you want to filter on.  You can filter on more than one column but in our example we will be using only one column filtering.
2. Create a custom list in the same site as Calendar Plus Web Part.
3. Relabel the column Title of the custom list to a more descriptive label as it will be shown to the end user as Event Types is shown above.
4. Go to the page where Calendar Plus Web Part is deployed, and add the custom list you created to the page.
5. Modify the list view Web Part as desired.
6. When the list view Web Part is ready, click on the drop down arrow to display the Web Part edit menu of the list view Web Part while in Edit Page mode, select Connections -> Provide Row To -> Bamboo Calendar Plus Web Part
   
   
7. A pop-up window will appear that will allow you to configure the connection.  The first window allows you to select the column from the list view Web Part that users would filter Calendar Plus Web Part on.
   
   
8. When you click Next, a similar window will appear with all the columns that is consumed by Calendar Plus Web Part, here you would select the column that the list view Web Part would map to, in this example, Event Types maps  to Calendar Type.
   
   
9. When you click Finish or Next the screen will refresh and radio buttons will appear next to the the values in the list view Web Part.

You have successfully created a connection between a list view Web Part and Calendar Plus Web Part.

Creating a Form Web Part to filter Calendar Plus Web Part

Using a list view Web Part has its advantages, for example, anyone can maintain the list of options in the custom list, however, most users are used to a drop down interface.  Luckily SharePoint out-of-the-box offers a Web Part in both WSS v3 and MOSS 2007 called Form Web Part.  Think of Form Web Part is like the Content Editor Web Part where it is a self contained, independent Web Part.

The Form Web Part offers 5 interface types

• Text Box - Similar to Single Line of Text input box in Edit and New form, user can enter a value then click Go to invoke the request.
  
  A sample snipet of the code is as follows:
  <div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="text" name="T1"/><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
  
  Where input type="text" defines that the Web Part displays a single line text field and name="T1" is the label used for Web Part Connection.  The code surrounding the these entries that is in blue controls the submit button Go.
  
• Text Area - Similar to Multiple Lines of Text control in the Edit and New forms, users can enter text then click Go.
  
  A sample snipet of the code is as follows:
  <div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><textarea rows="2" cols="20" name="T1"></textarea><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
  
  Where textarea defines that the Web Part is to display a text box similar to multiline text field, rows= defines how high the text field is, and cols= defines how wide the text field should be.  The name= is the label used for Web Part connections.  Similar to Text Box control, the surrounding blue text controls the Go button.
  
• Check Box -  Similar to Yes/No control in the Edit and New forms.
  
  A sample snipet of the code is as follows:
  <div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="checkbox" name="C1" value="Vacation" Checked>Vacation?</br><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
  
  Where input type="checkbox" defines that the Web Part is to display a checkbox control, name= is the label used for Web Part Connection, and value= is the value passed to the Calendar Plus Web Part if the checkbox is checked.  The final attribute Checked, defines if the check box is checked by default, if the attribute says Unchecked then the check box is cleared by default.
  
• Option Box - Similar to radio button option with Choice field in the New and Edit forms.
  
  A sample snipet of the code is as follows:
  <div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><input type="radio" value="Trade Show" name="R1">Trade Show</br><input type="radio" value="Vacation" name="R1" >Vacation</br><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
  
  Where input type="radio" defines the Web Part to display a radio button control, value= is the value passed to the connected Calendar Plus Web Part if selected, and name= is the name of the control.  If you have multiple radio button options, use the same name= value.
  
• Drop-down/List Box - This option is special as it covers 2 different kinds of controls, one is a drop down menu shown on the left and a list box shown on the right.
   
  A sample snipet of the code is as follows:
  <div onkeydown="BLOCKED SCRIPTif (event.keyCode == 13) _SFSUBMIT_"><select size="2" name="D1"><option value="Trade Show">Trade Show</option><option value="Vacation">Vacation</option></select><input type="button" value="Go" onclick="BLOCKED SCRIPT_SFSUBMIT_"/></div>
  
  Where <select ... </select> defines the Web Part to use a select option control, name= is the name of the control used for Web Part Connections, and  size= defines how high the box should be, if 1 the Web Part displays a drop down, if greater than 1, that defines how many lines in the list box to display, if there are more options than lines, then the Web Part displays a scroll bar.  <option value=""></option> each individual option that is displayed to the user in the drop down or list box control.

After successfully configuring the Form Web Part as desired, follow the steps 6 - 9 in the above section Creating a custom list with the filtered values to connect the new Form Web Part to Calendar Plus Web Part, where on the first step instead of selecting a column, you are selecting the control name (i.e. name=).

If you have any questions about filtering Calendar Plus, please visit the Calendar Plus forum.

(This article originally appeared, in slightly different form, in The Bamboo Team Blog.)