|
The Calendar control is an easy to use control once you know what you are doing. It has enough features to be used in most instances where you need to display dates in calendar form.
This tutorial will show you how to implement the most basic form of the Calendar control, then adjust it to make it look like an event calendar where the days containing events are marked as such.
To test the code given in this tutorial, we will be using 2 files. 1 file will contain the HTML code, calendar.aspx. The other file will contain the C# code, calendar.aspx.cs. The editor used with this example was Microsoft Visual Studio .NET, but any editor, including notepad, can be used.
We start off with the most basic form of the control.
In calendar.aspx:
This single line will already display a fully featured calendar, with a selector for the month and each day being a link.
*** The properties ***
The first thing we can change is the appearance.
Every area of the calendar can be changed independently.
The area containing the name of the selected month, and the previous and next arrows is called the title.
ShowTitle="False": Hide the entire area.
TitleFormat="MonthYear|Month": Show the month AND the year or just the month.
TitleStyle-...: Various style settings.
The Title area has 2 smaller areas that can be controlled independently, these are the area with the link for the previous and next month and is called the NextPrev area.
ShowNextPrevMonth="False": Hide the 2 links.
NextPrevStyle-...: Various style settings.
NextMonthText="": The text to use in the link, default is ">".
PrevMonthText="": The text to use in the link, default is "<".
At the top of each column, the day of the week is listed, this is called the DayHeader area.
ShowDayHeader="False": Hide the entire area.
DayNameFormat="Short|Full|FirstTwoLetters|FirstLetter": What part of the day name to show.
FirstDayOfWeek="Default|Monday-Sunday": The default will always be set by your culture information, but this setting enables you to change that.
DayHeaderStyle-...: Various style settings.
The style of the actual day listing is controlled by the various DayStyle-... properties (like ForeColor, Font-Size,...).
There are some special style settings for some of the days displayed.
The days from weekends can be controlled by the WeekendDayStyle-... r.
The days from the next or previous month (the control will fill up a started week, for example if the month ends on wednesday, then thursday -> sunday from the next month will also be displayed) can be controlled by the OtherMonthDayStyle-... properties.
Obviously, the day that was selected has it's own settings via the SelectedDayStyle-... properties.
Changing all these properties will already give you a very nice looking calendar, but it doesn't do anything yet.
*** Language settings ***
What if I need the days in another language?
The settings for the text in the Calendar control (Day headers, month names, ...) is taken from your Culture info settings in your web.config (or application.config). However, it happens you have other settings there than you want for your Calendar control.
In calendar.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
System.Globalization.CultureInfo culture =
System.Globalization.CultureInfo.CreateSpecificCulture("en-GB");
System.Threading.Thread.CurrentThread.CurrentCulture = culture;
System.Threading.Thread.CurrentThread.CurrentUICulture = culture;
}
The code above will change the culture settings for the current page only.
In my example, i changed it to Great Britain English, the setting before the dash ("en" in this case) is the language, the rest is location information.
If you wish to change the settings for your next - and previous links at runtime, you can do it like this:
In calendar.aspx.cs:
protected Calendar calendar;
private void Page_Load(object sender, System.EventArgs e)
{
calendar.PrevMonthText = "Put something here";
calendar.NextMonthText = "Put something here";
}
*** Selecting a date ***
Now comes the time to actually do something when the user clicks on a date.
In calendar.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
calendar.SelectionChanged +=new EventHandler(calendar_SelectionChanged);
}
private void calendar_SelectionChanged(object sender, EventArgs e)
{
Page.Response.Write (((Calendar)sender).SelectedDate.ToString("dddd, dd MMMM yyyy"));
}
This example prints out the selected date (in a certain format).
You can do anything in this calendar_SelectionChanged method, like checking a database and displaying items from it, linked to the selected day.
*** Adjusting specific dates ***
Now that we have a calendar that looks like one, shows the dates and when clicked shows the information for a specific date, we want to make some of the dates appear different.
In our example, we want to create an event calendar. The dates an event will be taking place should be marked as such.
In calendar.aspx.cs:
private void Page_Load(object sender, System.EventArgs e)
{
calendar.DayRender +=new DayRenderEventHandler(calendar_DayRender);
}
private void calendar_DayRender(object sender, DayRenderEventArgs e)
{
/* Check here for whatever you want, in our case, we will mark only 1 specific date, but you can easily consult a database. */
if (e.Day.Date.Equals(DateTime.Parse("2005-11-10")))
{
e.Cell.ForeColor = ColorTranslator.FromHtml("#ff0000");
}
}
The above code will mark the 10th of November 2005 in red.
You can use any property of the Cell to distinguish the marked date.
With these simple steps, we were able to create a professional looking calendar holding the dates of our events.
Tutorial written by Hawkfield. Consult more articles on Hawkfield.Tech: Article based resource site on ASP, .NET, PHP and Google |
