Introduction
In this article I will make a simple basic calendar using jQuery. Calendar is a popular form element. It helps to reduce human error. Instead of requirng users to type the date in a certain format, you let them choose it from a calendar. It solves the formatting problem, and it's user friendly and easy to understand.
Description
If you want to make a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for completing this requirement. The CSS uses allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.
Step 1: First we have to create a Web Application.
- Go to Visual Studio 2010.
- New--> And select the Web Application.
- Give whatever name you want to.
- Click OK.
![img1.gif]()
Step 2: Secondly you have to add a new page to the website.
- Go to the Solution Explorer.
- Right-click on the project name.
- Select add new item.
- Add new web page and give it a name.
- Click OK.
![img2.gif]()
![img3.gif]()
Step 3: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section.
<style type="text/css">
.main
{
width: 200px;
border: 2px solid #660033;
}
.month
{
background-color: #336633;
font: bold 16px verdana;
color: #FF0066;
}
.daysofweek
{
background-color: #6633CC;
font: bold 12px verdana;
color: #CCCC00;
}
.days
{
font-size: 12px;
font-family: verdana;
color: black;
background-color: #CCCC33;
padding: 2px;
}
.days #today
{
font-weight: bold;
color: red;
}
</style>
Step 4: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.
![img4.gif]()
Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 5
Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
Step 6: In this step we have to write the jQuery code which is given below.
<script type="text/javascript">
var todaydate = new Date()
var curmonth = todaydate.getMonth() + 1 //get current month (1-12)
var curyear = todaydate.getFullYear() //get current year
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
</script>
Step 7: In this step we will see the complete code of the Default2.aspx page which is given below.
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>A Basic Calendar Using JQuery</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/basiccalendar.js"></script>
<script type="text/javascript">
var todaydate = new Date()
var curmonth = todaydate.getMonth() + 1 //get current month (1-12)
var curyear = todaydate.getFullYear() //get current year
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
</script>
<style type="text/css">
.main
{
width: 200px;
border: 2px solid #660033;
}
.month
{
background-color: #336633;
font: bold 16px verdana;
color: #FF0066;
}
.daysofweek
{
background-color: #6633CC;
font: bold 12px verdana;
color: #CCCC00;
}
.days
{
font-size: 12px;
font-family: verdana;
color: black;
background-color: #CCCC33;
padding: 2px;
}
.days #today
{
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
Step 8: In this step we are going to run the Default2.aspx page by pressing F5.
![img5.gif]()
Resources