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.

<ViewSettings SelectedViewMode="Week" SelectedDate="03/11/2008 10:00:00" 
   VisibleStartTime="t0900"VisibleEndTime="t1900">
</ViewSettings>

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.

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.

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!

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.

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 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.

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 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.

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.

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

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.

   

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.

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.

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");
     s.SetTimeInterval("Minutes60");
}

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.

To get started, right click on a WebScheduler instance and select “WebScheduler Database Wizard” option to use this embedded tool.

Follow the onscreen instruction below to quickly create your new WebScheduler SQL database.

Database name drop down list
When the connection to the designated SQL Server has been successfully established, simply specify a new database by typing the name on the textbox. Alternatively, you can select one of the existing databases from the drop down list. Press “Create” and all required tables for WebScheduler with standard fields will be created automatically.

“Get SQL Script” button.
The database wizard also provides a more advanced option to generate the SQL script for the tables definition. The SQL script is primarily useful if you would like to customize the fields definition or add more fields to the table. Simply click on the Get SQL Script button to obtain the complete SQL statements and easily apply it in your own database, for example a Microsoft Access database.

The following screenshot shows the result of T-SQL compatible script.

Note that there are 2 options for the script definition; “MS SQL Compatible” and “MS Access Compatible”. You can choose the one that suit your preferred database provider.

That’s all for now. if you have any questions or feedback. Please share with us in our forum.

Warm Regards,
Budianto Muliawan.

If you’re building a large scale, enterprise resources planning application that involve thousands of resources and events in a single month view alone, you would have quickly realizing serious performance issues during the development process. In this post, I’ll share some insights on the common pitfalls and bottleneck in performance, and how our latest scheduling component completely address them in elegant ways.

The Challenges

There are at least 4 factors that would lead to performance issue in most enterprise applications and specifically in scheduling applications.

1. Huge data transfer size.Take a look at our recent case study on a car rental application. The car rental could have over 3,000 events made in a month. In most scheduling component in the market, all data will be retrieved at once in the page load. That transmits over 2MB of data sent over the cloud which translates to 6-7 seconds waiting even on a broadband connection.
2. Long rendering process.With rich user interface possible nowadays, web developers often forgot that a web application is not a desktop application. The nature of web application still have several common constraints such as the amount of elements which are considerably good on a page. In the case of enterprise application, serious performance bottleneck could arise due to the massive objects creation and long rendering process which could take 8-10 seconds for a page bound to several thousands of data.
3. Heavy backend query.
   
   Most datasource controls introduced in ASP.NET don’t enable paging by default. While it may not be a significant issue in relatively smaller application, it could be a great showstopper for enterprise application with millions to billions worth of data. Non-optimized database query itself could cause performance issues in at least three ways: the heavier workload and resources required to compute the query, huge data transmission from the backend to business layer and ultimately yielding more extensive operation in the UI layer.
4. Poor data processing.Specifically for a scheduling component, poor data processing logic is often a factor that causes performance issue. Scheduler is a unique component that process data in several phases, such as resources categorizing, data grouping and more. Thus, improper data processing logic could result in longer time required to compute the final shape of the data required by the scheduler interface.

The Solution

WebScheduler 3 is strongly focused on addressing performance issues and improving application scalability at the same time. One of the our key goals is to achieve a consistent performance while loading a scheduler bound to thousands of data – for example, 1-2 seconds regardless of the data size.

ViewPort paging was born as the result of our extensive R&D. It is specifically designed for Timeline View (Gantt Chart Style) which makes more sense due to its layout nature that display huge data in a single resource. To completely eliminate the key performance issues discussed above, we also invented three more innovative features that work in conjunction with ViewPort paging. They are event-based client paging, server paging and efficient data categorizing process.

Instead of loading huge data on every data request, ViewPort paging works by loading only a small chunk of data in the first load which seamlessly fills the data based on the available real screen estate. It will load the rest of data on demand as users scroll downward. Also keep in mind that ViewPort intelligently saves a cache of loaded data, so it won’t retrieve the same data twice. The result is maximum performance, increased responsiveness and extremely smooth user experiences.

The ViewPort implementation doesn’t merely handle data paging process, it  also takes account every single feature that associated to it, say, new event creation, recurrence editing, and data drilling. It also flawlessly handles a vast array of complex scenarios such as drag-drop operation across resources and time, multiple selections, views switching, and more.

In addition to ViewPort paging, WebScheduler 3 also implements smart client paging to other views including day view, week view,  split view and all day area view. We also add client paging interface to the details box in month view.

All in all, WebScheduler 3 successfully delivers on its key objectives to redefine a new standard in performance for enterprise-class usage and improving user experiences at the same time. The following chart shows the performance benchmark tested in various browsers.

Our engineers will soon post more coverage on other new exciting features such as customizable time intervals, visible hours, disabled time and more. So stay tuned!

As the word said, pictures worth a million words. Videos worth a zillion. Watch the video below and see the new performance improvements in WebScheduler 3.

You can also experience it yourself by trying our new Blitz rent-a-car reference sample available online.

Learn More

WebScheduler 3 is released – download your 30-day trial copy today to experience the exciting new features for yourself.

More resources on WebScheduler 3 can be found in the following links:

Overview

Performance Benchmark and Comparison

Powerful Client Paging Capability

Top New Features

Top 10 New Features Video

Live Demos

All the best,
Jimmy.