javascript实现calendar

关注

原创最新推荐文章于 2026-05-25 08:19:42 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

javascript封装的日历插件一. 调用:<script>ShowCalendar()</ script><br><br>二. 网页调用方法:<br> 1. 加入CSS样式:<br> <br>边框颜色<br>.bordercolor{background-color:#CCCCCC;}<br>日期单元颜色<br>.cellcolor{background-color:#FFFFFF;}<br>标题栏颜色<br>.titlecolor { background-color: #FFFFFF; font-size: 10pt; font-weight: bold }<br>当前日期颜色<br>.todaycolor { background-color: #F0F0F0; border-left: 2 solid #C0C0C0; <br> border-right: 2 solid #808080; border-top: 2 solid #C0C0C0; <br> border-bottom: 2 solid #808080 }<br>每行高度<br>.cellheight{height:30px;font-size:9pt}<br><br><br> 2.用<script src=ShowCalendar.js></ script>载入本代码<br> (保证在调用之前载入,最好在body前)<br><br>三.特点:<br> 1.可在同一网页下调用多个日历<br><br> 2.使用非常方便,只需在要显示的位置插入本函数调用即可. 立即下载

calendar.js的内容：
function showCalendar(id) {
showx = event.screenX - event.offsetX - 4 - 210 ; // + deltaX;
showy = event.screenY - event.offsetY + 18; // + deltaY;

url = "/EduMIS/web/js/calendar/calendar.jsp?id=" + id;
window.open(url, "日历", "height=180px; width=200px; left="+showx+"px; top="+showy+"px; status=no; directories=yes;scrollbars=no;resizable=no; " );
}

calendar.jsp的内容：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

</style>

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="180">
<tr><td id=cc>
</td></tr></table>
</body>

}

function chooseday(The_Year,The_Month,The_Day)
{
var Firstday;
var completely_date;
if (The_Day!=0)
completely_date = The_Year + "-" + The_Month + "-" + The_Day;
else
completely_date = "No Choose";
//showdate 只是一个为了显示而采用的东西，
//如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
//也可以通过The_Year,The_Month,The_Day分别引用年，月，日
//当进行月份和年份的选择时，认为没有选择完整的日期
//showdate.innerText = completely_date;
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);

}

function clickDay(The_Year,The_Month,The_Day) {

if(The_Month < 10) {
The_Month = "0" + The_Month;
}
if(The_Day < 10) {
The_Day = "0" + The_Day;
}
var Firstday;
var completely_date;
if (The_Day!=0)
completely_date = The_Year + "-" + The_Month + "-" + The_Day;
else
completely_date = "No Choose";

calendarId='<%=request.getParameter("id")%>';
obj = eval("window.opener.document.all." + calendarId);
obj.innerText = completely_date;
window.close();
}

function nextmonth(The_Year,The_Month)
{
if (The_Month==12)
chooseday(The_Year+1,1,0);
else
chooseday(The_Year,The_Month+1,0);
}

function prevmonth(The_Year,The_Month)
{
if (The_Month==1)
chooseday(The_Year-1,12,0);
else
chooseday(The_Year,The_Month-1,0);
}

function prevyear(The_Year,The_Month)
{
chooseday(The_Year-1,The_Month,0);
}

function nextyear(The_Year,The_Month)
{
chooseday(The_Year+1,The_Month,0);
}

}

</script>

var The_Year,The_Day,The_Month;
var today;
var Firstday;
today = new Date();
The_Year = today.getYear();
The_Month = today.getMonth() + 1;
The_Day = today.getDate();
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
</script>
<div id=showdate></div>
</html>