Display Calendar List of Events asynchronously using embedded DatePicker control

Display Calendar List of Events asynchronously using embedded DatePicker control

Posted in Code Snippets on Nov. 19, 2014 @ 12:43 PM, by khambley

Have you ever wanted to create one of those nifty little widgets that you see all over the web, where the main page displays a datepicker, and the user picks a date and the widget displays a list of events for that day, asynchronously? This might be more for beginners and there may be a more elegant way to do it, but I thought if I've been pulling my hair out trying to figure this out, maybe others are too. So, here is my solution:

 1. I created a webcalendar in the WorkArea and got that calendar_id to use in my code behind. (If you don't have any events in your webcalendar, put some "dummy" events in there for testing purposes).

 2. Then, I created the markup on the main page for my datepicker and list of events. (See CalendarWidget.aspx). I'll walk you through my code here.

 3. First, we'll set up our AJAX (async) panel which will wrap around our entire widget. Drag a UpdatePanel control from the AJAX extentions toolbox on the left hand side in VS. If you don't have that, you will have to load in the AJAX extensions controls to use in VS.

 4. In between the UpdatePanel control, insert a <ContentTemplate> tag. This tag will contain our markup for the datepicker.

 5. Type in your HTML markup, whatever that may be on your main page. We are using bootstrap3 on our site, so I included all the divs and classes to contain my datepicker.

 6. Inside your markup, drag an Ektron datepicker control from the Ektron UI controls in the toolbox on the left hand side. Be sure to add the attribute DisplayMode="Inline". This removes the textfield from the control and displays the calendar by embedding it into the web page, instead of a pop-up.

 7. Next, drag a standard asp Button control from the toolbox under your datepicker, add an onclick event to the button and don't forget to add the Text attribute to label your button.

 8. Now, create another updatePanel under the first one. Add a <ContentTemplate> tag inside the UpdatePanel. To display today's date, I used a literal control from asp's standard control box. Then, I added HTML to display "List of Events" under the date.

 9. Next, drag a listview control under the literal control you just added. ListViews are under the Data tab in the toolbox. Add the ID="lstWebCal" and ItemPlaceholderID="phLstWebCal" to the Listview control. Add a <LayoutTemplate> tag inside the ListView control, drap a PlaceHolder control inside the LayoutTemplate tags. Add ID="phLstWebCal" to the placeholder control. Placeholders are under the Standard tab in the toolbox.

 10. Now, add an <ItemTemplate> tag under the LayoutTemplate tag you just added. Inside the ItemTemplate tag, place your markup for the list of items. Mine is a simple list with Name, which displays the title and the quicklink to the event details page. Starts, which displays the date and time of the event, and Location which displays the Physical Location of the event. We will databind all the Eval statements in the code behind. Ok, so that's it for the markup, now on to the code behind.

 

11. To display the list of TODAY's events, I created a function called GetWebCalList() and called that in Page_Load event. Then I wrote the function. I commented the code so it's pretty self-explanatory. A couple of notes: I used the Date only so it would display events from Today's Date 12:00AM and then I add one day to endDate which is 12:00AM of the next day. This is important, if you use DateTime.Now, it uses the current day and TIME which if it's 3:30 PM, it will miss events that happened earlier in the day. To display the date and time in the top of the widget, I simply used the Literal I created and added Text to it today.ToString("D") which displays the long form, date and time.

I used the GetEventOccurenceList method because it will display both reoccuring events and individual events, almost all our events are reoccuring so I wanted to be safe and cover both types of events. Then, I databind the Listview to the WebEvent List.

 12. Now, to display events the user picks, I wrote up the same basic code in the UpdateButton_Click event except I get the date from the datepicker, uxStartDate.Text. I convert that into a DateTime object. So when the users clicks the UpdateButton, it updates only that panel, asynchronously. I probably could have combined some of that code into functions without repeating, but for learning purposes, I wanted you to see what each function was doing. Also, I couldn't figure out how to display a message when the list has no objects in it. I tried checking for null and it wasn't working, maybe someone else can figure that out and post it here.

Viola! You're done! Enjoy!

<div class="col-lg-6 col-md-6 col-sm-8">
            <div class="row row7a white-bg">
                <%--<asp:ScriptManager ID="MainScriptManager" runat="server"></asp:ScriptManager>--%>
                <asp:UpdatePanel ID="pnlDatePicker" runat="server">
                    <ContentTemplate>
                        <div class="widget-heading dark-gray-bg">
                        <i class="fa fa-calendar-o fa-fw"></i> Event Calendar</div>
                        <div class="col-lg-6 col-md-6 col-sm-6 webCalendarMain"> 
                            <div class="nav-main white-bg">
                                <ektronUI:Datepicker ID="uxStartDate" runat="server" DisplayMode="Inline">
                                </ektronUI:Datepicker><br /><br />
                                <cc3:Button 
                                    ID="UpdateButton" 
                                    runat="server" 
                                    CssClass="center-block" 
                                    OnClick="UpdateButton_Click" Text="Update List" />
                                <br />
                                <asp:Label ID="dateSelected" runat="server"></asp:Label>
                            </div>
                        </div>
                     </ContentTemplate>
                </asp:UpdatePanel>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <asp:UpdatePanel ID="pnlWebCalList" runat="server">
                        <ContentTemplate>
                            <div class="nav-main white-bg">
                                <h4><asp:Literal ID="uxToday" runat="server"></asp:Literal></h4>
                                <h4>List of Events</h4><br />
                                <asp:Literal ID="uxNullMessage" runat="server"></asp:Literal>
                                <asp:ListView ID="lstWebCal" runat="server" ItemPlaceholderID="phLstWebCal">
                                    <LayoutTemplate>
                                        <asp:PlaceHolder ID="phLstWebCal" runat="server"></asp:PlaceHolder>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <div class="webCalEventItem">
                                            Name: <a href="../<%# Eval("Quicklink") %>">
                                                  <%# Eval("DisplayTitle") %></a><br />
                                            Starts: <%# Eval("EventStart") %>
                                            Location: <%# Eval("Location") %><br />
                                            <a href="../<%# Eval("Quicklink") %>">See More...</a>
                                        </div>
                                    </ItemTemplate>
                                </asp:ListView>
                                <asp:DataPager 
                                    ID="DataPager3" 
                                    runat="server" 
                                    PagedControlID="lstWebCal" 
                                    PageSize="3"></asp:DataPager>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ektron.Site;
using Ektron.Cms.Common;
using Ektron.Cms.Common.Calendar;
using Ektron.Cms.Content;
using Ektron.Cms.Framework.Content;
using Ektron.Cms.Framework.Calendar;
using Ektron.Cms.Framework.UI.Controls;
using Ektron.Cms.PageBuilder;

public partial class Source_Wireframes_HomePage4 : PageBuilder
{
   protected void Page_Load(object sender, EventArgs e)
    {
        GetWebCalList();
    }
    private void GetWebCalList() 
    {
        //Create a new WebCalendarManager
        WebEventManager webeventmanager = new WebEventManager();
        //Get today's date
        DateTime today = DateTime.Now;

        //Parse today's date and get only date, not time.
        DateTime dateOnly = today.Date;

        //Display today's date in as a string in Literal
        uxToday.Text = today.ToString("D");

        //Add one day to today's date to display ALL events for the day
        DateTime endDate = dateOnly.AddDays(1);

        //Create a list that gets events for today
        List<WebEventData> webeventList = webeventmanager.GetEventOccurrenceList(133, dateOnly, endDate);

        //Display the WebEvent Details in a Listview
        lstWebCal.Visible = true;
        lstWebCal.DataSource = webeventList;
        lstWebCal.DataBind(); 
        
    }
    protected void UpdateButton_Click(object sender, EventArgs e)
    {
        WebEventManager webeventManager = new WebEventManager();
        String st = uxStartDate.Text;
        DateTime startdatetime = DateTime.Parse(st);
        DateTime startdateOnly = startdatetime.Date;
        uxToday.Text = startdateOnly.ToString("D");
        DateTime endDate = startdateOnly.AddDays(1);
        List<WebEventData> webeventList = webeventManager.GetEventOccurrenceList(133, startdateOnly, endDate);
        //Display the WebEvent Details in a Listview
        lstWebCal.Visible = true;
        lstWebCal.DataSource = webeventList;
        lstWebCal.DataBind();
    }
}

Comments (4)

  • If you add something like <EmptyDataTemplate><p>Sorry, there are no calendar events to display.</p></EmptyDataTemplate> to your <asp:ListView> you can effectively handle empty List<WebEventData> when there are no events returned.

    11/19/2014 1:40:17 PM
    • Posted by Bill Napier
  • Thanks, Bill! So, what would the code behind look like for something like that? I tried:

    if (webeventList != null) {
    aspLiteral.Text = "No events scheduled for today";
    }
    And it doesn't display anything. Should I put my literal in the EmptyDataTemplate inside the Listview control?
    11/20/2014 3:02:37 PM
    • Posted by khambley
  • Actually, it's even easier than that. So easy, it's hard to believe :-).

    The ListView by virtue of being a databound control is 'aware' when it is bound to a List<WebEventData> with a count of zero. Just add the <EmptyDataTemplate> with static HTML, you don't have to check for null or the count of the List<WebEventData>. For testing purposes, try passing in a different id for the web calendar. (Either an id which doesn't exist or an id for another web calendar that has no events.) When you do, you should see the <EmptyDataTemplate> do its magic.

    To learn more, check out its MSDN page: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.emptydatatemplate%28v=vs.110%29.aspx.

    11/20/2014 3:35:36 PM
    • Posted by Bill Napier
  • OMG, it works. I just assumed I had to program the logic. That's what I get for assuming something is "dumb" hehe. Thank you, Thank you!

    11/20/2014 3:47:31 PM
    • Posted by khambley

Add a Comment

Please sign in or register to make a comment on this submission.

What Do You Think of our New Design?

    

Have more to say? We’d love to hear it!