Bookmark and Share

BetterCalendar

View a screen shot of this control.

Note: This is a reprint of an article submitted to The Code Project.

Introduction

BetterCalendar is a custom control derived from System.Web.UI.WebControls.Calendar. It is designed to correct some problems with the Calendar control and add some additional functionality.

Background

The Calendar control is quite useful but it has a few bugs and drawbacks:

The BetterCalendar control addresses these issues.

Using the code

The control is packaged in a class library with the namespace BrainJar.Web.UI.WebControls which contains only the one class, BetterCalendar.

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 @ Register directive and tags. A typical example is shown below (note the inclusion of an external style sheet).

<%@ 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 BetterCalendar is derived from the Calendar control, it inherits all of that control's properties, methods and events. In addition to those, it defines four new properties:

Note that both MixVisibleDate and MaxVisibleDate default to System.DateTime.MinValue, which is interpreted to mean that no limit is set.

Design-Time Support

BetterCalendar includes metadata for design-time support in Visual Studio .NET, so the new properties will appear in the Properties window when editing an instance of the control in Design view.

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 tag of your web form:

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