|
|||||||||||||||||||||
|
|||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
Introduction
BackgroundThe
The Using the codeThe control is packaged in a class library with the namespace Within a Visual Studio web project, you can simply add a reference to the BrainJar.Web.UI.WebControls.dll file. You can then edit your web form in HTML view and add the appropriate <%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false"
Inherits="Demo.WebForm2" %>
<%@ Register TagPrefix="BrainJar" Namespace="BrainJar.Web.UI.WebControls"
Assembly="BrainJar.Web.UI.WebControls"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema
content="http://schemas.microsoft.com/intellisense/ie5">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="Styles.css" type="text/css" rel="stylesheet">
</HEAD>
<body>
<form id="WebForm1" method="post" runat="server">
<h1>BetterCalendar Control Demo</h1>
<BrainJar:BetterCalendar id="BetterCalendar1" runat="server">
<DayStyle CssClass="calendarDay"></DayStyle>
<DayHeaderStyle CssClass="calendarDayHeader"></DayHeaderStyle>
<NextPrevStyle CssClass="calendarNextPrev"></NextPrevStyle>
<OtherMonthDayStyle CssClass="calendarOtherMonthDay">
</OtherMonthDayStyle>
<SelectedDayStyle CssClass="calendarSelectedDay"></SelectedDayStyle>
<SelectorStyle CssClass="calendarSelector"></SelectorStyle>
<TitleStyle CssClass="calendarTitle"></TitleStyle>
<TodayDayStyle CssClass="calendarTodayDay"></TodayDayStyle>
<WeekendDayStyle CssClass="calendarWeekendDay"></WeekendDayStyle>
</BrainJar:BetterCalendar>
</form>
</body>
</HTML>
You can also add the control to the toolbox in the usual way (in Design mode, right-click on the toolbox, select "Customize Toolbox...", select the ".NET Framework Components" tab, press the "Browse" button and select the BrainJar.Web.UI.WebControls.dll file). Since
Note that both Design-Time Support
While it's not necessary in order to use the control, the source code includes a file named BrainJar.xsd that can be used to remove those embarrassing red squiggly lines when editing the control in HTML view. To use the schema, copy BrainJar.xsd to your vs_install_directory\Common7\Packages\schemas\xml directory (where vs_install_directory is the directory Visual Studio .NET was installed in, usually C:\Program Files\Microsoft Visual Studio .NET). Then add a declaration for it in the <body xmlns:BrainJar="urn:http://schemas.brainjar.com/AspNet/WebControls">
To add Intellisense support for the control when editing your code-behind, you can copy the BrainJar.Web.UI.WebControls.xml file from the project source (in the \debug directory) to your project's \bin directory. The Demo ProjectSeveral features of the Both calendars are styled using only CSS classes defined in an external style sheet (the Styles.css
file). Different styles are used for weekend days, days outside the
current month, selected days, etc. You can immediately see how the In the code-behind, the private void Page_Load(object sender, System.EventArgs e)
{
// On the initial load, set the min and max view date to 90 days
// before and after today's date, respectively.
if (!this.IsPostBack)
{
this.BetterCalendar1.MinVisibleDate = DateTime.Today.AddDays(-90);
this.BetterCalendar1.MaxVisibleDate = DateTime.Today.AddDays(+90);
}
}
If you page through the months on the For both calendars, a private void Calendar_DayRender(object sender,
System.Web.UI.WebControls.DayRenderEventArgs e)
{
// Make days outside the view range nonselectable.
if ((this.BetterCalendar1.MinVisibleDate != DateTime.MinValue &&
e.Day.Date < this.BetterCalendar1.MinVisibleDate) ||
(this.BetterCalendar1.MaxVisibleDate != DateTime.MinValue &&
e.Day.Date > this.BetterCalendar1.MaxVisibleDate))
e.Day.IsSelectable = false;
}
By navigating to the month at either end of the date range, can see
that both calendars contain the same non-selectable days. Now, try
clicking on the month selector (the ">>" link next to the days
header). The If you select the same month on the If you'd prefer to have Points of InterestControl RenderingMost of the code for For the most part, the control is built using existing controls from Value Checking (or not)No value checking is done when the However, even if Post Back EventsThe javascript:__doPostBack('Calendar1','1646')
for the URI. In order to use the same scheme in private static readonly DateTime DayCountBaseDate = new DateTime(2000, 1, 1);
//
// Returns the number of days between the given DateTime value and the
// base date.
//
private int DayCountFromDate(DateTime date)
{
return ((TimeSpan) (date - BetterCalendar.DayCountBaseDate)).Days;
}
//
// Returns a DateTime value equal to the base date plus the given number
// of days.
//
private DateTime DateFromDayCount(int dayCount)
{
return BetterCalendar.DayCountBaseDate.AddDays(dayCount);
}
For the next and previous month post back links, the argument is prefixed with the letter 'V': javascript:__doPostBack('Calendar1','V1613')
which means "change the visible month to June 1, 2004". For the post back links to select a week or the entire month, the argument begins with the letter 'R' followed by the day count number, and finally, two digits representing the number of total number of days to be selected: javascript:__doPostBack('Calendar1','R164607')
which means "select seven consecutive days starting with July 4, 2004". The Storing Non-selectable DatesWithin the After control returns from the event handler, the // Create a list for storing nonselectable dates.
ArrayList nonselectableDates = new ArrayList();
for (...)
for (...)
...
// Create a CalendarDay and a TableCell for the date.
CalendarDay day = this.Day(date);
TableCell cell = this.Cell(day);
// Raise the OnDayRender event.
this.OnDayRender(cell, day);
// If the day was marked nonselectable, add it to the list.
if (!day.IsSelectable)
nonselectableDates.Add(day.Date.ToShortDateString());
The obvious thing to do would be to save this list to the view
state. However, since the control is being rendered, this will not work
because the control's Instead, the data is stored in a hidden field added to the page. A
couple of methods are defined to handle the conversion of the dates in
the //
// Saves a list of dates to the hidden form field.
//
private void SaveNonselectableDates(ArrayList dates)
{
// Build a string array by converting each date to a day count
// value.
string[] list = new string[dates.Count];
for (int i = 0; i < list.Length; i++)
list[i] =
this.DayCountFromDate(DateTime.Parse(dates[i].ToString())).ToString();
// Get the hidden field name.
string fieldName = this.GetHiddenFieldName();
// For the field value, create a comma-separated list from the day
// count values.
string fieldValue =
HttpUtility.HtmlAttributeEncode(String.Join(",", list));
// Add the hidden form field to the page.
this.Page.RegisterHiddenField(fieldName, fieldValue);
}
//
// Returns a list of dates stored in the hidden form field.
//
private ArrayList LoadNonselectableDates()
{
// Get the value stored in the hidden form field.
string fieldName = this.GetHiddenFieldName();
string fieldValue = this.Page.Request.Form[fieldName];
// Extract the individual day count values.
string[] list = fieldValue.Split(',');
// Convert those values to dates and store them in an array list.
ArrayList dates = new ArrayList();
foreach (string s in list)
dates.Add(this.DateFromDayCount(Int32.Parse(s)));
return dates;
}
//
// Returns the name of the hidden field used to store nonselectable
// dates on the form.
//
private string GetHiddenFieldName()
{
// Create a unique field name.
return String.Format("{0}_NonselectableDates", this.ClientID);
}
Within the ...
this.SelectedDates.Clear();
this.SelectedDates.SelectRange(date, date.AddDays(n - 1));
// If SelectAllInRange is false, remove any dates found
// in the nonselectable date list.
if (!this.SelectAllInRange)
{
ArrayList nonselectableDates = this.LoadNonselectableDates();
foreach(DateTime badDate in nonselectableDates)
this.SelectedDates.Remove(badDate);
}
History
| ||||||||||||||||||||
