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 for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java