<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="yaohaixiao.com,Javascript,YCalendar,日历控件,focus on javascript" />
<meta name="description" content="yaohaixiao.com - Focus on javascript." />
<title>YCalendar - 日历控件</title>
<link href='http://www.yaohaixiao.com/css/yao.css' type="text/css" rel="stylesheet" media="all" />
<link href='css/ycalendar.css' type="text/css" rel="stylesheet" id="YCalendarCSS" />
<base target="_blank" />
</head>
<body>
<div id="hd">
<h1><strong>YAO</strong>HAIXIAO.COM</h1>
<blockquote>FOCUS ON JAVASCRIPT</blockquote>
<ul id="navigation">
<li><a href="http://www.yaohaixiao.com/index.html">网站首页</a></li>
<li class="current"><a href="http://www.yaohaixiao.com/javascript/index.html">我的Javascript空间</a></li>
<li><a href="http://www.yaohaixiao.com/tools/index.html">Javascript 开发工具</a></li>
<li><a href="http://www.yaohaixiao.com/resource/index.html">Javascript 资源链接</a></li>
<li><a href="http://www.yaohaixiao.com/books/index.html">Javascript 好书推荐</a></li>
<li><a href="http://www.yaohaixiao.com/about/index.html">关于</a></li>
</ul>
</div>
<div class="wrap">
<div id="script">
<h1>YCalendar - 日历控件</h1>
<div id="byline">设计思想：《Javascript设计模式》 程序编写：<a href="http://www.yaohaixiao.com/">YAOHAIXIAO.COM</a> 发表时间：2010 - 02 - 12</div>
<div id="ycalendar"></div>
<h2>程序简介</h2>
<p>
<strong>YCalendar - 日历控件</strong>，这个控件是在《Javascript设计模式》一书中第十三章《享元模式》的Web日历代码的基础上修改扩展出来的。基本实现了一个简单的日历控件的功能，setYear()方法显示年历，setMonth()方法显示月历。程序还不很完善，仅供大家学设计模式参考之用。当然你也可以完善这个控件作为开发使用，我以后也会完善它的。
</p>
<h2>调用方法</h2>
<p>
<strong>第一步：</strong>在页面中调用ycalendar.js文件，例如：
</p>
<p>
<script type="text/javascript" src="js/ycalendar.js"></script>
</p>
<p><strong>第二步：</strong>编写调用代码：<br />
<pre>
YCalendar.setMonth();
</pre>
</p>
<h2>程序代码</h2>
<textarea>
var YCalendar = function(){
var D = document, docHead = D.getElementsByTagName('head')[0], styleSheet = D.getElementById('YCalendarCSS'), oStyle = null, time = new Date, currentYear = ((time.getYear() < 1900) ? (time.getYear() + 1900) : time.getYear()), minYear = 1900, maxYear = 2100, thisYear = [], thisMonth = [], calendarContainer = null, datesContainer = [], BtnLastYear = [], BtnLastMonth = [], BtnNextMonth = [], BtnNextYear = [], isShowBtns = true;
var day = ['日', '一', '二', '三', '四', '五', '六'];
var isLeapYear = function (y){
return (y > 0) && !(y % 4) && ((y % 100) || !(y % 400));
},isString = function(s){
return typeof s === 'string';
},isUndefined = function(o){
return typeof o === 'undefined';
};
return {
addCSS: function(){
if (!styleSheet) {
oStyle = D.createElement('link');
oStyle.id = 'YCalendarCSS';
oStyle.href = 'css/YCalendar.css';
oStyle.type = "text/css";
oStyle.rel = 'stylesheet';
oStyle.media = 'all';
docHead.appendChild(oStyle);
}
},
setYear: function(defaultYear, calendarCnt){
var theYear = defaultYear || currentYear;
var i, months = [];
//isShowBtns = false;
calendarContainer = calendarCnt || D.getElementById('ycalendar');
minYear = theYear - 100;
maxYear = theYear + 100;
for (i = 0; i < 12; i += 1) {
months[i] = this.setMonth(theYear, i, calendarContainer);
}
},
setMonth: function(year, month, parent){
var that = this, i;
var theYear = (!isUndefined(year) && (year >= minYear && year <= maxYear)) ? (isString(year) ? parseInt(year, 10) : year) : currentYear;
var theMonth = (!isUndefined(month) && (month >= 0 && month < 12)) ? (isString(month) ? parseInt(month, 10) : month) : time.getMonth();
var monthTitle = null, monthContainer = null;
var weekContainer, weekItems = [];
thisYear[theMonth] = theYear;
thisMonth[theMonth] = theMonth + 1;
minYear = theYear - 100;
maxYear = theYear + 100;
calendarContainer = parent || D.getElementById('ycalendar');
// ================ 开始创建日历 ================
// 创建月份容器
monthContainer = D.createElement('div');
monthContainer.className = 'ycalendar_month';
monthContainer.style.display = 'none';
// 创建月份控制按钮
if (isShowBtns) {
BtnLastYear[theMonth] = D.createElement('img');
BtnLastYear[theMonth].className = 'ycalendar_lastyear';
BtnLastYear[theMonth].src = 'img/resultset_first.png';
BtnLastYear[theMonth].alt = '上一年';
BtnLastMonth[theMonth] = D.createElement('img');
BtnLastMonth[theMonth].className = 'ycalendar_lastmonth';
BtnLastMonth[theMonth].src = 'img/resultset_previous.png';
BtnLastMonth[theMonth].alt = '上一月';
BtnNextMonth[theMonth] = D.createElement('img');
BtnNextMonth[theMonth].className = 'ycalendar_nextmonth';
BtnNextMonth[theMonth].src = 'img/resultset_next.png';
BtnNextMonth[theMonth].alt = '下一月';
BtnNextYear[theMonth] = D.createElement('img');
BtnNextYear[theMonth].className = 'ycalendar_nextyear';
BtnNextYear[theMonth].src = 'img/resultset_last.png';
BtnNextYear[theMonth].alt = '下一年';
monthContainer.appendChild(BtnLastYear[theMonth]);
monthContainer.appendChild(BtnLastMonth[theMonth]);
monthContainer.appendChild(BtnNextMonth[theMonth]);
monthContainer.appendChild(BtnNextYear[theMonth]);
BtnLastYear[theMonth].onclick = function(index){
return function(){
that.lastYear.call(that, index);
}
}(theMonth);
BtnLastMonth[theMonth].onclick = function(index){
return function(){
that.lastMonth.call(that, index);
}
}(theMonth);
BtnNextMonth[theMonth].onclick = function(index){
return function(){
that.nextMonth.call(that, index);
}
}(theMonth);
BtnNextYear[theMonth].onclick = function(index){
return function(){
that.nextYear.call(that, index);
}
}(theMonth);
}
// 创建月份标题
monthTitle = D.createElement('h4');
monthTitle.id = 'ycalendar_month' + theMonth;
monthTitle.innerHTML = '<span id="ycalendar_currentYear' + theMonth + '">' + theYear + '</span> 年 <span id="ycalendar_currentMonth' + theMonth + '">' + (theMonth + 1) + '</span> 月';
monthContainer.appendChild(monthTitle);
// 创建星期列表
weekContainer = D.createElement('ul');
for (i = 0; i < 7; i += 1) {
weekItems[i] = D.createElement('li');
if (i === 0 || i === 6) {
weekItems[i].className = 'yweekend';
}
weekItems[i].innerHTML = day[i];
weekContainer.appendChild(weekItems[i]);
}
monthContainer.appendChild(weekContainer);
// 创建每月的天数容器
datesContainer[theMonth] = D.createElement('div');
datesContainer[theMonth].className = 'ycalendar_days';
datesContainer[theMonth].id = 'ycalendar_Days' + theMonth;
this.getDays(theYear, theMonth, datesContainer[theMonth]);
monthContainer.appendChild(datesContainer[theMonth]);
monthContainer.style.display = 'block';
// 将完整的月份日历追加到日历容器中
calendarContainer.appendChild(monthContainer);
},
getDays: function(year, month, parent){
var numDays = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var theDays =
YCalendar 漂亮的JS日历控件实现代码.zip
版权申诉
115 浏览量
2022-11-01
00:04:44
上传
评论
收藏 10KB ZIP 举报
YCalendar 漂亮的JS日历控件实现代码.zip （7个子文件） 
132686992466496036 css 
YCalendar.css 2KB img 
resultset_previous.png 389B resultset_next.png 395B resultset_last.png 524B resultset_first.png 522B js YCalendar.js 8KB
Calendar.html 13KB资源评论
