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
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
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
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!