Time range selecting

Enable time range selecting

By default, time range selecting is disabled. You can enable it by setting DayPilotCalendar.TimeRangeSelectedHandling property to one of these values:

• PostBack (immediately executes server-side TimeRangeSelected event handler using PostBack)
• CallBack (immediately executes server-side TimeRangeSelected event handler using CallBack)
• JavaScript (immediately executes a custom JavaScript)
• Hold (selection remains active and context menu is available on right click)

TimeRangeSelectedHandling.PostBack

If you set TimeRangeSelectedHandling to TimeRangeSelectedHandling.PostBack, each time selection will send a PostBack to the server. You should handle TimeRangeSelected event on the server (you can do it by double-clicking TimeRangeSelected event in the Properties window in Visual Studio) and apply the changes to your data source (usually a database).

You can add a new event directly from the code:

protected void DayPilotCalendar1_TimeRangeSelected(object sender, 
		DayPilot.Web.Ui.Events.TimeRangeSelectedEventArgs e)
{
        // Add event to the database
        // ...

        DayPilotCalendar1.DataBind();
}

Or you can redirect it to another page where you enter the event details:

protected void DayPilotCalendar1_TimeRangeSelected(object sender, 
		DayPilot.Web.Ui.Events.TimeRangeSelectedEventArgs e)
{

        Response.Redirect("NewEvent.aspx?start=" + e.Start.ToString("s") + "&end=" 
		+ e.End.ToString("s") + "&column=" + e.ColumnId, true);
}

TimeRangeSelectedHandling.CallBack

If you choose CallBack handling, each time selection will execute an AJAX callback to the server. In the handler, you should update your data source and call DataBind(). If you call Update() method the changes will be sent back to the client and the events will be redrawn according to the new state.

A sample TimeRangeSelected handler for AJAX callback will look like this:

protected void DayPilotCalendar1_TimeRangeSelected(object sender, 
		DayPilot.Web.Ui.Events.TimeRangeSelectedEventArgs e)
{
        // Update your database
        // ...

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

Note that the same event handler is used for PostBack and CallBack events. You can detect the event source (PostBack or CallBack) by checking e.Source property.

Note: When the EventResize handler is invoked by AJAX callback, the state of page controls is not available (in contrast to PostBack).

Note: If you do not use PostBack handling on your page (either for DayPilot or for any other control) you should turn off ViewState to improve the page performance.

Server-side event arguments (TimeRangeSelectedEventArgs)

The TimeRangeSelected handler will receive information about the action performed on the client (this applies both to PostBack and CallBack). TimeRangeSelectedEventArgs class contains the following properties:

• Start
• End
• ColumnId

TimeRangeSelectedHandling.JavaScript

You can also handle the time selection event on the client side. JavaScript handler can be used especially for:

• redirecting the user to another page where new event details can be entered
• asking the user to confirm the action
• submitting custom data in column argument

Redirecting sample:

DayPilotCalendar1.TimeRangeSelectedHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.TimeRangeSelectedJavaScript = "newEvent(start, end, column);";

<script type="text/javascript">
    function newEvent(start, end, column) {
        document.location = 'NewEvent.aspx?start=' + encodeURIComponent(start.toUTCString()) 
	+ '&end=' + encodeURIComponent(end.toUTCString()) + '&column=' + encodeURIComponent(column);
    }
</script>

Sample that asks user for confirmation before executing PostBack:

DayPilotCalendar1.TimeRangeSelectedHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.TimeRangeSelectedJavaScript = "newEvent(start, end, column);";

<script type="text/javascript">
    function newEvent(start, end, column) {
        dpc1.timeRangeSelectedPostBack(start, end, column);
    }
</script>

Sample that executes callback:

DayPilotCalendar1.TimeRangeSelectedHandling = UserActionHandling.JavaScript;
DayPilotCalendar1.TimeRangeSelectedJavaScript = "newEvent(start, end, column);";

<script type="text/javascript">
    function newEvent(start, end, column) {
        dpc1.timeRangeSelectedCallBack(start, end, column);
    }
</script>

Note: dpc1 is the value of DayPilotCalendar.ClientObjectName. If you don't specify ClientObjectName the object name will be the value of DayPilotCalendar.ClientID (usually something like DayPilotCalendar1 but it can be ctl00$ContentPlaceHolder1$DayPilotCalendar1 if you use master pages).

Client-side event arguments

The following variables are available in the JavaScript handler:

• start - Date, selection start time
• end - Date, selection end time
• column - string, column id (from Column.Value)

TimeRangeSelectedHandling.Hold

In this case, the selection remains active and context menu is available.

The context menu can be set using ContextMenuSelectionID property.

Example code (run this example):

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendar1" 
  runat="server"
  DataEndField="end"
  DataStartField="start"
  DataTextField="name" 
  DataValueField="id" 
  Days="7" 
  OnTimeRangeSelected="DayPilotCalendar1_TimeRangeSelected"
  TimeRangeSelectedHandling="Hold" 
  ContextMenuSelectionID="DayPilotMenu1" 
  ClientObjectName="dpc1">
</DayPilot:DayPilotCalendar>
 
<DayPilot:DayPilotMenu ID="DayPilotMenu1" runat="server">
  <DayPilot:MenuItem 
    Action="JavaScript" 
    JavaScript="dpc1.timeRangeSelectedCallBack(e.start, e.end, e.resource); dpc1.cleanSelection();"
    Text="Create new event (CallBack)" />
  <DayPilot:MenuItem 
    Action="JavaScript" 
    JavaScript="alert('Start: ' + e.start.toGMTString() + '\nEnd: ' + e.end.toGMTString() + '\nResource id: ' + e.resource);"
    Text="Show selection details" />
  <DayPilot:MenuItem 
    Action="JavaScript" 
    JavaScript="dpc1.cleanSelection();"
    Text="Clean selection" />
</DayPilot:DayPilotMenu>