可完全定制的Javascript日历（Callback 实现）-白红宇

可完全定制的Javascript日历（Callback 实现）

阅读量：4147 次

发布时间：2019-05-25

本文共 2764 字，大约阅读时间需要 9 分钟。

采用Callback的方式，回调生成样式。

所以只要自己编写简单的 CalendarStyle，就可以生成完全定制的Javascript日历。

具体代码如下：

var c = new Calendar(new CalendarStyle());

var h1 = c.buildWeek(["SUN", "MON", "TUS", "WED", "THU", "FRI", "STA"]);

var h2 = c.build();

var table = "<TABLE border=1 cellpadding=4 cellspacing=2>";

calendar.innerHTML = c.sb(table, h1, h2, "</table>");

function CalendarStyle() {

this.line = function(c, begin) {

return (begin) ? "<tr valign=middle>" : "</tr>";

};

this.week = function(c, w) {

return c.sb('<TD class="tdDateBack" width="45px"><DIV align="center" class="black bold">', w, "</td>");

};

this.day = function(c, d, pos) {

if (pos != 0) return "<td> </td>";

var cday = c.sb(d.getFullYear(), c.fullday(d.getMonth()+1), c.fullday(d.getDate()));

var day = c.fullday(d.getDate());

if (d.getDay() == 0 ) {

day = "<font color=red>" + day + "</font>";

}

return c.sb("<td align=center>", day, "</td>");

};

}

function Calendar(style) {

var now = new Date();

this.year = now.getFullYear();

this.month = now.getMonth() + 1;

this.style = style;

this.build = function(year, month) {

this.year = year || this.year;

this.month = month || this.month;

var daysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

if (this.isLeapYear(this.year)) daysInMonth[1] = 29;

var maxdays = daysInMonth[this.month-1];

var firstDate = new Date(this.year, this.month-1, 1);

var week = firstDate.getDay();

var startDay = 1 - week;

var ndays = maxdays + week;

if (ndays > 35) ndays = 42;

else if (ndays > 28) ndays = 35;

var HTML = "";

for (var i=0, n=startDay; i<ndays; i++, n++) {

if (i % 7 == 0)

HTML += this.style.line(this, true);

var dayPos = (n<=0) ? -1 : (n>maxdays) ? 1: 0;

HTML += this.style.day(this, _setDay(firstDate,n), dayPos);

if (i % 7 == 6)

HTML += this.style.line(this, false);

}

return HTML;

};

this.buildWeek = function (weekNames) {

var HTML = "";

HTML += this.style.line(this, true);

for (var i=0; i<weekNames.length; i++) {

HTML += this.style.week(this, weekNames[i]);

}

HTML += this.style.line(this, false);

return HTML;

};

/**

* prev year : buildDiff(-1, 0)

* next year : buildDiff(1, 0)

* prev month : buildDiff(0, -1)

* next month : buildDiff(0, 1)

this.buildDiff = function (yeardiff, monthdiff) {

this.year += yeardiff;

this.month += monthdiff;

return this.build();

};

this.isLeapYear = function (year) {

year = year || this.year;

return ((year%4==0) && (year%100!=0)) || (year%400==0);

};

// concat string

this.sb = function () {

var s = "";

for (var i=0; i<arguments.length; i++) {

s += arguments[i];

}

return s;

};

// "9" => "09"

this.fullday = function (day) {

return (day<10) ? "0"+day : ""+day;

};

_setDay = function (d, day) {

return new Date(d.getFullYear(), d.getMonth(), day);

};

}

</script>

转载地址：http://gknti.baihongyu.com/

你可能感兴趣的文章

svn out of date 无法更新到最新版本

查看>>

java杂记

查看>>

RunTime.getRuntime（）.exec（）

VMware Workstation 14中文破解版下载(附密钥)（笔记）

SVN-无法查看log，提示Want to go offline，时间显示1970问题,error主要是 url中有一层的中文进行了2次encode

1062 Talent and Virtue （25 分）

查看>>

1061 Dating （20 分）

查看>>

1060 Are They Equal （25 分）

查看>>

83. Remove Duplicates from Sorted List(easy)

查看>>

88. Merge Sorted Array(easy)

查看>>

leetcode刷题191 位1的个数 Number of 1 Bits（简单） Python Java

查看>>