Sometimes you need to dig in a little to get things to work the way that you want.

I’m working on an events calendar and I need specific behavior for the home page display.

When the page initially renders, I want to display a list of events in the current month.

Then, I want to modify the display based on the user’s interaction.

  • If the user picks a date then I want to display only the events on that day.
  • If the user navigates to a different month I want to display the events for that month, even if they previously choose a specific day.

To do this I need to do the equivalent of a SQL SELECT based on EITHER the Day or the Month depending on the users choices.

7-2-2010 8-40-19 AM

The code for this was easy but figuring out exactly what to do in relation to the controls behavior took a few minutes to straighten out.

The Calendar Control has a SelectedDate property but until a user chooses a specific DAY it’s values is 01/01/0001. (Meaning if you evaluate the properly in the Load Event it has not been set to anything.)

Clicking on the next or previous month links do not change the SelectedDate property. If the user never selected a date it’s still 01/01/0001 and if the user has previously selected a date, changing the current month has no effect on the SelectedData property either.

It’s easy to understand why this is the case if you view the Calendar Control as a “Date Picker”.

My answer came in leveraging the various events thrown by the control.

The Calendar has a VisibleDate property that contains a DateTime object who’s value is set to the first day of the Month being displayed in the calendar control. This property is updated whenever the user changes the month whether they have selected a specific day or not.

Unfortunately, the VisibleDate property is not set by default. (Meaning if you evaluate the properly in the Load Event it has not been set to anything.)

Here is the simple code I’m using to get the date “type” (Month or Day) and the value to use for the SQL Parameter based on the state of the control and the user’s interaction.

Code Snippet
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7.  
  8. namespace CalendarDrivenSelect
  9. {
  10.     public partial class _Default : System.Web.UI.Page
  11.     {
  12.         DateTime usableDate;
  13.  
  14.         protected void Page_Load(object sender, EventArgs e)
  15.         {
  16.             if (!IsPostBack)
  17.             {
  18.                 usableDate = SelectCalendar.TodaysDate;
  19.                 TextBox1.Text = usableDate.Month.ToString();
  20.             }
  21.         }
  22.  
  23.         protected void SelectCalendar_SelectionChanged(object sender, EventArgs e)
  24.         {
  25.             usableDate = SelectCalendar.SelectedDate;
  26.             TextBox1.Text = usableDate.ToString();
  27.         }
  28.  
  29.         protected void SelectCalendar_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
  30.         {
  31.             usableDate = SelectCalendar.VisibleDate;
  32.             TextBox1.Text = usableDate.Month.ToString();
  33.         }
  34.     }
  35. }

 

If the page is not a postback, I use the Control’s TodaysDate value then whenever the user makes a change I take action in the event handler for the “type” of change that they make. If they select a specific date, I extract that date. If they later select a different month to display I extract that Month and that selection overrides the previously selected date.

In the code above I’m just populating a text box but in the application code I will use that value to set the actual Events SELECT criteria.

A simple solution but not immediately obvious.

Hope it helps someone.

Technorati Tags: ,,
Mega World News Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google Yahoo Buzz StumbleUpon Weekend Joy