[Description:]

DANNY:

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:

.main {width:200px;border:1px solid black;}.month {background-color:black;font:bold 12px verdana;color:white;}.daysofweek {background-color:gray;font:bold 12px verdana;color:white;}.days {font-size: 12px;font-family:verdana;color:black;background-color: lightyellow;padding: 2px;}.days #today{font-weight: bold;color: red;}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 yearfunction updatecalendar(theselection){var themonth=parseInt(theselection[theselection.selectedIndex].value)+1var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)if (document.getElementById)document.getElementById("calendarspace").innerHTML=calendarstr}document.write('Current Month')for (i=0; i'+themonths[i]+' '+curyear+'')//write out current month's calendar to startdocument.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 0))

Code:

<!--
free script collection by more share forum
https://www.ms-room.com
-->

<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>

<script language="JavaScript" type="text/javascript" src="https://www.ms-room.com/js/calendar-ms.js"></script>

<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>

Back Sub-Forum