Calendar Web Part Version 1.52

ArtfulBits Calendar Web Part provides with three key benefits:

• Multisource support. Calendar Web Part combines events from different Microsoft® SharePoint® Lists, from any SharePoint Site, in one Calendar view.
• Using different colors for events. Calendar Web Part allows specifying different color sets for events type of your need or use default one.
• On-the-Fly AJAX-enabled features, including adding, editing, dragging, resizing and deleting events in Microsoft® Outlook® 2007 like style.

Additionally Web Part uses AJAX functionality for calendar standard commands, such as Expand All, Collapse All, change calendar view, data navigation, etc. Another Calendar Web Part nice advantage is supporting all SharePoint standard themes.

ArtfulBits Calendar Web Part is user friendly and has simple interface (as standard SharePoint calendar), allowing users to easily create new calendar events with a single click! Editing features make working with SharePoint easy and pleasant. To change the date of an event, you simply drag and drop it to the appropriate calendar cell. To change the event time frame, simply resize the event to the correct duration of the event. Useful addition is the customizable extended tooltip, that allows to track selected event's properties.

Feature List

Feature
Aggregating events from multiple SharePoint lists, from any site, in one Calendar view
Supporting any SharePoint list type (not only Calendar list) on any location
Binding to SQL, Oracle
On-the-Fly events dragging, resizing, editing
Adding and deleting events with a single click
AJAX support
Color customization for source lists events(Background color, Text color)
Event coloring accordingly to event column values
ArtfulBits Category Column integration
User permissions for Calendar sources
Calendar sources filtering by query parameters
Programmatic Calendar source filtering by client-side scripts
Customizable extended tooltip
Hour split count (for more precision event displaying)
Customizable time display format for calendar events (None, Start Time, Start & End Time)
Quick date navigation (using cross-browser Date & Time picker)
Ability to switch between "Work Week" and "Full Week" on calendar's weekly view
Ability to expand events by default on calendar's monthly view
List view toolbar
Cross-browser support (IE6+, Mozilla Firefox, Google Chrome, Safari)
SharePoint standard themes support
Language pack support (desired localization could be added by request)

Why ArtfulBits Calendar Web Part?

ArtfulBits Calendar Web Part can be used instead of built-in SharePoint Calendar. It provides with powerful capabilities for much convenient events manipulation.

How to Use

ArtfulBits Calendar Web Part can show items from simple list in Calendar view or combine items from several SharePoint lists. The list of any type is supported and it could be placed into any site within current site collection. Applying of filtering using list view is supported as well.

On Calendar Settings panel, you can add new Calendar to Calendar view or edit existing Calendars. You can also specify other Calendar settings:

• Default Scope determines in which mode Calendar will be displayed by default (Day, Week or Month)
• To allow on-fly adding of items directly from calendar interface, check Allow add items on-fly and specify Calendar, for which items will be added
• On-fly items editing, dragging, resizing or deleting could be suppressed by specifying appropriate properties in Calendar Settings panel
• Showing of list view Toolbar on the top of Calendar Web Part could be enabled by choosing List View Toolbar option
• Use Time Interval option to change time interval from default 30 minutes according to your needs (1 hour, 30, 20, 15, 10 or 5 minutes). Interval is applied to the daily and weekly calendar views
• Time Format section allows to customize time display format of calendar non all day events. By default it shows start time in all calendar views (daily/weekly/monthly). You can customize events time format separately in each view. Possible values are None, Start Time, Start & End Time
• Work Week allows showing "Work Week" and "Full Week" options to switch between work and full week on calendar's weekly view

How to replace standard SharePoint Calendar with ArtfulBits Calendar?

To replace allexisting Calendar views in Calendar list, click Enable ArtfulBits Calendar features action on the following page: List Settings > General Settings > Enable ArtfulBits Calendar features.
NOTE: This feature is available only for SharePoint 2007.

How to create new List View with ArtfulBits Calendar?

To add new List View with ArtfulBits Calendar Web Part, do the following:

1. Create standard SharePoint Calendar View for existing list
2. Close or hide Standard Calendar (click Hidden checkbox on Layout panel of Standard Calendar editor)
   NOTE: Do not delete standard calendar, just hide it!
3. Add ArtfulBits Calendar Web Part on page
4. Add current list view to Calendars (click on New Calendar link in Calendar Web Part editor and specify appropriate settings)
5. You can allow items adding directly from calendar interface by checking Allow add items on-fly checkbox and choose newly added Calendar.
6. Set Toolbar Type to List View Toolbar for showing standard SharePoint List toolbar.

How to customize events tooltip?

ArtfulBits Calendar provides with two tooltip modes: Simple and Extended. You can specify tooltip mode on adding or editing calendar.

To show single column in tooltip, set Tooltip to Simple and choose a column from drop down list. This column value will be displaying in tooltip.

To show data from more than one column as it is shown on the image below, do the following:

