Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET
Article

Highlighting Important Dates in Calendar

Rate me:
Please Sign up or sign in to vote.
3.50/5 (12 votes)
9 Aug 20041 min read 154.9K   3.7K   60   14
Highlighting important dates in the Calendar control.

Introduction:

We all are familiar with the ASP.NET Calendar control. We can click on dates and it will be highlighted. But once you refresh the page, the selected dates are gone. How about making a small application that remembers the date you selected.

Creating a Simple Calendar:

For creating a calendar, simply drag and drop the Calendar control from the ToolBox usually located on the left in VS.NET IDE. Once you get the Calendar control on the page, you can change the appearance of the calendar by right clicking on it and choosing Properties, and then Auto Format. The image below shows just a calendar highlighting current date.

Sample screenshot

Making Database Table for storing selected Dates:

In this example, we also need to create a database. I made the database in SQL Server 2000. To keep this simple, I only made two fields: one is CalendarID which is an autogenerating number and the other is DateTime.

Page_Load Event Code:

C#
private void Page_Load(object sender, System.EventArgs e)
{
  if(!Page.IsPostBack)
  {
    // Calls the Bind Method
    BindData(); 
  }
}

BindData Method Code:

C#
public void BindData()
{
  SqlCommand myCommand = new SqlCommand("SELECT CalDate FROM tblCal", 
                                                        myConnection);
  myCommand.CommandType = CommandType.Text;
  // Opens a Database Connection
  myConnection.Open();
  // Execute DataReader
  SqlDataReader dr = myCommand.ExecuteReader();
  // Read DataReader till it reaches the end
  while( dr.Read() == true )
  {
    // Assign the Calendar control dates
    // already contained in the database
    myCal.SelectedDates.Add((DateTime)dr.GetSqlDateTime(0));
  }

  // Close DataReader
  dr.Close();
  // Close database Connection
  myConnection.Close(); 
}

Mark Test Dates Button Event Code:

C#
private void Button1_Click(object sender, System.EventArgs e)
{
  // Binds the Data on the page
  BindData(); 
  // Set the color of Selected Calendar Cells to Red
  myCal.SelectedDayStyle.BackColor = System.Drawing.Color.Red;

  SqlCommand myCommand = new SqlCommand("InsertDate",myConnection);
  myCommand.CommandType = CommandType.StoredProcedure;
  myCommand.Parameters.Add(new SqlParameter("@v_DateTime",SqlDbType.DateTime));
  myCommand.Parameters["@v_DateTime"].Value = selectedDate;
  myConnection.Open();
  myCommand.ExecuteNonQuery();
  myConnection.Close();
}

Once you press the button, your calendar will appear like the image below showing the selected dates:

Sample screenshot

Loading the page a second time:

You can also change the color when the page loads a second time as seen in the image below in which the calendar is loaded a second time:

Sample screenshot

Thanks and enjoy coding!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
My name is Mohammad Azam and I have been developing iOS applications since 2010. I have worked as a lead mobile developer for VALIC, AIG, Schlumberger, Baker Hughes, Blinds.com and The Home Depot. I have also published tons of my own apps to the App Store and even got featured by Apple for my app, Vegetable Tree. I highly recommend that you check out my portfolio. At present I am working as a lead instructor at DigitalCrafts.




I also have a lot of Udemy courses which you can check out at the following link:
Mohammad Azam Udemy Courses

Comments and Discussions

 
QuestionCreating calendar takes 'Rocket scientist' Pin
Member 1199707419-Sep-15 18:06
Member 1199707419-Sep-15 18:06 
GeneralMy vote of 5 Pin
hims05629-Nov-12 18:34
hims05629-Nov-12 18:34 
GeneralDisplay all the months with the event highlighted for any given year Pin
doran_doran5-May-09 13:11
doran_doran5-May-09 13:11 
Display all 12 months (jan to dec) with the events highlighted for any given year.

How???
QuestionEverytime page refreshes, calander does not display highlighted dates - why? Pin
dimithrak2-Apr-08 4:28
dimithrak2-Apr-08 4:28 
AnswerRe: Everytime page refreshes, calander does not display highlighted dates - why? Pin
JasonC7213-Oct-08 5:17
JasonC7213-Oct-08 5:17 
GeneralRe: Everytime page refreshes, calander does not display highlighted dates - why? Pin
azamsharp13-Oct-08 5:35
azamsharp13-Oct-08 5:35 
GeneralAzam or anyone.. please help Pin
alexammu25-Jul-06 14:28
alexammu25-Jul-06 14:28 
QuestionHow to use more than two colors Pin
gopalvenus5-May-06 10:11
gopalvenus5-May-06 10:11 
GeneralEh, this could be done better. Such as... Pin
daerath6-Apr-05 11:54
daerath6-Apr-05 11:54 
GeneralCalendar control previous months Pin
ams14322-Dec-04 0:34
ams14322-Dec-04 0:34 
GeneralCalendar control Pin
CriticalCynic8-Nov-04 7:44
CriticalCynic8-Nov-04 7:44 
GeneralRe: Calendar control Pin
azamsharp10-Nov-04 9:06
azamsharp10-Nov-04 9:06 
GeneralSource code missing Pin
Tony Bermudez10-Aug-04 7:57
Tony Bermudez10-Aug-04 7:57 
GeneralRe: Source code missing Pin
azamsharp11-Aug-04 11:32
azamsharp11-Aug-04 11:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.