Tag Archives: WebScheduler 3

Customize Visible Hours in WebScheduler

One of the feature request we often received in the past is the ability to specify the visible hours in Day, Week, and Split views. By default, the hours in these views start from 00:00 to 23:59. You can now customize the visible hours to start and end at specific hours.

To customize the visible hours, simply specify the visible start hour using ViewSettings >> VisibleStartTime property and visible end hour using ViewSettings >> VisibleEndTime property. These configurations are applied globally, means Day, Week, and Split view will use the same visible hours.

The following screenshot shows scheduler that starts from 9 AM and ends at 7 PM. Note that work week styles are still applied at the specified hours.

visible hours

<ViewSettings SelectedViewMode="Week" SelectedDate="03/11/2008 10:00:00" 


Event rendering will be adjusted according to these settings. For example: the visible start time is set to 09:00 AM and visible end time is set to 07:00 PM. All events that fall within the date range will be rendered. Any events that start at 08:00 AM and ends at 10:00 AM will be rendered from 09:00 AM to 10:00 AM following the visible start time. The original duration of that event will not be altered; it can still be seen from the detail callout.

visible hours_event

The total of events that occur in a date is displayed as the tooltip of the date in the calendar area. When there is only one event that occurs in the specified date, the title of the event is displayed as the tooltip. When custom visible hours are specified, some events might not be included in the hour area. Although some events are hidden, users can still see the total of all events that occurs in the date in the tooltip of the date in the calendar area.

visible hours_calendar

If you have any feedback regarding this feature or you think this feature could be further enhanced, feel free to drop your comments or post your opinion in our forum. We’d be glad to hear them. Happy scheduling, everyone!

Detail Box Paging in WebScheduler

In previous version of WebScheduler, detail box will be displayed when you click More in Month view. In the latest version, detail box is also used in other views (Day, Week, and Split views) when client paging is enabled. In Day, Week, and Split views, detail box will be displayed when users click paging arrow indicator in hour area.

Detail box will adjust its height based on the number of events that occurs in the event block. If there is a lot of event, it is easier and more convenient to enable paging in the detail box.

To enable paging in detail box, simply set LayoutSettings >> EnableDetailBoxPaging property to True. The page size can be specified in LayoutSettings >> DetailBoxPageSize property, which by default is set to 5. This means the detail box will hold maximum 5 events on every page. Note that when detail box paging is enabled, all views that uses detail box will use the configuration.

Detail Box Paging

Client Paging in Day and week view

As explained in previous posts, WebScheduler 3 focused on performance and usability improvements. To improve the performance when rendering events, especially when large dataset is used, Client Paging feature is introduced in WebScheduler.

In Day and Week view, events that occur on the same period are rendered as overlapping events. However, when too many events occurred on the same period, it is difficult for user to see and differentiate these events, as seen in the below screenshot.

client paging day and week view2

Client paging can be enabled in Day and Week view using ViewSettings >> DayView | Week View >> EnableClientPaging property. Client paging is view dependent, which means it can be enabled in one view and disabled in other views.

Both Day and Week views have the same layout structure, which divided to all-day area and hour area. Client paging applied to each area are implemented differently, following the nature layout of the area.

Client Paging in Hour Area

Before we continue, let’s synchronize the term. Events that occur in the same period is called overlapping events and all of the events are considered as one event block. In the below screenshot, event blocks are marked by yellow and purple square. Each event block is divided to several columns, will further called overlapping blocks (marked by pink square), depends on the start time and duration of overlapping events in the event block.

client paging in hour area2

In hour area, the maximum number of overlapping events displayed in an event block is determined by ViewSettings >> DayView | WeekView >> EventBlockSize property. In the above screenshots, 8 overlapping events occurs in the same period (marked by yellow square). If client paging is enabled and EventBlockSize property is set to 2, events rendered in the first two overlapping block will be displayed and the other events will be hidden. A small paging arrow indicator will be displayed at the upper right corner of the block. When the indicator is clicked, detail box that lists all overlapping events included in the event block, will be displayed.

client paging in hour area3

Client Paging in All-day Area

The following screenshot shows overlapping events in all-day area. The start time and duration of each event determines the overall event layout in this area. In the screenshots, eight rows are needed to render all the events.

client paging in all day area

When client paging is enabled, you can determine the maximum number of rows in all-day area using ViewSettings >> DayView | WeekView >> AllDayEventPageSize. If the property is set to 5, events rendered in the first five rows will be rendered and the other events are hidden. A paging arrow indicator is also displayed at the bottom of the area to indicate there are more events that occur in the specified time. When it is clicked, all the hidden events will be displayed.

client paging in all day area2

Feel free to try client paging samples in our live demo and post your questions and feedback in our forum.

Timeline view’s Client Paging in WebScheduler 3

Hello everyone, Happy New Year 2010! In this post, I’m going to discuss one of the most exciting features that we added in the recently released WebScheduler. As you may already aware, WebScheduler 3 is strongly focused on performance and usability, especially when used in enterprise applications where they require to display large dataset in consistently fast performance. The new Client Paging feature in WebScheduler 3 elegantly addresses many of these performance issues.

