Using the Calendar Control as a Diary in ASP.NET

Category: ASP.NET

Creating a Calendar-Controlled Diary in ASP.NET with C#

Introduction

In this article, we will look at using the Calendar control as part of an interface to manage a diary-type application. In conjunction with the FormView control, we will use the Calendar to display diary entries for specific days. We will highlight each day that has a diary entry, and the user will have the ability to add entries on any day of the calendar. In addition to the two controls already mentioned, we will also use two SqlDataSource controls; one for the calendar control, and one for the FormView control. We will use the FormView to insert and update records in the database.

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

What we will learn in this article:

  • How to use the Calendar control to interact with a database;
  • How to customize the look of a Calendar control depending upon database data.

Getting Started
We will start by creating a new C# project in Visual Studio.NET 2008. If you are using VS.NET 2005, you can still create this web application, but some additional steps may be required that are not covered in this article.

Once we have our project created, we will go ahead and add a SQL Server Database. Right-click the App_Data folder in the Solution Explorer, then click Add New Item.. SQL Server Database. You can leave the name as Database.mdf or give it a name. Once the database has been added to our project, go over to the Server Explorer (left side, usually) and expand the Database we just created, then right-click the Tables folder and choose Add New Table:

We will create three columns in this table - id, date, and todo. We will make the id the Primary Key and also the Identity Specification in the Properties. They should have the following data types:

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Now we have set up our database, we can start building the web application. We do not need to add any entries to the database - we can wait until our application is built to do that.
We will begin by adding our Calendar control. Either drag a Calendar onto the design or code view from the toolbox, or simply type in the code view:

We can customize the look of the Calendar by going into design view and clicking the Smart Tag and choosing Auto Format. We will also be adding more attributes to the tags a little later. So let's move onto the SqlDataSource controls.
We can drag two onto our design or code view from the toolbox on the left.

We name one for the calendar (to select all entries) and one for the FormView (to select entries for a particular day, update and insert). Now that we have added these to our ASPX page, we will configure them to communicate with our database. Goto design view and click on the Smart Tag of the first SqlDataSource (for the FormView), then click on Configure Data Source.


[Click to enlarge]

asdfasdfasdf

Choose the Connection String from the dropdown and then hit Next. Here, we want to choose to Specify custom SQL statements, hit Next.
We will be adding custom SQL queries for each one of these tabs: SELECT, UPDATE, and INSERT.

SELECT
SELECT * FROM tblDiary WHERE [email protected]

 

UPDATE
UPDATE tblDiary SET [email protected] WHERE [email protected]

 

INSERT
INSERT tblDiary (date,todo) VALUES (@date,@todo)

Once these queries have been entered into the correct box, hit Next. You should now be presented with the Parameters window. This is where we define the parameters which will interact with our database. That is, when we use the SELECT query, we will be passing the SelectedDate value through the query to the database to retrieve only the diary entries for that particular date.


[Click to enlarge]

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

So make sure the Paramter Source is set to Control, and the ControlID is set to that of the Calendar. Finally, we can click Next again and then Finish.
Then we move onto the second SqlDataSource - let's do the same; click the Smart Tag and choose Configure Data Source, choose the Connection String from the dropdown and then we can just select the date column from the list:


[Click to enlarge]

This is because we are using this data source for the calendar, and for this, we just need to retrieve the dates from the database - so we can highlight the days the have entries in teh database.
Now that we have finished configuring our DataSources, they should look something like this:

ConnectionString=""
InsertCommand="INSERT tblDiary (date,todo) VALUES (@date,@todo)"
SelectCommand="SELECT * FROM tblDiary WHERE [email protected]"
UpdateCommand="UPDATE tblDiary SET [email protected] WHERE [email protected]">


ConnectionString=""
SelectCommand="SELECT date FROM tblDiary">

You'll notice that we have two parameters for the SQL queries - one for select and one for insert, which are both the same. The reason we do not need these parameters for the update query is because we will be using the FormView Update Command, so we will just bind the variables with that template. We do this by defining an EditTemplate for the FormView:

DataSourceID="todoSrc" DefaultMode="Edit">



Text="" />




If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Notice that we assign the DataSourceID to the datasource with the parameters. Within the template, we create a form to allow editing of existing diary entries - we provide a textbox, which we bind the todo column to, and then also add a linkbutton to update the data. We assign this the CommandName of Update to ensure that we use the built-in functionality of the FormView.

We also need to create a template for inserting new entries. We can do this with the InsertItemTemplate tags:

DataSourceID="todoSrc" DefaultMode="Edit">



Text="" />








TextMode="MultiLine" Columns="30" Rows="5" />

Now if we run this application, we are unable to add new entries to the database. This is because the default mode of the FormView is edit, so it will only currently show any existing entries. We can solve this by adding a button to the form to enable us to switch the the insert mode of the FormView:

We can double-click the button in design view to create the onclick handler, and then add the following code to switch the FormView to insert mode:

protected void butAddNew_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Insert);
}

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

Now we have finished the majority of our form, we can complete the Calendar control. We can customize the look with the Auto Format method mentioned earlier, and we also want to add an event handler. Go into design view and select the calendar. Click the Events button (lightning icon) in the Properties window then double-click on the DayRender and SelectionChanged events. This will create handlers in the code-behind for these events, meaning we can add code here to run when these events occur.

The DayRender event is called for each day the calendar will be displaying, when it is being rendered. This is where we will set the highlight for the days that have entries added to them.

DataView todo = new DataView();

void Page_PreRender()
{
todo = (DataView)calendarSrc.Select(DataSourceSelectArguments.Empty);
todo.Sort = "date";
}

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
if (todo.FindRows(e.Day.Date).Length > 0)
{
e.Cell.BackColor = System.Drawing.Color.Red;
}
}

We simply set the back color of the cell if there is an entry in the database with the same date as the one that is currently being rendered.
The SelectionChanged event is called when a new date is selected by the user. When this happens, we want to change the view of the FormView to edit so that any existing entry is displayed. If there isn't, then we can use the Add button to add a new entry.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Edit);
}

We can also set the calendar to display today's date easily by including this in the Page Load event:

protected void Page_Load(object sender, EventArgs e)
{
if (Calendar1.SelectedDate == DateTime.MinValue)
Calendar1.SelectedDate = Calendar1.TodaysDate;
}

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Now if we run this web application, we will be presented with a calendar which we will be able to attach note entries to any day we select.

What we have Learned

We have learned how to use a Calendar control as an interface to store data in a database.

Attachments



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!