August 18, 2010

Download

• Tutorial Source Code (TutorialDayPilotSqlServer.zip, 1.19 MB) - ASP.NET Project (C# and VB.NET)

Features

• AJAX events (new, edit) open a modal popup using ModalPopupExtender 
• Data loaded from a Microsoft SQL Server database using SqlDataSource control
• Event moving/resizing handled using fast internal CallBack
• Date navigation using System.Web.UI.Calendar control

Requirements

• .NET Framework 2.0 or higher
• Microsoft SQL Server 2005 or SQL Server Express 2005 or higher
• ASP.NET AJAX Extensions 1.0 or .NET Framework 3.5

Includes

• AJAX Control Toolkit 1.0.10618
• DayPilot Pro Trial 5.7.1863

Database Structure

The attached daypilot.mdf database (for SQL Server 2005) has the following structure:

CREATE TABLE [dbo].[event](
  [id] [int] IDENTITY(1,1) NOT NULL,
  [name] [varchar](50),
  [eventstart] [datetime] NOT NULL,
  [eventend] [datetime] NOT NULL,
  [resource] [varchar](10),
  [allday] [bit] NOT NULL,
  CONSTRAINT [PK_event] PRIMARY KEY
)

Loading the Data using SqlDataSource

The event data are bound declaratively using SqlDataSource control:

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendar1" 
  runat="server" 
  DataEndField="eventend"
  DataStartField="eventstart" 
  DataTextField="name" 
  DataValueField="id" 
  DataAllDayField="allday" 
  DataSourceID="SqlDataSourceEvents">
</DayPilot:DayPilotCalendar>

<asp:SqlDataSource ID="SqlDataSourceEvents" runat="server" ConnectionString="<%$ ConnectionStrings:daypilot %>"
  SelectCommand="SELECT [id], [name], [eventstart], [eventend], [allday] FROM [event] WHERE NOT (([eventend] <= @start) OR ([eventstart] >= @end + 1))">
   <SelectParameters>
     <asp:ControlParameter Name="start" ControlID="DayPilotCalendar1" PropertyName="StartDate" />
     <asp:ControlParameter Name="end" ControlID="DayPilotCalendar1" PropertyName="EndDate" />
   </SelectParameters>
</asp:SqlDataSource>

Navigation using System.Web.UI.Calendar Control

The Calendar and the DayPilotCalendar controls are placed in two separate UpdatePanels. They are linked using Calendar.SelectionChanged event:

C#

    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstDayOfWeek(Calendar1.SelectedDate);
        // select full week in the Calendar control
        for (int i = 0; i < 7; i++)
        {
            DateTime selected = DayPilotCalendar1.StartDate.AddDays(i);
            Calendar1.SelectedDates.Add(selected);
        }
        DayPilotCalendar1.DataBind();
        UpdatePanelCalendar.Update();
    }

VB.NET

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
        DayPilotCalendar1.StartDate = DayPilot.Utils.Week.FirstDayOfWeek(Calendar1.SelectedDate)
        ' select full week in the Calendar control
        Dim i As Integer
        For i = 0 To 7 - 1 Step i + 1
            Dim selected As DateTime = DayPilotCalendar1.StartDate.AddDays(i)
            Calendar1.SelectedDates.Add(selected)
        Next
        DayPilotCalendar1.DataBind()
        UpdatePanelCalendar.Update()
    End Sub

Event Detail (Modal Popup using ModalPopupExtender)

The following declaration will open a modal window with event details:

<asp:UpdatePanel ID="UpdatePanelCalendar" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
  <ContentTemplate>
    <DayPilot:DayPilotCalendar
      ...
      EventClickHandling="PostBack"
      OnEventClick="DayPilotCalendar1_EventClick"
    />
  </ContentTemplate>
</asp:UpdatePanel>

And the code:

C#

    protected void DayPilotCalendar1_EventClick(object sender, EventClickEventArgs e)
    {
        EventDetail.ChangeMode(DetailsViewMode.Edit);
        SqlDataSourceDetail.SelectParameters["id"].DefaultValue = e.Value;
        EventDetail.DataBind();
        UpdatePanelDetail.Update();
        ModalPopup.Show();
    }

VB.NET

    Protected Sub DayPilotCalendar1_EventClick(ByVal sender As Object, ByVal e As DayPilot.Web.Ui.Events.EventClickEventArgs)
        EventDetail.ChangeMode(DetailsViewMode.Edit)
        SqlDataSourceDetail.SelectParameters("id").DefaultValue = e.Value
        EventDetail.DataBind()
        UpdatePanelDetail.Update()
        ModalPopup.Show()
    End Sub

The modal popup is achieved using a combination of several controls:

• ModalPopupExtender
• Panel (pnlPopup)
  • UpdatePanel (UpdatePanelDetail)
    • DetailsView (EventDetail)

Here is the ASPX code:

    <ajaxToolkit:ModalPopupExtender ID="ModalPopup" runat="server" TargetControlID="ButtonDummy"
        PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="pnlPopup" runat="server" Style="display: none" CssClass="modalPopup"
        Width="500px">
        <asp:UpdatePanel ID="UpdatePanelDetail" runat="server" UpdateMode="Conditional">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DayPilotCalendar1" EventName="EventMenuClick" />
            </Triggers>
            <ContentTemplate>
                <asp:DetailsView ID="EventDetail" runat="server" DefaultMode="Edit" OnItemUpdated="EventDetail_ItemUpdated"
                    DataSourceID="SqlDataSourceDetail" DataKeyNames="id" AutoGenerateEditButton="True" OnItemCommand="EventDetail_ItemCommand"
                    Width="500px" OnItemUpdating="EventDetail_ItemUpdating" AutoGenerateInsertButton="True" AutoGenerateRows="False" OnItemInserted="EventDetail_ItemInserted"
                    CssClass="detail" GridLines="None">
                    <HeaderStyle HorizontalAlign="Right" />
                    <Fields>
                        <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
                        <asp:BoundField DataField="eventstart" HeaderText="Start" SortExpression="eventstart" />
                        <asp:BoundField DataField="eventend" HeaderText="End" SortExpression="eventend" />
                        <asp:CheckBoxField DataField="allday" HeaderText="All-Day" SortExpression="allday" />
                    </Fields>
                </asp:DetailsView>
                <asp:SqlDataSource ID="SqlDataSourceDetail" runat="server" ConnectionString="<%$ ConnectionStrings:daypilot %>"
                    SelectCommand="SELECT [id], [name], [eventstart], [eventend], [allday] FROM [event] WHERE ([id] = @id)"
                    UpdateCommand="UPDATE [event] SET [name] = @name, [eventstart] = @eventstart, [eventend] = @eventend, [allday] = @allday WHERE [id] = @id"
                    InsertCommand="INSERT INTO [event] ([name], [eventstart], [eventend], [allday]) values (@name, @eventstart, @eventend, @allday)"
                    >
                    <SelectParameters>
                        <asp:Parameter Name="id" Type="Int32" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>

Main menu

• Home
• Open-Source
• Features
• Try
• Buy
• Documentation
• Tutorials
  • Database & Event Moving (Calendar)
  • Integration with Navigator (Calendar)
  • Database & Event Moving (Scheduler)
  • SQL Server, UpdatePanel, ModalPopupExtender (Calendar)
  • Hotel Room Booking (Scheduler)
  • Recurrent Events (Calendar)
  • SQL Server, UpdatePanel, ModalPopupExtender (Month)
• Compatibility
• Roadmap
• History
• Support
• Contact