DayPilot Pro 5.1

Released on December 7, 2008 (build 1600).

Main features

The missing features will be added according to the following matrix:

Feature DPC DPS DPSD DPM Bubble Menu
"afterRender" client-side event OK OK 5.1 (done) 5.1 (done) N/A N/A
Header bubble OK OK     N/A N/A
Cell bubble OK     N/A N/A
Event bubble OK OK     N/A N/A
Sending custom data with callback 5.1 (done) OK 5.1 (done) 5.1 (done)
JSON callback format 5.1 (done) OK 5.1 (done) 5.1 (done)
"Command" event 5.1 (done) OK 5.1 (done) 5.1 (done) N/A N/A
CSS support OK OK        
Prefixed CSS class names 5.1 (done) 5.1 (done)        
"afterEventRender" client-side event OK OK N/A N/A
Inline event editing OK OK        
Time range selection (mouse drag) OK OK     N/A N/A
DayPilot.Date object 5.1 (done) OK 5.1 (done) 5.1 (done) N/A N/A

(F86) DayPilot Navigator

DayPilot Navigator is a new control for date switching.

Features:

  • Shows one or more months (ShowMonths="3")
  • Can highlight busy days
  • Fully customizable using CSS classes
  • Automatic binding to DayPilot Calendar, DayPilot Month, DayPilot Scheduler, and DayPilot Dynamic Scheduler (no JavaScript code required)
  • Switches visible months without server callback
  • Automatically translated using the current culture
  • Supports week start on Sunday/Monday

Binding to DayPilot controls

DayPilot Navigator can switch the data of any main DayPilot control.

Steps:

1. Assign the ID of the DayPilot Calendar to DayPilotNavigator.BoundDayPilotID property.

Supported target controls:

2. Handle the DayPilotCalendar.Command event and watch for e.Command == "navigate". The selected start/end range are stored in e.Data:

DateTime start = (DateTime) e.Data["start"];
DateTime end = (DateTime) e.Data["end"];

You should set the new StartDate and reload the events (DataBind()). Don't forget to call full Update():

DayPilotCalendar1.StartDate = (DateTime) e.Data["start"];
DayPilotCalendar1.DataBind();
DayPilotCalendar1.Update(CallBackUpdateType.Full);

The "navigate" command string can be changed using BindCommand property.

Free/busy information

It is possible to show free/busy information in DayPilot Navigator.

Steps:

1. Set VisibleRangeChangedHandling property to CallBack.

2. Set DataSourceID (or DataSource) property. You can use the same data source for DayPilotNavigator and for the main DayPilot control.

3. Set DataStartField and DataEndField.

4. Handle VisibleRangeChanged event:

  • Use VisibleStart and VisibleEnd properties to get the visible range.
  • Call DataBind() in the to reload the data.

5. The prefix_busy class is applied (added) to the busy days (see also CSS styling below).

CSS styling

The layout is defined using a set of css classes.

Prefix

The classes use the prefix defined in CssClassPrefix property. Example:

CssClassPrefix="navigator_"

Class names:

  • navigator_main
  • navigator_day
  • ...

Class names

The following class names are prefixed with a name defined in

  • main (global element)
  • month (each month table)
  • titleleft (left part of the header - contains '<' character)
  • title (middle part of the header - contains the month name)
  • titleright (right part of the header - contains '<' character)
  • dayheader (day names row)
  • day (day - current month)
  • dayother (day - previous or next month)

If you need to define a border for day or dayother cells, you should use these classes:

  • todaybox
  • daybox

Selected cells have the following class defined (in addition to base day/dayother class):

  • select

Today's cell has the following class defined (in addition to base day/dayother and possible select classes)

  • today

Days with events (busy) have the following class defined (in addition to base day/dayother class):

  • busy

Status: Implemented

(F84) Configurable callback Update() (DayPilot Calendar, DayPilot Month, DayPilot Dynamic Scheduler)

The current behavior of server-side Update() method is different depending on the event handler:

  • Refresh event: Update() redraws almost the whole control (events, headers, and background cells)
  • EventMove, EventResize and other events: Update() redraws events only

The Update() method now has a new parameter that specifies what should be updated:

public void Update(CallBackUpdateType updateType);

CallBackUpdateType is an enum with the following values:

  • None
  • EventsOnly
  • Full

EventsOnly is the default value and it corresponds to the previous behavior. Full value reloads both events and headers (including the upper-left corner in DayPilot Calendar).

Status: Implemented

(F85) Command event (flexible replacement for Refresh) (DayPilot Calendar, DayPilot Month, DayPilot Dynamic Scheduler)

The refreshCallBack() client-side method is now deprecated in favor of a new commandCallBack().

Declaration

commandCallBack(command, data);

Parameters

  • command (string) - custom command type string
  • data (any JavaScript object) - custom data that will be sent to the server-side Command handler

The data parameter will be translated into JsonData class - see also (F57) Sending custom data with CallBack below.

Example (switching to a specified day)

Page.aspx:

<a href="javascript:dpc1.commandCallBack('day', '2008-01-01T00:00:00');">Goto 2008-01-01</a>