In the following section, we’ll learn how client paging work specifically in Timeline View (the other views will be discussed in future blog posts). We introduce several client paging modes which can help improving overall application response based on your scenarios.

Let’s start by enabling the client paging in Timeline view. We’ve made it extremely easy to use, so that you can enable the feature by simply setting EnableClientPaging property to true. The property can be found in ViewSettings, then expand TimelineView property.

After enabling the client paging, the next step is to choose the client paging mode that is more suitable to your application scenario. WebScheduler 3 introduces three client paging mode to choose from:

  1. Paging based on number of events
    Called EventPageSize mode, this paging mode restricts the numbers of event displayed in each Timeline cell. If the total number of events exceeds the value of the EventPageSize property, an arrow indicator will appear notifying that more events are available. Click on the arrow indicator to reveal the complete events in the Timeline cell.To use this paging mode, simply set the ClientPagingMode property to EventPageSize.

  2. Paging based on screen viewport
    Called ViewPort, this paging mode will render all events based on the currently visible viewport. This means that even if you have hundreds of resources, WebScheduler will present your events in consistently fast performance. When scrolled down, WebScheduler seamlessly render the complete events of the new visible viewport. As the result, this advanced paging mode significantly improves overall responsiveness and user experiences.
    You should consider using this paging mode if you have fairly large number of resources bound to your WebScheduler.

    To activate this mode, set the ClientPagingMode property to ViewPort.

  3. The combination of both event size and viewport paging
    This mode combines the best of both EventPageSize and ViewPort client paging for the most efficient event rendering. With this mode, the events will be rendered based on the visible viewport and also be restricted based on the number of allowed events. This mode is best used for applications with considerably large number of resources and events bound to WebScheduler.

    To enable this mode, set ClientPagingMode property to Both.

<!–[if gte mso 9]> <![endif]–><!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>Timeline events are displayed when paging arrow indicator is clicked

At this point, you should have learnt the new key features in WebScheduler 3 that elegantly address critical performance limitations in web-based scheduling application. So if you’ve got large, enterprise data to be presented in scheduling interface, go ahead, download and try WebScheduler 3, and impress your users big time!

Last but not least, you can find out more information on WebScheduler 3’s new features here and the live demos here. For questions and feedback, please drop by our forum.

Happy scheduling!

Warm Regards,
Budianto Muliawan.

Time Interval in WebScheduler

In Day, Week, and Split view, the scheduler part is divided into two areas: all-day area and hour area. In previous version of WebScheduler, the hour area is always displayed in 30-minutes interval and cannot be modified to other time interval options. In version 3, WebScheduler allows you to alter this configuration with various predefined time interval options.

The available time interval options are 10 minutes, 15 minutes, 30 minutes, and 60 minutes, which can be set using ViewSettings >> DayView/WeekView >> TimeInterval property.

15-minutes time interval in Week view

The screenshot shows 15-minutes interval in Week view. In 15-minutes time interval, one hour duration is divided into four rows; each row indicates 15 minutes duration. Note that the height of all events is also adjusted to the active time interval in the view.

The time interval specified in Day view can be different with the one specified in Week view, however since Split view uses the same configurations as Day view, the time interval options specified in Day view will be used in Split view.

When time interval options are listed in context menu, users can easily change the active time interval by selecting one of the options in the context menu. Once it’s changed, WebScheduler will automatically re-render its view and events, adjusting to the selected time interval. To include the time interval options in context menu, simply enable IncludeTimeIntervalInMenu property.

The time interval options listed in context menu can be seen in this screenshot. The active time interval is indicated by a checked sign in front of it. When the property is disabled, these options will not be included in context menu, thus users are not allowed to change the active time interval of the view.

Multiple cell selection is an innovative feature which enables user to block a certain date range and quickly create a new event based on the selection. Now, it is enhanced further to work in conjunction with time interval feature. When users select multiple cells, the duration of selected date range will automatically be adjusted to the active time interval. The duration of the selected date range can be easily seen in the callout header.

You can also set time interval programmatically in client-side, using SetTimeInterval function.

function SetInterval()
     var s = ISGetObject("WebScheduler1");

In Build 2, scheduled to be release this end of January 2010, SetTimeInterval API is enhanced, adding one parameter, viewMode. It basically enables you to select which view mode and what time interval to be applied. For example: if the current view mode is Day view and you want to apply the 60-minute interval to Week view, you can use the following code.

function SetIntervalToView()
     var s = ISGetObject("WebScheduler1");
     s.SetTimeInterval("Minutes60", “Week”);

WebScheduler will smartly detect whether the assigned view is the current view. If it’s not, the scheduler will not be refreshed, thus preventing unnecessary processing. The 60-minutes time interval will be rendered automatically in Week view when users navigate to Week view. If the viewMode parameter is not specified, the new time interval is applied to the active view.

As explained above, WebScheduler’s time interval is view dependent, which means you can have different time interval configuration in different views. However, there are certain scenarios which require synchronized interval settings. SynchronizeTimeInterval property is introduced in Build 2, offering built-in time interval synchronization. This means, when users change the time interval in Day view to 15-minutes and switch to week view, the time interval in Week view will be set to 15-minutes as well, and vice versa.

Using time interval feature implemented in WebScheduler, users can view the schedule easier and more flexible.