Search results for 'calendar'. 1 post(s) found.
- 2007/08/31 Javascript implemented Calendar
Nice calendar for Web page display. Highlights the Date and the day of the week. Well-documented code to help you customize any font,color,or size you want.
<!-- TWO STEPS TO INSTALL THIS SCRIPT -->
<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// SET ARRAYS
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// DECLARE AND INITIALIZE VARIABLES
var calendar = new Date();
var year = calendar.getYear(); // Returns year
var month = calendar.getMonth(); // Returns month (0-11)
var today = calendar.getDate(); // Returns day (1-31)
var weekday = calendar.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
calendar.setDate(1); // Start the calendar day at '1'
calendar.setMonth(month); // Start the calendar month at now
/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER','BGCOLOR','CELLPADDING','BORDERCOLOR'
tags to customize your caledanr's look. */
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';
/* BEGIN CODE FOR calendar
NOTE: You can format the 'BORDER','BGCOLOR','CELLPADDING','BORDERCOLOR'
tags to customize your calendar's look.*/
cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
cal = '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' TR_start;
cal = '<TD COLSPAN="' DAYS_OF_WEEK '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal = month_of_year[month] ' ' year '</B>' TD_end TR_end;
cal = TR_start;
// DO NOT EDIT BELOW THIS POINT //
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index )
{
// BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal = TD_start '<B>' day_of_week[index] '</B>' TD_end;
// PRINTS DAY
else
cal = TD_start day_of_week[index] TD_end;
}
cal = TD_end TR_end;
cal = TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < calendar.getDay(); index )
cal = TD_start ' ' TD_end;
// LOOPS FOR EACH DAY IN calendar
for(index=0; index < DAYS_OF_MONTH; index )
{
if( calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =calendar.getDay();
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal = TR_start;
if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = calendar.getDate();
// HIGHLIGHT TODAY'S Date
if( today==calendar.getDate() )
cal = highlight_start day highlight_end TD_end;
// PRINTS DAY
else
cal = TD_start day TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal = TR_end;
}
// INCREMENTS UNTIL END OF THE MONTH
calendar.setDate(calendar.getDate() 1);
}// end for loop
cal = '</TD></TR></TABLE></TABLE>';
// PRINT calendar
document.write(cal);
// End -->
<!-- STEP TWO: Place this into the BODY of the HTML document where you want the calendar -->
<!-- Make sure the '.js' and '.html' files are in the same directory. -->
<BODY>
<SCRIPT SRC="calendar.js"></SCRIPT>
<p><center>
<font face="arial,helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.15 KB -->
<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// SET ARRAYS
var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
// DECLARE AND INITIALIZE VARIABLES
var calendar = new Date();
var year = calendar.getYear(); // Returns year
var month = calendar.getMonth(); // Returns month (0-11)
var today = calendar.getDate(); // Returns day (1-31)
var weekday = calendar.getDay(); // Returns day (1-31)
var DAYS_OF_WEEK = 7; // "constant" for number of days in a week
var DAYS_OF_MONTH = 31; // "constant" for number of days in a month
var cal; // Used for printing
calendar.setDate(1); // Start the calendar day at '1'
calendar.setMonth(month); // Start the calendar month at now
/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER','BGCOLOR','CELLPADDING','BORDERCOLOR'
tags to customize your caledanr's look. */
var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
var highlight_end = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="30"><CENTER>';
var TD_end = '</CENTER></TD>';
/* BEGIN CODE FOR calendar
NOTE: You can format the 'BORDER','BGCOLOR','CELLPADDING','BORDERCOLOR'
tags to customize your calendar's look.*/
cal = '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
cal = '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' TR_start;
cal = '<TD COLSPAN="' DAYS_OF_WEEK '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal = month_of_year[month] ' ' year '</B>' TD_end TR_end;
cal = TR_start;
// DO NOT EDIT BELOW THIS POINT //
// LOOPS FOR EACH DAY OF WEEK
for(index=0; index < DAYS_OF_WEEK; index )
{
// BOLD TODAY'S DAY OF WEEK
if(weekday == index)
cal = TD_start '<B>' day_of_week[index] '</B>' TD_end;
// PRINTS DAY
else
cal = TD_start day_of_week[index] TD_end;
}
cal = TD_end TR_end;
cal = TR_start;
// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < calendar.getDay(); index )
cal = TD_start ' ' TD_end;
// LOOPS FOR EACH DAY IN calendar
for(index=0; index < DAYS_OF_MONTH; index )
{
if( calendar.getDate() > index )
{
// RETURNS THE NEXT DAY TO PRINT
week_day =calendar.getDay();
// START NEW ROW FOR FIRST DAY OF WEEK
if(week_day == 0)
cal = TR_start;
if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
var day = calendar.getDate();
// HIGHLIGHT TODAY'S Date
if( today==calendar.getDate() )
cal = highlight_start day highlight_end TD_end;
// PRINTS DAY
else
cal = TD_start day TD_end;
}
// END ROW FOR LAST DAY OF WEEK
if(week_day == DAYS_OF_WEEK)
cal = TR_end;
}
// INCREMENTS UNTIL END OF THE MONTH
calendar.setDate(calendar.getDate() 1);
}// end for loop
cal = '</TD></TR></TABLE></TABLE>';
// PRINT calendar
document.write(cal);
// End -->
<!-- STEP TWO: Place this into the BODY of the HTML document where you want the calendar -->
<!-- Make sure the '.js' and '.html' files are in the same directory. -->
<BODY>
<SCRIPT SRC="calendar.js"></SCRIPT>
<p><center>
<font face="arial,helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 4.15 KB -->
Another posts included in "HTML, Javascript"
| Javascript based Alarm Clock (0) | 2007/08/31 |
| How to get date time in Javascript ? (0) | 2007/08/31 |
| Hiding HTML on the browser (0) | 2007/08/31 |
| Basic Date Display (0) | 2007/08/31 |
| Address Book (0) | 2007/08/30 |
| Displays the number of pages that the users browser has displayed in it... (0) | 2007/08/30 |
| Greeting For The Time Of Day (0) | 2007/08/30 |
| Access Granted (0) | 2007/08/30 |
Trackback : Cannot send a trackbact to this post.
-
Subject different money making ideas
2010/01/29 03:24
moneyideas
-
Subject different money making ideas
2010/01/29 12:31
moneyideas
-
Subject different money making ideas
2010/01/31 16:45
moneyideas
Prev
Rss Feed