|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
This is a highly customizable Calendar Script in Javascript. More than one calendar can be created in a single page. Each calendar can be customized monthwise.
|
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Customizable Calendar Script</title>
<style type="text/css">
#YearCalendar{width:600px;border:1px #E5E5E5 solid;}
#YearCalendar td.TestContainer{text-align:center;border:1px #E5E5E5 solid;}
/* This is the Default Calendar Theme*/
.tblCalendar{border:2px #333 solid;border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#E5E5E5;}
.tblCalendar td{border:1px #333 solid;text-align:center;padding:2px;}
.tblCalendar td.SelectedDay{background:#999999;color:red;}
.tblCalendar td.Title{font-weight:bold;background:#000000;color:#C0C0C0;}
.tblCalendar .WeekName td{font-weight:bold;}
/* These are some customised themes. The class name has to be passed to the function as the 4th argument*/
.CalendarStyle0{border:2px #0000FF solid;border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#F2F2F2;}
.CalendarStyle0 td{border:1px #0000FF solid;text-align:center;padding:2px;}
.CalendarStyle0 td.SelectedDay{background:#999999;color:blue;font-weight:bold;}
.CalendarStyle0 td.Title{font-weight:bold;background:#006699;color:#C0C0C0;}
.CalendarStyle0 .WeekName td{font-weight:bold;}
.CalendarStyle1{border:2px #000 solid;border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#000;}
.CalendarStyle1 td{border:1px #333 solid;text-align:center;padding:2px;color:#FFFFFF;}
.CalendarStyle1 td.SelectedDay{background:#000;color:red;}
.CalendarStyle1 td.Title{font-weight:bold;background:#000000;color:#C0C0C0;}
.CalendarStyle1 .WeekName td{font-weight:bold;}
.CalendarStyle2{border:2px #333 solid;border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#A8DCB7;}
.CalendarStyle2 td{border:1px #333 solid;text-align:center;padding:2px;}
.CalendarStyle2 td.SelectedDay{background:#999999;color:red;}
.CalendarStyle2 td.Title{font-weight:bold;background:#378D44;color:#C0C0C0;}
.CalendarStyle2 .WeekName td{font-weight:bold;}
.CalendarStyle3{border:1px red solid;border-collapse:collapse;font:normal 11px Verdana, Arial, sans-serif;background:#FFFFFF;}
.CalendarStyle3 td{border:1px #F3F3F3 solid;text-align:center;padding:2px;}
.CalendarStyle3 td.SelectedDay{background:#F3F3F3;color:red;}
.CalendarStyle3 td.Title{font-weight:bold;background:#ED0000;color:#FFF;}
.CalendarStyle3 .WeekName td{font-weight:bold;}
</style>
<script type="text/javascript">
<!--
// All the arguments are optional
// Year - If this parameter is not set, then current year will be used
// Month - If this parameter is not set, then current month and the given Year / Current year will be shown
// Day - this parameter can be used for selecting a particular day
// ContainerId - If this parameter is set, then
// * if an element by that id exist, then the calendar will be inserted in that element
// * else an element by that id will be created and the calendar will be inserted in that element
// If this parameter is not set then an id will be randomly generated
// If the id of the Container Element will be returned by the function on success
// ClassName - This parameter can be used to apply different themes for different calendars used in the same page
function Calendar(Year, Month, Day, ContainerId, ClassName)
{
Calendar.MonthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
//If no parameter is passed use the current date.
this.oDate = new Date();
this.Year = (Year == null) ? this.oDate.getFullYear() : Year;
this.Month = (Month == null) ? this.oDate.getMonth() : Month - 1;
this.Day = (Day == null) ? 0 : Day;
this.oDate = new Date(this.Year, this.Month, 1);
this.NextMonth = new Date(this.Year, this.Month + 1, 1);
this.WeekStart = this.oDate.getDay();
// Get the number of months in current month
this.MonthDays = Math.round((this.NextMonth.getTime() - this.oDate.getTime()) / 86400000) + 1;
this.HTML = '<table class="' + ((ClassName == null) ? 'tblCalendar' : ClassName) + '" cellspacing="0">';
// Title bar
this.HTML += '<tr><td colspan="7" class="Title">' + Calendar.MonthNames[this.Month] + ' ' + this.Year + '</td></tr>';
// Week Names
this.HTML += '<tr class="WeekName"><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>';
this.HTML += '<tr>';
// Fill the previous month days with space
for(DayCounter = 0; DayCounter < this.WeekStart; DayCounter++)
{
this.HTML += '<td> </td>';
}
// Populate current month
for(DayCounter = 1; DayCounter < this.MonthDays; DayCounter++)
{
if((DayCounter + this.WeekStart) % 7 == 1) this.HTML += '<tr>';
if(DayCounter == this.Day)
this.HTML += '<td class="SelectedDay">' + DayCounter + '</td>';
else this.HTML += '<td>' + DayCounter + '</td>';
if((DayCounter + this.WeekStart) % 7 == 0) this.HTML += '</tr>';
}
// Fill the next month days with space
for(j = (42 - (this.MonthDays + this.WeekStart)), DayCounter = 0; DayCounter <= j; DayCounter++)
{
this.HTML += '<td> </td>';
if((j - DayCounter) % 7 == 0) this.HTML += '</tr>';
}
this.HTML += '</table>';
// Check whether the Container Id is null
if(ContainerId != null)
{
this.Container = document.getElementById(ContainerId);
// If an object exists with the given ContainerId insert the Calendar into the object
if(this.Container)
document.getElementById(ContainerId).innerHTML = this.HTML;
// Else create an element with the given id and insert the calendar
else
document.write('<div id="' + ContainerId + '">' + this.HTML + '</div>');
}
else
{
// Loop until a unique id is obtained for the container
do
{
ContainerId = 'tblCalendar' + Math.round(Math.random() * 1000);
}
while(document.getElementById(ContainerId));
// create an element with the new id and insert the calendar
document.write('<div id="' + ContainerId + '">' + this.HTML + '</div>');
}
// Returns Id of the element containing the calendar
return ContainerId;
}
//-->
</script>
</head>
<body>
<center><table id="YearCalendar" cellpadding="15">
<script>
Styles = new Array('CalendarStyle0', 'CalendarStyle1', 'CalendarStyle2', 'CalendarStyle3');
for(k = 1; k <= 12; k++)
{
if(k % 4 == 1) document.write('<tr>');
document.write('<td class="TestContainer">');
// Randomly select a theme for applying to the calendar
style = Styles[Math.floor(Math.random() * 4)];
// The id of the container is returned by the function.
// If the id is specified when calling the function (as the 3rd argument)
// then it is returned, else a randomly created id will be returned
// This id can be used for accessing the calendar like showing, hiding, dragging etc
id = Calendar(2006, k, Math.floor(Math.random() * 31), null, style );//
// Add the Show / Hide Button
document.write('<input type="button" onclick="ShowHide(this,\''+id+'\');" value="Hide"></td>');
if(k % 4 == 0) document.write("</tr>");
}
function ShowHide(btn, id)
{
StyleObj = document.getElementById(id).style
if(StyleObj.display != 'none')
{
StyleObj.display = 'none';
btn.value = 'Show';
}
else
{
StyleObj.display = 'block';
btn.value = 'Hide';
}
}
</script>
</table></center>
</body>
</html> | |
|
|
| PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS | | | Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time | | | Calendars to choose a range of dates , reservation events ...
Categories : PHP, Calendar, Java Script, Date Time | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Simple PHP control CSS Calendar
Categories : PHP, HTML and PHP, Calendar, Date Time, CSS | | | Javascript Date Picker
Categories : Java Script, Date Time, Calendar | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | enhanced date picker with jcript checking for a dynamic date input
Categories : PHP, Java Script, Date Time, Calendar, Arrays | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Hilight Form Element onFocus
Categories : Java Script, Form Processing, CSS | | | function to generate calendars on the fly.
Categories : Calendar, PHP, Date Time | |
| | | | Niels Oesten wrote : 1657
Very nice looking, but when do developers start to adhere to the international ISO8601 standard with weeks starting on mondays? Week numbers as used extensively in Europe only make sense when ISO8601 is followed.
| | | | james triplett wrote :1663
Very nice script! I was able to very quickly turn it in to a clickable daily calendar for an event page. The code separates easily into .css and .js files- so the user page can be nice and clean.
| |
|
|
