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 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