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

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.

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.

Copy and Paste WebScheduler’s Event in Day and Week View

In scheduling scenarios, it’s quite common if user wants to copy and paste an event to a certain date. We don’t have this feature as a built-in feature yet (maybe soon ^^) in WebScheduler.NET, but you can manually implement it using our extensible API.

First of all, you need to add Copy Event and Paste Event menu items in context menu. They can be easily added in OnContextMenu client side event. The Copy Event menu item should be added in event’s context menu, while Paste Event menu item should be added in the cell area.

Copy Event menu item

Paste Event menu item

Next, you need to implement the copy and paste action. When you create the menu items, you can specify a function that will be invoked when the menu items are clicked. In that function, you can implement the needed code for copy and paste action. To retrieve the scheduler object in this function, you can simply use
ISGetObject([scheduler id]) or use menuItem.OwnerMenu.MenuControl.Scheduler.

When user selects Copy Event menu item, the selected event can be stored to a global variable that can be used when user selects Paste Event menu item. 

var evt = s.GetSelectedEvent();
if (evt != null)
     copiedEvent = evt;

When user selects Paste Event menu item, you can retrieve the copied event from the stored global variable and create a new event programmatically.

var newEvent = s.CreateNewEvent();
var newOriginalObject = newEvent.GetOriginalObject();

newEvent.StartTime = newOriginalObject.StartTime = selDate;
newEvent.EndTime = newOriginalObject.EndTime = endTime;

//call the function that copy the original object from the copied event to the new original object
CopyOriginalObject(originalObject, newOriginalObject);

s.InitializeEventView(newEvent);
s.InsertEvent(newOriginalObject);

The new event will be created in the selected cell area. That means the datetime of the selected cell area will be used as the new event’s start time. To get the date time of the selected cell area, you can use s.GetDateTimeByCellElement(s.GetSelectedDateArea(), "DateTime") method.

To calculate the end time of the new event, the start time must be added with the event’s duration. In time-based event, the event.Duration property already stores the duration value in miliseconds. However, in all-day event, the event.Duration property stores the duration value in days. In this case, the duration of all-day event must be converted to miliseconds.

Finally now, not only you can copy and paste event in the same view, you can also copy event during navigation.

Event Copied

In the following screenshot, the event is pasted in the next week. The original event that is copied starts at March 3rd 2008; and the event is pasted to March 10th 2008.

Copied event during navigation

The event can also be copied to other view. For example: user can copy “Review documentation” event in Week view, navigates to Day view and paste the event.

Copied event in Day view

I’ve provided a sample that can be downloaded here. In the sample, you can copy switch-event too. Switch event is actually a time-based event that occurs in multiple days and is displayed in all-day-event area. Additional code is needed to support copy and paste switch event. 

Note that time based event can only be pasted as time-based event and so are the other event types, so if, for example, an all-day event is pasted to a time-based cell area, the new event will not be added properly.

If you wish to implement copy and paste event in other views, you need to properly convert the duration of event to miliseconds. I plan to describe more about this in the future, so stay tune ! ^^