HOWTO: Open a pop-up window with event details

Applies to: DayPilotCalendar

1. Set the EventClickHandling property to JavaScript and add your JavaScript handling code to EventClickJavaScript property:

<daypilot:daypilotcalendar 
  id="DayPilotCalendar1" 
  runat="server" 
  dataendfield="end"
  datastartfield="start" 
  datatextfield="name" 
  datavaluefield="id" 
  Days="7" 
  EventClickHandling="JavaScript" 
  EventClickJavaScript="openPopup(e);">
  </daypilot:daypilotcalendar>

2. Create the openPopup JavaScript function:

 <script type="text/javascript">
  function openPopup(e) {
    window.open('PopupDetail.aspx?id=' + e.value() + '&tag=' + e.tag(), 
        'PopupDetail','width=400,Height=400,top=200,left=200');
  }
</script>

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

<daypilot:daypilotcalendar 
  id="DayPilotCalendar1" 
  runat="server" 
  dataendfield="end"
  datastartfield="start" 
  datatextfield="name" 
  datavaluefield="id" 
  Days="7" 
  EventClickHandling="JavaScript" 
  EventClickJavaScript="window.open('PopupDetail.aspx?id=' + e.value() + '&tag=' + e.tag(), 
       'PopupDetail','width=400,Height=400,top=200,left=200');">
  </daypilot:daypilotcalendar>

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

PopupDetail.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupDetail.aspx.cs" 
    Inherits="Test_PopupDetail" %>
<!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>
        Event name: <%# eventData["name"] %><br />
        Event id:  <%# eventData["id"] %><br />
        Event start:  <%# eventData["start"] %><br />
        Event end:  <%# eventData["end"] %><br />
    </div>
    </form>
</body>
</html>

PopupDetail.aspx.cs:

using System;
using System.Data;
 
public partial class Test_PopupDetail : System.Web.UI.Page
{
    protected DataRow eventData;
    protected void Page_Load(object sender, EventArgs e)
    {
        eventData = loadFromDatabase();
        DataBind();
    }
    private DataRow loadFromDatabase()
    {
        // this is just a simulation used in the demo page
        if (Session["Popup"] == null)
            Session["Popup"] = DataGenerator.GetData();
        DataTable dt = (DataTable)Session["Popup"];
        return dt.Rows.Find(Request.QueryString["id"]);
    }
} 

5. It's also possible to pass the event data directly. For more information about the DayPilotCalendar.Event object (e) see the client-side reference (DayPilotCalendar.Event).

 <script type="text/javascript">
  function openPopup(e) {
    window.open('PopupDetail.aspx?id=' + e.value() + '&name=' + e.name() + 
          '&start=' + DayPilotCalendar.dateSortable(e.start()) + 
          '&end=' + DayPilotCalendar.dateSortable(e.end()), 
      'PopupDetail','width=400,Height=400,top=200,left=200');
  }
</script>

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java