Tutorial: Scheduler and ModalPopupExtender (ASP.NET, C#, VB.NET)

Tutorial:

• Scheduler and ModalPopupExtender (ASP.NET, C#, VB.NET, SQL Server)

This tutorial shows how to use the DayPilot scheduler ASP.NET control with modal dialogs created using ModalPopupExtender from Ajax Control Toolkit.

Features:

• ASP.NET Scheduler 
• Date navigator for easy date switching (bound automatically to the 
• Modal dialog created using ModalPopupExtender and UpdatePanel for reservation creating and editing
• Reservation data stored in an SQL Server database (LocalDB)
• C# source code of the sample
• VB.NET source code of the sample
• Visual Studio 2012 solution

Example (a modal popup for creating a reservation):

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

...

<asp:Button ID="ButtonDummyCreate" runat="server" Style="display: none" />

<ajaxToolkit:ModalPopupExtender ID="ModalPopupCreate" runat="server" TargetControlID="ButtonDummyCreate"
  PopupControlID="PanelPopupCreate" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PanelPopupCreate" runat="server" CssClass="modalPopup" style="display:none" Width="500px">
  <asp:UpdatePanel ID="UpdatePanelCreate" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
      <h2>Create Reservation</h2>
      
      <div>
          Name:<br />
          <asp:TextBox ID="TextBoxCreateName" runat="server"></asp:TextBox>
      </div>

      <div>
          Resource: <br />
          <asp:DropDownList ID="DropDownCreateResource" runat="server"></asp:DropDownList>
      </div>

      <div>
          Start:<br />
          <asp:TextBox ID="TextBoxCreateStart" runat="server"></asp:TextBox>
      </div>

      <div>
          End:<br />
          <asp:TextBox ID="TextBoxCreateEnd" runat="server"></asp:TextBox>
      </div>

      <asp:Button id="ButtonCreateSave" runat="server" Text="Save" OnClick="ButtonCreateSave_Click" />
      <asp:LinkButton id="ButtonCreateCancel" runat="server" Text="Cancel" OnClick="ButtonCreateCancel_Click" />
      </ContentTemplate>
  </asp:UpdatePanel>
</asp:Panel>

The sample Visual Studio 2012 solution is available for download.