Calendar Control

  • Display calendar for either Current month or a selected month.
  • Display as a date picker
  • Display as a schedule.

Post Backs:

  • SelectionChanged: when user select a new day.
  • VisibleMonthChange: when user select a different month.
  • DayRender: allows adding text or controls to the day being rendered. Handy to display appointments or other interesting staffs.
Properties Description
Caption Text that is rendered in the Calendar
DayHeaderStyle Style to be added to the day of the week
DayNameFormat Full, Short, Shortest, FirstLetter, FirstTwoLetters
DayStyle Default style for calendar day
FirstDayOfWeek Displayed as first column of the calendar control
Next MonthText Default “>”. Only works when ShowNextPrevMonth property is true.
NextPrevFormat Toll to set format of the next previous navigation control. (FullMonth, ShortMonth(Jan)etc.
OtherMonthDayStyle Style for the days that are not in the current month.
PrevMonthText “<” etc.
SelectedDate Date selected or set by user
SelectedDates All dates selected by user. Collection of DateTime values. If Calendar.SelectionMode.Day then, allows only one date selection.
SelectedDayStyle The Style of the selected day
SelectionMode Day, DayWeek, DayWeekMonth or None
SelectMonthText “>>”
SelectorStyle Style of week or month selector
ShowDayHeader Whether the day header to displayed.
ShowGridLines Whether grid lines to be displayed
ShowNextPrevMonth Whether Next Prev month to display
ShowTitle Whether title to be displayed
TitleFormat Month or YearMonth
TitleStye Style for title
TodayDayStyle Style of today
TodaysDate Today’s Date
UseAccessibleHeader True, Generates “<th>” for day header.
VisibleDate Which Month to display in the calendar.
WeekendDayStyle Style of weekend

The Example:

calender


ASPX CODE:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title>Calender</title>

<link href=”StyleSheets/Calender.css” rel=”Stylesheet” type=”text/css” />

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<h1>

Calender Control as Secheular:

<hr style=”margin-top: 0px; height: -5px;” />

</h1>

<asp:Calendar ID=”calSecheduler” runat=”server” Width=”824px” BackColor=”#FFFFCC”

BorderColor=”#FFCC66″ BorderWidth=”1px” DayNameFormat=”Shortest” Font-Names=”Verdana”

Font-Size=”8pt” ForeColor=”#663399″ Height=”428px” ShowGridLines=”True” OnSelectionChanged=”calSecheduler_SelectionChanged”>

<SelectedDayStyle BackColor=”#CCCCFF” Font-Bold=”True” />

<SelectorStyle BackColor=”#FFCC66″ />

<TodayDayStyle BackColor=”#FFCC66″ ForeColor=”White” />

<OtherMonthDayStyle ForeColor=”#CC9966″ />

<NextPrevStyle Font-Size=”9pt” ForeColor=”#FFFFCC” />

<DayHeaderStyle BackColor=”#FFCC66″ Font-Bold=”True” Height=”1px” />

<TitleStyle BackColor=”#990000″ Font-Bold=”True” Font-Size=”9pt” ForeColor=”#FFFFCC” />

</asp:Calendar>

</div>

</form>

</body>

</html>

Code behind:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

namespace MctsWeb

{

public partial class Calender : System.Web.UI.Page

{

Dictionary<DateTime, string> friendsAndDOB = new Dictionary<DateTime, string>();

protected void Page_Load(object sender, EventArgs e)

{

GetSchedule();

calSecheduler.Style.Add(“position”, “middle”);

calSecheduler.FirstDayOfWeek = FirstDayOfWeek.Sunday;

calSecheduler.NextPrevFormat = NextPrevFormat.ShortMonth;

calSecheduler.Style.Add(“left”, “100px”);

calSecheduler.Caption = “<h1>My Friends Birthdays<h1>”;

calSecheduler.OtherMonthDayStyle.BackColor = System.Drawing.Color.WhiteSmoke;

calSecheduler.DayStyle.HorizontalAlign = HorizontalAlign.Justify;

calSecheduler.DayStyle.VerticalAlign = VerticalAlign.Top;

calSecheduler.DayStyle.Width = new Unit(75);

calSecheduler.DayStyle.Height = new Unit(120);

calSecheduler.DayRender += new DayRenderEventHandler(calSecheduler_DayRender);

calSecheduler.VisibleMonthChanged += new MonthChangedEventHandler(calSecheduler_VisibleMonthChanged);

calSecheduler.ShowGridLines = true;

}

void calSecheduler_VisibleMonthChanged(object sender, MonthChangedEventArgs e)

{

Response.Write(“Selected Month change to:” + calSecheduler.SelectMonthText);

}

private void GetSchedule()

{

friendsAndDOB.Add(new DateTime(2009, 6, 26), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 2), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 01), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 03), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 27), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 25), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 05), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 04), “altaf”);

friendsAndDOB.Add(new DateTime(2009, 6, 28), “altaf”);

}

void calSecheduler_DayRender(object sender, DayRenderEventArgs e)

{

Label lbl = new Label();

lbl.Text = “<br/>altf”;

if (e.Day.Date.Day == 10)

e.Cell.Controls.Add(lbl);

foreach( KeyValuePair<DateTime, string> fDoB in friendsAndDOB)

{

Label lbl2 = new Label();

HyperLink hlnk = new HyperLink();

if (e.Day.Date == fDoB.Key)

{

hlnk.Text = “<br/>” + fDoB.Value;

hlnk.NavigateUrl = “Calender.aspx”;

lbl2.Text =”<br/>”+ fDoB.Value;

e.Cell.Controls.Add(lbl2);

e.Cell.Controls.Add(hlnk);

}

}

}

protected void calSecheduler_SelectionChanged(object sender, EventArgs e)

{

Response.Write(“Selected event change to:” + calSecheduler.SelectedDate.ToShortDateString());

}

}

}

CSS used:

body

{

font-family: Calibri;

font-size: small;

font-style: normal;

}

h1

{

font-family: Calibri;

font-size: x-large;

font-weight: bold;

font-style: normal;

font-variant: small-caps;

text-transform: capitalize;

color: #CC3300;

}

div

{

border: thin solid #FF9900;

}

Advertisements