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.

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

See also