Monday, December 26, 2011

Basic Calendar java script

Posted by  on 








FF1+ IE5+ Opr7+

Basic Calendar


Note: Modified by DD to highlight today's
day, bug fix.

Description: If
you need a simple, elegant calendar to display the current days of
the month, Basic Calendar is an excellent
script for the purpose. Uses CSS to allow easy changing to its appearance,
everything from calendar dimensions, colors, down to the font used to
highlight the current day.

Demo:



Directions: Developer's View

Step 1: Insert the below into
the <HEAD> section of your page:

Select All


The above references an
external .js file. Download basiccalendar.js
(by right clicking, and selecting "Save As"), and upload to your
webpage directory.

Within the above code, you may
customize the CSS rules to change all visual aspects of the calendar.

Step 2:
Finally, insert the below script where you wish the calendar
to appear on your page:


Select All

Additional Information

Basic Calendar uses one key
function, buildCal(), to display a calendar. This function looks like
this:

buildCal(4, 2003, "main", "month", "daysofweek", "days", 0)

Here's an explanation of all of its parameters:

4 The month you wish to display, where 1=January, and
12=December.
2003 The year you wish to display.
main Name of the CSS class to style the calendar's
outermost table. 
month Name of the CSS class to style the calendar's
month/year bar. 
daysofweek Name of the CSS class to style the calendar's week
days row 
days Name of the CSS class to style the individual days
cells. 
0 The thickness of the border between all cells. 0=no border.

buildCal() simply returns the entire calendar in string
format, so in order to display it, you'll need to invoke document.write(), as
shown in the code of Step 2:

document.write(buildCal(4, 2003, "main", "month", "daysofweek", "days", 0))

Such
a design of Basic Calendar means you can easily invoke it many times on
the page, and in a variety of ways.

-Displaying multiple calendar months

The below
example displays the calendar for the previous, current, and future month.
It should replace the code of Step 2:

<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




</script>



<table border="0" cellspacing="0" cellpadding="3">

<tr>

<td width="33%">

<script>


document.write(buildCal(curmonth-1 ,curyear, "main",
"month", "daysofweek", "days", 1));

</script></td>

<td width="33%">


<script>

document.write(buildCal(curmonth ,curyear, "main",
"month", "daysofweek", "days", 1));

</script></td>


<td width="34%">

<script>

document.write(buildCal(curmonth+1 ,curyear, "main",
"month", "daysofweek", "days", 1));


</script></td>

</tr>

</table>


As you can see, buildCal() is invoked three times here within table cells to
display it three times on the page. 

-Displaying an entire
year dynamically

To demonstrate how versatile this script is, you
can create simple functions to display the calendar dynamically, such as
on demand using a drop down menu. The below code should replace the code
of Step 2:


<form>

<select onChange="updatecalendar(this.options)">

<script type="text/javascript">



var themonths=['January','February','March','April','May','June',

'July','August','September','October','November','December']




var todaydate=new Date()

var curmonth=todaydate.getMonth()+1 //get current month (1-12)

var curyear=todaydate.getFullYear() //get current year



function updatecalendar(theselection){

var themonth=parseInt(theselection[theselection.selectedIndex].value)+1


var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)

if (document.getElementById)

document.getElementById("calendarspace").innerHTML=calendarstr

}



document.write('<option value="'+(curmonth-1)+'" selected="yes">Current Month</option>')


for (i=0; i<12; i++) //display option for 12 months of the year

document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')





</script>

</select>




<div id="calendarspace">

<script>

//write out current month's calendar to start

document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))

</script>


</div>



</form>
If you are searching life partner. your searching end with kpmarriage.com. now kpmarriage.com offer free matrimonial website which offer free message, free chat, free view contact information. so register here : kpmarriage.com- Free matrimonial website

0 comments:

Post a Comment