Page.aspx.cs:

    protected void DayPilotCalendar1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
    {
        switch (e.Command)
        {
            case "day":
                DayPilotCalendar1.StartDate = (DateTime)e.Data;
                break;
            // ...         }         // ...
        DayPilotCalendar1.DataBind();
        DayPilotCalendar1.Update(CallBackUpdateType.Full);
    }

Status: Implemented

(F) Improved scroll position handling (DayPilot Scheduler)

The scroll positions (both horizontal and vertical) are fully configurable during PostBack and full CallBack (CallBackUpdateType.Full) using the following properties:

  • ScrollX
  • ScrollY

Both these properties accept integer values (in pixels). You can also translate the DateTime to ScrollX using a new SetScrollX(DateTime) property.

The old ScrollPosition property (DateTime) is not available anymore.

Examples

Initial ScrollX position:

    protected void Page_Load(object sender, EventArgs e)
    {
        // ...
        
        if (!IsPostBack)
        {
            // sets the initial scroll position on first load
            DayPilotScheduler1.SetScrollX(DateTime.Today);
            DataBind();
        }
    }

Resetting the ScrollX position during StartDate change:

    protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
    {
        switch (e.Command)
        {
            case "next":
                DayPilotScheduler1.StartDate = DayPilotScheduler1.StartDate.AddYears(1);
                DayPilotScheduler1.Days = Year.Days(DayPilotScheduler1.StartDate.Year);
                DayPilotScheduler1.ScrollX = 0;
                break;
             // ...
        }

        DayPilotScheduler1.DataBind();
        DayPilotScheduler1.Update(CallBackUpdateType.Full);
    }

See also:

Status: Implemented

(F83) DayPilot.Date object (DayPilot Calendar, DayPilot Month, DayPilot Scheduler)

A new DayPilot.Date object is used to represent the date information passed to client-side event handlers (JavaScript).

Differences from the standard Date object:

  • DayPilot.Date only works with a single time zone (no distinction between local and GMT time).
  • Supports methods for easier handling of calculations (addMinutes, etc.).

Event-handlers that use this DayPilot.Date:

DayPilot Month

  • EventClickJavaScript: e.start(), e.end()
  • EventMenuClickJavaScript: e.start(), e.end()
  • EventMoveJavaScript: e.start(), e.end(), newStart, newEnd
  • EventRightClickJavaScript: e.start(), e.end()
  • EventResizeJavaScript: e.start(), e.end(), newStart, newEnd
  • TimeRangeSelectedJavaScript: start, end

DayPilot Calendar

  • EventClickJavaScript: e.start(), e.end()
  • EventDeleteJavaScript: e.start(), e.end()
  • EventDoubleClickJavaScript: e.start(), e.end()
  • EventEditJavaScript: e.start(), e.end()
  • EventMenuClickJavaScript: e.start(), e.end()
  • EventMoveJavaScript: e.start(), e.end(), newStart, newEnd
  • EventRightClickJavaScript: e.start(), e.end()
  • EventResizeJavaScript: e.start(), e.end(), newStart, newEnd
  • EventSelectJavaScript: e.start(), e.end()
  • TimeRangeDoubleClick: start, end
  • TimeRangeMenuClick: e.start, e.end
  • TimeRangeSelectedJavaScript: start, end

DayPilot Scheduler

  • EventClickJavaScript: e.start(), e.end()
  • EventMenuClickJavaScript: e.start(), e.end()
  • EventMoveJavaScript: e.start(), e.end(), newStart, newEnd
  • EventRightClickJavaScript: e.start(), e.end()
  • EventResizeJavaScript: e.start(), e.end(), newStart, newEnd
  • TimeRangeSelectedJavaScript: start, end

See also:

Status: Implemented

(F57) Sending custom data with CallBack (DayPilot Calendar, DayPilot Month, DayPilot Scheduler)

All client-side callback methods have an extra parameter (data) that will allow you to send additional information to the server.

Smart object handling

  • You can send any kind of object (int, string, Date, array, object...).
  • The JavaScript object is accessible using a string indexer (e.g. e.Data["property"]).
  • You can access the full hierarchy without casting the individual levels (e.g. e.Data["property"]["item"]["subitem"]).
  • The JavaScript array is accessible using a int indexer (e.g. e.Data[0]).
  • You can convert the parameter value directly by casting in most cases (e.g. (string) e.Data will convert int value to string).

The "data" parameter will be translated into a JsonData class instance. JsonData is a polymorphic element that mimics an untyped JavaScript object.

Depending on the "data" content, it can be accessed in various ways:

  • string: (string) e.Data
  • integer: (int) e.Data
  • Date: (DateTime) e.Data
  • DayPilot.Date: (DateTime) e.Data
  • array: e.Data[0]
  • object with properties: e.Data["property"]
  • object hierarchy: e.Data["item"]["subitem"]

Example 1 (simple string)

Client side:

var state = "on";
dpc1.eventClickCallBack(e, state);

Server side:

protected void DayPilotCalendar1_EventClick(object sender, DayPilot.Web.Ui.Events.EventClickEventArgs e)
{
   string state = (string) e.Data;
}

Example 2 (Date object)

Date object always sends its UTC value (not local time).

Client side:

var date = new Date();
dpc1.eventClickCallBack(e, date);

Server side:

protected void DayPilotCalendar1_EventClick(object sender, DayPilot.Web.Ui.Events.EventClickEventArgs e)
{
// be careful, this date doesn't correspond to the client
// local time unless you are in +00 time zone
   DateTime date = (DateTime) e.Data;
}

Example 3 (DayPilot.Date object)

DayPilot.Date object ignores the time zones and sends exactly what you supply. The constructor (new DayPilot.Date()) creates a new date using the current local time.

Client side:

var date = new DayPilot.Date();
dpc1.eventClickCallBack(e, date);

Server side:

protected void DayPilotCalendar1_EventClick(object sender, DayPilot.Web.Ui.Events.EventClickEventArgs e)
{
   DateTime date = (DateTime) e.Data;  
}

Example 5 (array)

Client side:

var myArray = ['a', 'b', 'c'];
dpc1.eventClickCallBack(e, myArray);

Server side:

protected void DayPilotCalendar1_EventClick(object sender, DayPilot.Web.Ui.Events.EventClickEventArgs e)
{
   string a = (string) e.Data[0];  
}

Example 4 (object)

You can send any object. It will be accessible as a Dictionary hieararchy.

Client side:

var o = {};
o.name = "name";
o.value = "value";
o.child = {};
o.child.name = "child name";
o.child.value = "child value";
dpc1.eventClickCallBack(e, o);

Server side:

protected void DayPilotCalendar1_EventClick(object sender, DayPilot.Web.Ui.Events.EventClickEventArgs e)
{
   string childValue = (string) e.Data["child"]["value"];
}

Status: Implemented

(F) Prefixed CSS class names (DayPilot Calendar, DayPilot Scheduler)

The CSS styling now use a new model.

Instead of applying two classes (CssClass="daypilot"):

class="daypilot header"

It applies a prefix (CssClassPrefix="daypilot_"):

class="daypilot_header"

This change prevents unwanted application of classes that you have defined for other uses (like ".header" in the first example).

Status: Implemented

(F) All-day event improvements (DayPilot Calendar)

1. AllDayEnd property

A new AllDayEnd property lets you specify whether the start and end date in all-day events use date only or full date and time information.

A one-day event can be stored in the following ways:

  • start=2007-01-01, end=2007-01-01 (AllDayEnd="Date")
  • start=2007-01-01T00:00:00, end=2007-01-02T00:00:00 (AllDayEnd="DateTime").

See also:

2. ShowAllDayEventStartEnd property

A new ShowAllDayEventStartEnd lets you specify whether the start and end time should be visible in the event box.

  • Default value is "true".
  • The "~" character indicating the the event spans to another day is always visible.

3. New all-day event box arrangement

When the all-day event box is too small (the full event text doesn't fit in), it hides the start and end time labels (if present). The new rules:

  • The event text is always centered.
  • If it's too long (but not longer than the event box), it hides the start and end times.
  • If it's longer than the event box, it hides the start and end times and it shows the beginning of the event text (instead of the middle part).

Status: Implemented

Bug fixes and minor improvements

Common

  • The source code now compiles without compiler warnings (except of "Obsolete" warnings related to Refresh event).
  • Missing XML documentation added.

DayPilot Calendar

  • Forum 507 (bug): Double-click a time cell no longer causes "'previousSibling' is Null or not an object'" JavaScript error.
  • Forum 567 (bug): Resizing a multi-day events fixed. See also Forum 327.
  • Forum 597 (improvement): CellHeight min value limit removed.
  • Forum 566 (improvement): The upper-left corner is updated during full CallBack update (CallBackUpdateType.Full).
  • Case 1794 (bug): Hierarchy of Columns in ViewType="Resources" now serializes properly (thanks to Jean-François Collin).
  • Bug: Header rendering fixed in Visual Studio 2005 DesignMode.
  • Bug: It's now possible to start event moving or resizing before the previous callback response comes from the server. The JavaScript error "'parentNode' is null or not an object" does no longer appear.
  • Improvement: Mere clicking on the "move" or "resize" area of an event doesn't trigger the EventMove or EventResize action. It's now necessary to drag at least a pixel.

DayPilot Scheduler

  • Case 1880 (bug): Global CSS setting "* { padding: 0px }" no longer causes misalignment of resource headers.
  • Case 1892 (bug): "external" variable is now properly indicating external drag&drop in EventMoveJavaScript.
  • Bug: DayPilotEventArgs.Source is now set properly for CallBacks.

DayPilot Month

  • Forum 601 (improvement): VisibleStart and VisibleEnd properties indicate the visible range (useful for limiting the SQL queries).

DayPilot Dynamic Scheduler

  • Case 1842 (bug): DayPilot Dynamic Scheduler can handle no visible time range without error messages (e.g. when using ShowNonBusiness="false" and StartDate= any Saturday or Sunday).
  • Forum 599 (improvement): TimeRangeSelected event added (supports event clicking, so far).