DayPilot - Open-Source Outlook-Like Calendar/Scheduling Control for ASP.NET
Try the online demo: AJAX-style event creating, moving, resizing, and deleting • Context menu • Day view • Work week view • Week view • Month view • Horizontal/vertical resources view • PostBack/AJAX/JavaScript event handling • Binding to XmlDataSource, SqlDataSource, DataTable, ArrayList • Custom event formatting • UpdatePanel compatibility

HOWTO: Open a pop-up window for entering new event

Applies to: DayPilotCalendar

1. Set the TimeRangeSelectedHandling property to JavaScript and add your JavaScript handling code to TimeRangeSelectedJavaScript property:

<daypilot:daypilotcalendar 
id="DayPilotCalendar1"
runat="server"
dataendfield="end"
datastartfield="start"
datatextfield="name"
datavaluefield="id"
Days="7"
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="openPopup(start, end, column);">
</daypilot:daypilotcalendar>

2. Create the openPopup JavaScript function:

 <script type="text/javascript">
function openPopup(start, end, column) {
   window.open('PopupNew.aspx?start=' + DayPilot.ds(start) + '&end=' + DayPilot.ds(end) + '&column=' + column,
'PopupDetail','width=400,Height=400,top=200,left=200');
}
</script>

DayPilot.ds() is a helper function that produces a sortable date string from a Date object (the same as DateTime.ToString("s")).

3. You can also write the JavaScript code directly into the TimeRangeSelectedJavaScript property:

<daypilot:daypilotcalendar 
id="DayPilotCalendar1"
runat="server"
dataendfield="end"
datastartfield="start"
datatextfield="name"
datavaluefield="id"
Days="7"
EventClickHandling="JavaScript"
EventClickJavaScript="window.open('PopupNew.aspx?start=' + DayPilot.ds(start) + '&end=' + DayPilot.ds(end) + '&column=' + column,

'PopupDetail','width=400,Height=400,top=200,left=200');"
>
</daypilot:daypilotcalendar>

4. The PopupNew.aspx page should read the event details from a database.

PopupNew.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupNew.aspx.cs" 
Inherits="PopupNew" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Event detail</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
New event<br />
        Event name: <asp:TextBox runat="server" ID="textName" /><br />
        Event start:  <asp:TextBox runat="server" ID="textStart" Text='Request.QueryString["start"]' /><br />
        Event end:  <asp:TextBox runat="server" ID="textEnd" Text='Request.QueryString["end"]' /><br />
        Event column id:  <asp:TextBox runat="server" ID="textColumnId" Text='Request.QueryString["column"]' /><br />
<input type='button' value='OK' onclick='createEvent()' />
    </div>
    </form>
</body>
</html>

Note: You should replace Request.QueryString calls with a code that validates (and formats) the query string first.

5. After clicking the OK you need to submit the data back to the server. It can be done by calling timeRangeSelectedCallBack function. That will submit the new event data (you will have to handle TimeRangeSelected event on the server and create the new event there) and refresh the calendar.

function createEvent() {
  var data = encodeURIComponent(document.getElementById('textName').value) + '&' + 
encodeURIComponent(document.getElementById('textColumnId').value);
var start = document.getElementById('textStart').value;
var end = document.getElementById('textEnd').value;



window.opener.DayPilotCalendar1.timeRangeSelectedCallBack(start, end, data);
window.close();
}

The start and end variables can be Date objects or strings in sortable format.

See also

http://forums.daypilot.org/Topic.aspx/57/pass_values_from_time_cell_and_get_values_back_from_a_page

DayPilot Pro is an advanced DayPilot edition. You can check a thumbnail overview of the most interesting features. There is also an online demo with all the features working (including the AJAX features). If you want to test the design-time support and API you can download a fully functional trial version. And if you like it, you can buy a full version with source code and 12 months of upgrades and support (with a 30-days money back guarantee).

DayPilot Lite is a do-it-yourself open-source edition of DayPilot. Although it misses some DayPilot Pro features, there are thousands of developers using it to build calendar, personal scheduling, and resource booking applications.

Questions or suggestions? Try DayPilot forums or contact us directly.