Sample Project

The sample project includes:

Features

  • ASP.NET Scheduler 

  • Data stored in an SQL Server database (LocalDB)

  • Date navigator for easy date switching (bound automatically to the 

  • Modal dialog created using ModalPopupExtender and UpdatePanel for reservation creating and editing

Note: The ModalPopupExtender is now an obsolete technology. We recommend using DayPilot Modal for modal dialogs - see JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog.

License

Licensed for testing and evaluation purposes. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for ASP.NET WebForms.

Scheduler and UpdatePanel

The ASP.NET scheduler itself must be placed inside an UpdatePanel control so it can be refreshed from the server side.

  • Set UpdateMode to "Conditional" and ChildrenAsTriggers to "false" to prevent unnecessary scheduler refreshing.

<asp:UpdatePanel ID="UpdatePanelScheduler" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
  <ContentTemplate>
    <DayPilot:DayPilotScheduler
        runat="server" 
        DataEndField="eventend"
        DataStartField="eventstart" 
        DataTextField="name" 
        DataIdField="id" 
        DataResourceField="resource"
        ID="DayPilotScheduler1"
        OnCommand="DayPilotScheduler1_Command"
        TimeRangeSelectedHandling="PostBack"
        EventClickHandling="PostBack" 
        OnEventClick="DayPilotScheduler1_EventClick" 
        OnTimeRangeSelected="DayPilotScheduler1_TimeRangeSelected"
        >
        <TimeHeaders>
            <DayPilot:TimeHeader GroupBy="Day" Format="dddd MMMM d, yyyy" />
            <DayPilot:TimeHeader GroupBy="Hour" Format="%h" />
        </TimeHeaders>
        </DayPilot:DayPilotScheduler>
  </ContentTemplate>
</asp:UpdatePanel>

Creating a New Reservation using ModalPopupExtender

scheduler asp.net create modal

Enable drag and drop time range selecting using TimeRangeSelectedHandling property and create a new TimeRangeSelected event handler:

<DayPilot:DayPilotScheduler

  ...
  OnEventClick="DayPilotScheduler1_EventClick" 
  OnTimeRangeSelected="DayPilotScheduler1_TimeRangeSelected"
  ...

  />

Add TimeRangeSelected event handler (DayPilotScheduler1_TimeRangeSelected).

C#

protected void DayPilotScheduler1_TimeRangeSelected(object sender, TimeRangeSelectedEventArgs e)
{
  // populate the fields
  TextBoxCreateName.Text = "New Event";
  TextBoxCreateStart.Text = e.Start.ToString("M/d/yyyy HH:mm");
  TextBoxCreateEnd.Text = e.End.ToString("M/d/yyyy HH:mm");
  DropDownCreateResource.DataSource = DbSelectResources();
  DropDownCreateResource.DataTextField = "name";
  DropDownCreateResource.DataValueField = "id";
  DropDownCreateResource.SelectedValue = e.Resource;
  DropDownCreateResource.DataBind();

  UpdatePanelCreate.Update();
  ModalPopupCreate.Show();
}

VB

Protected Sub DayPilotScheduler1_TimeRangeSelected(ByVal sender As Object, ByVal e As TimeRangeSelectedEventArgs)
  ' populate the fields
  TextBoxCreateName.Text = "New Event"
  TextBoxCreateStart.Text = e.Start.ToString("M/d/yyyy HH:mm")
  TextBoxCreateEnd.Text = e.End.ToString("M/d/yyyy HH:mm")
  DropDownCreateResource.DataSource = DbSelectResources()
  DropDownCreateResource.DataTextField = "name"
  DropDownCreateResource.DataValueField = "id"
  DropDownCreateResource.SelectedValue = e.Resource
  DropDownCreateResource.DataBind()

  UpdatePanelCreate.Update()
  ModalPopupCreate.Show()
End Sub

Create the new reservation modal dialog:

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

Notes:

  • The modal dialog is created using four controls (ButtonDummyCreate, ModalPopupCreate, PanelPopupCreate, UpdatePanelCreate).

  • The dummy Button control is used for ModalPopupCreate.TargetControlID (it is not possible to bind the ModalPopupExtender directly to the calendar).

  • The PanelPopupCreate control must be hidden using style="display:none". Otherwise it would be visible on the initial page load.

Editing a Reservation using ModalPopupExtender

scheduler asp.net edit modal

Enable event clicking using EventClickHandling property and create a new EventClickHandling event handler.

Because of the UpdatePanel, EventClickHandling must be set to "PostBack".

<DayPilot:DayPilotScheduler
  ..
  EventClickHandling="PostBack" 
  OnEventClick="DayPilotScheduler1_EventClick" 
  ..
  />

Add EventClick event handler (DayPilotScheduler1_EventClick).

C#

protected void DayPilotScheduler1_EventClick(object sender, EventClickEventArgs e)
{
  // populate the fields
  TextBoxEditName.Text = e.Text;
  TextBoxEditStart.Text = e.Start.ToString("M/d/yyyy HH:mm");
  TextBoxEditEnd.Text = e.End.ToString("M/d/yyyy HH:mm");
  HiddenEditId.Value = e.Value;
  DropDownEditResource.DataSource = DbSelectResources();
  DropDownEditResource.DataTextField = "name";
  DropDownEditResource.DataValueField = "id";
  DropDownEditResource.SelectedValue = e.ResourceId;
  DropDownEditResource.DataBind();

  UpdatePanelEdit.Update();
  ModalPopupEdit.Show();
}

VB

Protected Sub DayPilotScheduler1_EventClick(ByVal sender As Object, ByVal e As EventClickEventArgs)
  ' populate the fields
  TextBoxEditName.Text = e.Text
  TextBoxEditStart.Text = e.Start.ToString("M/d/yyyy HH:mm")
  TextBoxEditEnd.Text = e.End.ToString("M/d/yyyy HH:mm")
  HiddenEditId.Value = e.Value
  DropDownEditResource.DataSource = DbSelectResources()
  DropDownEditResource.DataTextField = "name"
  DropDownEditResource.DataValueField = "id"
  DropDownEditResource.SelectedValue = e.ResourceId
  DropDownEditResource.DataBind()

  UpdatePanelEdit.Update()
  ModalPopupEdit.Show()
End Sub

Create the reservation editing modal dialog:

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

...

<asp:Button ID="ButtonDummyEdit" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupEdit" runat="server" TargetControlID="ButtonDummyEdit"
  PopupControlID="PanelPopupEdit" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PanelPopupEdit" runat="server" CssClass="modalPopup" style="display:none" Width="500px">
  <asp:UpdatePanel ID="UpdatePanelEdit" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
      <h2>Edit Reservation</h2>
      
      <div>
          <asp:TextBox ID="TextBoxEditName" runat="server"></asp:TextBox>
      </div>

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

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

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

      <asp:HiddenField ID="HiddenEditId" runat="server" />

      <asp:Button id="ButtonEditSave" runat="server" Text="Save" OnClick="ButtonEditSave_Click" />
      <asp:LinkButton id="ButtonEditCancel" runat="server" Text="Cancel" OnClick="ButtonEditCancel_Click" />
      </ContentTemplate>
  </asp:UpdatePanel>
</asp:Panel>

Notes:

  • The modal dialog is created using four controls (ButtonDummyEdit, ModalPopupEdit, PanelPopupEdit, UpdatePanelEdit).

  • The dummy Button control is used for ModalPopupEdit.TargetControlID (it is not possible to bind the ModalPopupExtender directly to the calendar).

  • The PanelPopupEdit control must be hidden using style="display:none". Otherwise it would be visible on the initial page load.