Using Multiple Calendars in WebCalendar

By intersoftbram | December 2, 2010 | In 2010 R1, Development, Products, Tips and Tricks

Continuing my posts about Intersoft WebCalendar control for ASP.NET, I have described how to configure the holiday collection in WebCalendar, and how to get selected dates and perform multiple selection. If you missed the blog posts, please check it out here.

In this post, I will show you about how to configure WebCalendar to multiple calendars in multiple columns. Let’s start configuring the WebCalendar.

Unlike similar calendar controls, WebCalendar enables you to display multiple calendars. This behavior is controlled by the NumberOfCalendarDisplayed property.

When multiple calendars feature is enabled, only 1 calendar will be active when users switched to the year view or decade view.

The following screenshots show the multiple calendars feature in WebCalendar using different type of view mode.

clip_image002clip_image004clip_image006

As you can see from the above screenshots, WebCalendar’s default behavior is to display the multiple calendars in one column. To enable multiple columns option in WebCalendar, we can customize the CalendarItemWidth property to set the width of each calendar, and the Width property to control the WebCalendar’s width.

As an example, I will show you how to display a whole year calendar in 4×3 configurations.
Please follow the steps below.

  1. Set the NumberOfCalendarDisplayed property to 12.
  2. Set the CalendarItemWidth to 170px. The CalendarItemWidth is 1/4 from the entire WebCalendar’s width.
  3. Set the CalendarItemHeight to 180px. The CalendarItemHeight is 1/3 from the entire WebCalendar’s height.
  4. Set the Width property to 680px. We can get the Width property value from multiply the total column with CalendarItemWidth’s value.
  5. Set the Height property to 540px. We can get the Height property value from multiply the total row with CalendarItemHeight’s value.

Here is the result from the above WebCalendar configurations.

clip_image008

Now you have learned how to use WebCalendar to display multiple calendars in multiple columns. If you have any question, feedbacks or comments, feel free post them to our community forum. You can also check the online demos of WebCalendar here.

Warm Regards,
Budianto Muliawan
Intersoft Software Architect

Leave a Reply