DayPilot Pro 3.5

Released on 1 April, 2007.

Features

(F06) Extended event handling (AJAX)

In addition to the event handling option available in previous versions (JavaScript, PostBack) it is now possible to handle events using a AJAX server callback. That means that user action calls a server-side event and updates the view according to the changes.

Handling callback is really easy. Here is how a typical PostBack event handler looks like:

protected void DayPilotCalendar1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
{
  // All information about the action can be found in "e" parameter
  // Database update
  // ...

  DayPilotCalendar1.DataBind();
}

And here is how a typical AJAX callback event handler looks like:

protected void DayPilotCalendar1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
{
  // All information about the action can be found in "e" parameter
  // Database update
  // ...

  DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update();
}

The difference is just a single line of code.

Also note that:

  • You can program all your data logic on the server side. No JavaScript coding is required if you are satisfied with the standard behavior.
  • There is no dependency on any other framework (i.e. no Prototype library, no ASP.NET AJAX are required).
  • You can switch the handling by setting properties like EventMoveHandling (Disabled, JavaScript, PostBack, CallBack).
  • The same event handler is called for PostBack and CallBack. You can determine the event source by checking e.Source property.

Note that there is only one more line (calling Update()).

This is an overview of the client events available:

  • EventClick
  • EventMove
  • EventResize
  • EventMenuClick
  • TimeRangeSelected

For each of them you can set the handling:

  • JavaScript (custom JavaScript function will be called on the client side)
  • PostBack (server-side event will be called using PostBack)
  • CallBack (server-side event will be called using AJAX callback)

(F07) Drag & drop event resizing (AJAX)

Event resizing behavior:

  • User can drag top or bottom of the event.
  • There will be an up-down arrow cursor on hovering top or bottom border to indicate resizing is possible.
  • Events that span multiple days can be resized by the very beginning or by the very end.
  • Dragging doesn't resize the event itself but only a shadow that outlines the new size. After dragging is finished, a defined action is fired (JavaScript/PostBack/CallBack) and the shadow disappears.
  • It depends on custom action handling if the event size will be updated according to the shadow (i.e. you are able to deny the action in the event handler).
  • By default, resizing is turned off.

Limitations:

  • For this version, only resizing within a single day will be allowed.

Resizing in steps:

  • Resizing is be possible in steps defined by CellsPerHour (i.e. 30 minutes in the default setup).
  • Resizing changes the starting/ending date according to the steps. E.g. If an event was ending at 9:25 and you resize it by dragging its bottom, it will change duratino is steps of 30 minutes - 9:30, 10:00, etc.

(F08) Drag & drop event moving (AJAX)

Event moving behavior:

  • User can drag an event by dragging the bar on the left side of an event.
  • There will be an up-down-left-right arrow cursor indicating that moving is possible.
  • Events that span multiple days can be moved by dragging the first part (in the starting day).
  • Dragging doesn't move the event itself but only a shadow that outlines the position. After dragging is finished, a defined action is fired (JavaScript/PostBack/CallBack) and the shadow disappears.
  • It depends on custom action handling if the event position will be updated according to the shadow (i.e. you are able to deny the action in the event handler).
  • By default, moving is turned off.

(F16) Scrollbar disabling

HeightSpec options is be extended to allow showing just business hours but without the scrollbar. HeightSpec property defines how the height of the events area (below the column headers) is determined.

Old HeightSpec options:

  • Fixed - the height is set to height set in Height property (in pixels); scrollbar is visible
  • BusinessHours - the height is set according to business hours (all business hours are visible); scrollbar is visible
  • Full - the height is not specified and all hours from 00:00 to 24:00 are visible; scrollbar is not present

New option:

  • BusinessHoursNoScroll - the height according to business hours (all business hours are visible); scrollbar is not present.

(F17) Menu events (AJAX)

Menu items clicks can be handled in one of the following ways:

  • NavigateUrl (hyperlink)
  • JavaScript (custom JavaScript function)
  • PostBack (server-side event executed using PostBack)
  • CallBack (server-side event executed using AJAX callback)

    For PostBack/CallBack action, it is necessary to define a Command that will be passed to the event handler.

    This is useful for manipulating events using the context menu (especially deleting):

        <daypilot:daypilotmenu id="DayPilotMenu1" runat="server">
            <DayPilot:MenuItem Text="Delete (CallBack)" Action="CallBack" Command="Delete"></DayPilot:MenuItem>
            <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
        </daypilot:daypilotmenu>

    This menu defines two actions for an event: CallBack delete and PostBack delete. The event handler can look like this:

        protected void DayPilotCalendar1_EventMenuClick(object sender, DayPilot.Web.Ui.Events.EventMenuClickEventArgs e)
        {
            if (e.Command == "Delete")
            {
                // Update database

                DayPilotCalendar1.DataBind();

                if (e.Source == EventSource.CallBack)
                    DayPilotCalendar1.Update();
            }
        }

     

    (F18) Fixed space after events

    Since DayPilot Pro 3.0 the events were rendered with an additional space in each column to allow clicking on the underlying time slot. It was specified as 1% of the column width. That worked well for wide columns but if the column was too narrow (like in week view) the space was narrow as well.

    Since DayPilot Pro 3.5 the space is fixed (5 pixels).

  • API changes

    • DayPilotCalendar.DayFontSize property was renamed to HeaderFontSize.
    • DayPilotCalendar.DayFontFamily property was renamed to HeaderFontFamily.
    • UserActionHandling enumeration was extended with Disabled and CallBack values.
    • MenuItem.Target property was renamed to MenuItem.NavigateUrlTarget.
    • MenuItem.Title property was renamed to MenuItem.ToolTip.

    Browser compatibility

    This release fully supports Internet Explorer and Firefox, namely:

    • Internet Explorer 6.0/7.0
    • Firefox 1.5/2.0

    I will add support for Opera and Safari in one of the future releases. If it is a priority for you, please contact me at daypilot @ annpoint.com.