1. Add standard SharePoint calculated column to this list to combine values from multiple lists. To display data in "{Start Time} - {End Time} {Title}" format, set formula:
   
   

   12-hour format

   =IF(
       HOUR([Start Time])=0,12,
       IF(
          HOUR([Start Time])>12,
          HOUR([Start Time])-12,
          HOUR([Start Time])
         )
      )
   &":"
   &TEXT(MINUTE([Start Time]),"00")
   &IF(
       HOUR([Start Time])<12,"AM","PM"
      )
   &"-"
   &IF(
       HOUR([Start Time])=0,12,
       IF(
          HOUR([End Time])>12,
          HOUR([End Time])-12,
          HOUR([End Time])
         )
      )
   &":"
   &TEXT(MINUTE([End Time]),"00")
   &IF(
       HOUR([End Time])<12,
       "AM",
       "PM"
      )
   &" "
   &Title
   

   
   

   24-hour format

   =TEXT([Start Time],"hh:mm")
   &" - "
   &TEXT([End Time],"hh:mm")
   &" "
   &Title
   

2. On calendar's edit page set Tooltip to Simple and choose calculated column from drop down list.

Extended tooltip shows calendar events data on table view. Set Tooltip to Extended and add columns from "available columns:" to "Show in tooltip:" section. Use buttons Up/Down to change columns orders in tooltip.

Calendar Event Coloring

ArtfulBits Calendar Web Part provides three ways to customize background and text color for calendar events:

1. You can set a static color for all calendar events of each calendar source

2. You can specify color accordingly to event column values by using SharePoint Choice or Calculated columns for source list. Check "Use dynamic generated color" and choose a column from dropdown list on the calendar picker page.

   You can add Choice column with set of color names (for e.g. Red, Yellow, Blue, Green, etc.) to the list and get value from this column for calendar source.

   Following sample shows how to add color for events using SharePoint Calculated column:

   • Add SharePoint Calculated column to the SharePoint List
   • Specify SharePoint calculated formula to return HTML color accordingly to the list item values. The following formula returns color according to Tasks list item Priority column value:
     
     =IF([Priority]="(1) High","red",IF([Priority]="(2) Normal","orange","green"))
   • In Calendar source picker dialog check "Use dynamic generated color" for Background Color setting and choice Calculated column from dropdown list

   Note: You can specify Text Color for calendar events too as shown above.

3. ArtfulBits Calendar Web Part supports ArtfulBits Category column integration like as in Outlook 2007. Calendar events color will be automatically get from Category column value.
   For more information regarding Category column please visit ArtfulBits Category Column page.

This example list contains ArtfulBits Category column (Color Category) for events background color and Calculated column (Text Color) with formula:

=IF(ColorCategory="Dark Blue","white",IF(ColorCategory="Dark Red","pink",""))

Calendar Sources Filtering

ArtfulBits Calendar Web Part provides two ways to filter calendar sources:

1. Filtering by query parameters.
   

   You can use CalendarFilter query parameter to filter Calendar sources.

   For Example, if you have five Calendar sources in the following order: calendar1, calendar2, calwendar3, calendar4, calendar5, then to hide calendar2 and calendar5 set the CalendarFilter query parameter value to 10110. Full URL is like below:

   http://servername/site1/calendar.aspx?CalendarFilter=10110

   0 at i^th position hides i^th Calendar source, 1 – shows, so we have binary logic in place.

2. Programmatic filtering by client-side scripts.

   You can use the following client-side script functions to filter Calendar sources:

   • Calendar_Show(index) – shows Calendar source at the specific index in the collection.
   • Calendar_Hide(index) – hides Calendar source at the specific index in the collection.
   • CalendarFilter_Get(index) – determines whether Calendar source by the specific index is shown (true if Calendar source is shown; otherwise, false).

   In the following sample Content Editor Web Part is added to the page with HTML putting 5 checkboxes into the page and script filtering Calendar sources. Content Editor Web Part HTML is the following:

<input id="filter0" type="checkbox" checked="checked"
 onclick="this.checked?CalendarFilter_Show(0):CalendarFilter_Hide(0)"
 /> Calendar 1<br/>
<input id="filter1" type="checkbox" checked="checked"
 onclick="this.checked?CalendarFilter_Show(1):CalendarFilter_Hide(1)"
 /> Calendar 2<br/>
<input id="filter2" type="checkbox" checked="checked"
 onclick="this.checked?CalendarFilter_Show(2):CalendarFilter_Hide(2)"
 /> Calendar 3<br/>
<input id="filter3" type="checkbox" checked="checked"
 onclick="this.checked?CalendarFilter_Show(3):CalendarFilter_Hide(3)"
 /> Calendar 4<br/>
<input id="filter4" type="checkbox" checked="checked"
 onclick="this.checked?CalendarFilter_Show(4):CalendarFilter_Hide(4)"
 /> Calendar 5<br/>

<script type="text/javascript">
//Updates checkboxes values on page load
function InitElements(){
  document.getElementById("filter0").checked = CalendarFilter_Get(0);
  document.getElementById("filter1").checked = CalendarFilter_Get(1);
  document.getElementById("filter2").checked = CalendarFilter_Get(2);
  document.getElementById("filter3").checked = CalendarFilter_Get(3);
  document.getElementById("filter4").checked = CalendarFilter_Get(4);
}
_spBodyOnLoadFunctionNames.push("InitElements");
</script>