Creating a Calendar-Controlled Diary in ASP.NET with C#
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.
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]
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 * FROM tblDiary WHERE [email protected]
UPDATE tblDiary SET [email protected] WHERE [email protected]
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:
InsertCommand="INSERT tblDiary (date,todo) VALUES (@date,@todo)"
SelectCommand="SELECT * FROM tblDiary WHERE [email protected]"
UpdateCommand="UPDATE tblDiary SET [email protected] WHERE [email protected]">
SelectCommand="SELECT date FROM tblDiary">