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. Buy a license.

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.