How to Configure Mini Calendar Web Part

How to Configure Mini Calendar Web Part

Mini-Calendar can link items in a SharePoint list, List Rollup, or Business Connectivity Service (BCS) data source to a compact calendar view.

Before you can use Mini-Calendar, you need to add it to a SharePoint wiki page using the instructions here.

NOTE: If you are adding the web part to a web part page, follow the instruction here.

To configure Mini-Calendar to display SharePoint list items, modify the web part properties and configure the required data source settings and configuration options as described in the topics linked below. Without configuration, Mini-Calendar displays dates like a standard out-of-the-box SharePoint calendar.

Click the links below for details about configuring Mini-Calendar settings.

Highlights of Mini Calendar

Highlights of Mini Calendar

MiniCalendar.pngThis small calendar fits right next to your SharePoint list and allows you to easily filter and highlight important items by date, saving you valuable time by letting you quickly access your events or tasks. By connecting Mini-Calendar to your standard SharePoint list, you can quickly select and view active items for a specified date on a calendar.

Widely used for collaboration, one of SharePoint’s main attractions is the ability to quickly build a shared information database through the use of lists. A list in a website based on Microsoft Windows SharePoint Services is a collection of information that you share with team members. SharePoint sites include a set of built-in lists, such as Announcements, Events, Tasks, Issues, etc. You can immediately fill them with items pertinent to your team. You can use the lists that come with your site “as is,” you can base them on the designs used for the built-in lists, or you can create custom lists from scratch. If a list includes a date field, our Mini-Calendar allows you to quickly attach a small calendar view.

Display SharePoint List Items using Mini Calendar

Display SharePoint List Items using Mini Calendar

hW22_2010_DefaultMini-Cal.jpgMini-Calendar shown here has been configured to display SharePoint list items from a Tasks list.

If an item exists on a date, that date will be bolded in Mini-Calendar. Hover over the bolded date to display a tooltip list of items for that date. To view the details for an item, click on it in the tooltip list.

CSS for Mini Calendar

CSS for Mini Calendar

You can customize the way Mini-Calendar looks by changing the default CSS. To edit the style sheet, edit the web part setting, select Custom CSS in the Select Style Sheet section, and click Edit.

HW22_2010_EditCSS.jpg

The default CSS classes for the Mini-Calendar Web Part are provided below for reference:

 .bb-cal-today 
 {
 background-color: #fcc252;
 padding-top:7px !important;
 }
 .CalendarHeader-g_d0915a6b_6dde_4464_9903_e2214a603c36
 {
 background-color:#F2F8FF;
 font-family: verdana;
 font-size: .68em; 
 text-decoration: none;
 color: #000000; 
 }
 .currentDay-     Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
 {
 background-color:#FEFEFE;
 border-right: 1px solid black; 
 font-weight:normal;
 font-family: verdana;
 text-decoration: none;
 padding-top:0px !important;
 }
 .currentDayOfMonth-     Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
 {
 background-color: #FFCC00;
 border-right: 1px solid black; 
 font-weight:normal;
 font-family: verdana;
 text-decoration: none;
 padding-top:0px !important;
 }
 .currentDayOfOtherMonth-     Calendar-g_d0915a6b_6dde_4464_9903_e2214a603c36
 {
 background-color:#D6DBE2;
 border-right: 1px solid black; 
 font-weight:normal;
 font-family: verdana;
 text-decoration: none;
 padding-top:0px !important;
 }
 .itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e22     14a603c36{
 border: 1px solid #868686;
 border-bottom-width: 0;
 font: normal 10px Verdana;
 line-height: 18px;
 background: lightyellow;
 width: 200px;
 }

 .itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e22     14a603c36 ul li a{
 border-bottom: 1px solid #868686;
 font-weight: normal;
 }

 .itemPopupCalendar-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:hover{
 background: #d4d0c8;
 color: black;
 }

 .itemPopupCalendarShadow-g_d0915a6b_6dde_4464_9903_e2214a603c36{
 /*CSS for shadow. Keep this as is */
 background: black;
 }

 .eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36{

 font-weight: bold;
 }

 .eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:link {

 }

 .eventClass-g_d0915a6b_6dde_4464_9903_e2214a603c36 a:link {

 }

Configure Display Options

Configure Display Options

Return to Configuration Overview
The following options are available to customize the display of Mini-Calendar:
HW22_2010_CalendarOptions.jpg Mini View is a medium-sized calendar
Mini.jpg
Micro View is a tiny calendar
Micro.jpg
Year View displays only the months of the year
Year.jpg
If you select the Year View calendar view, Display Today in Year View will display the text Today is [current day and date] at the bottom of the calendar.

Make your choice as to which calendar display you prefer and then choose the other options as described below:

Step Action Result
1. Asynchronous Mode Asynchronous Mode allows other elements of the SharePoint page to be displayed before Mini-Calendar finishes loading. If this option is enabled, the page will load first, followed by the Web Part. If this option is not enabled, the SharePoint page will not be displayed until Mini-Calendar data finishes loading.
2. Maximum items to display per day in calendar This setting defines the number of items that will be displayed in the tooltip when you hover over a date in Mini-Calendar.
3. Select Style Sheet:
  • If Default CSS is selected, Mini-Calendar will use the master page CSS to define the color and style of the web part.

  • Click Custom CSS to define a custom CSS for the Mini-Calendar Web Part.

    For more information about customizing the Mini-Calendar Web Part CSS, see the section CSS for Mini Calendar.

4. Enter calendar width This setting allows you to shrink Mini-Calendar views further by defining a fixed pixel width. Use this setting instead of the Height and Width settings in the Web Part tool pane Appearance section to prevent scroll bars.

Complementary Products for MiniCalendar

Complementary Products for MiniCalendar

sharepointsolutions.pngYou will find many of our products complement each other quite nicely saving you the time and trouble to write custom code. With Bamboo at the heart of your SharePoint investment, you gain access to a huge catalog of enhancements, components, and accessories that add the critical functionality your business requires.

The same components can be easily used in future applications and they all come from a single, trusted vendor, ensuring an easy purchase process and support you can count on. That’s the Bamboo Way!


Connect Mini-Calendar to a Calendar Plus list and dynamically filter your SharePoint list items based on a date.

CalPlus

Calendar Plus

Register today for our Workplace Collaboration Webinar and see Calendar Plus in action!

Improve Workplace Collaboration with SharePoint – 1 Hour Webinar