Lịch đơn giản FF1 + IE5 + Opr7 +

Nếu bạn cần một lịch, đơn giản, thanh lịch để hiển thị ngày hiện tại của tháng, Lịch cơ bản là một kịch bản tuyệt vời cho mục đích này. Sử dụng CSS để cho phép dễ dàng thay đổi sự xuất hiện của nó, tất cả mọi thứ từ các không gian lịch, màu sắc, phông chữ được sử dụng để làm nổi bật ngày hiện tại.
code tương thích với các trình duyệt FF1 + IE5 + Opr7 +

Bước 1: Đưa dưới đây vào phần <HEAD> của trang của bạn:

<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 type="text/javascript" src="basiccalendar.js"></script>

tệp tin basiccalendar.js có thể đính gián tiếp từ dynamicdrive.com/dynamicindex7/basiccalendar.js hoặc gắn trực tiếp vào trong

function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : ' ';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}

Bước 2: Cuối cùng, chèn kịch bản dưới đây mà bạn muốn lịch để xuất hiện trên trang của bạn:

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

Thêm một vài kiểu từ ứng dụng trên

Xem các tháng lịch
Bước 1 : tương tự như bước 1 ở trên
Bước 2 : đặt nơi cần hiển thị trong HTML

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

Kết quả ta sẽ được 3 tháng kề nhau

Nếu bạn thêm curmonth+1 curmonth-1 thay 1 bằng số mình muốn, bạn được 1 năm lịch hoàn chỉnh

Nếu bạn muốn có form để chọn tháng trong năm thì tại bước 2 ta có code

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