calendar.lib.js

asp的bbs程序

/*
  By Hangring
  #2007.12.27#
  ---
  use list:
  > global.lib.js
  > browser.lib.js
  > events.lib.js
  > node.lib.js
  > css.lib.js
  > popup.lib.js
  ---
  日历
  ---
  包含样式：
  <link rel="stylesheet" href="css/calendar.lib.css" type="text/css" />
*/
function Calendar () {
    // container
    this.container = null;

    //
    this.upper = null;
    this.up = null;
    this.current = null;
    this.down = null;
    this.downer = null;
    this.weekContentContainer = null;

    // shortcur object
    this.shortCut = null;
    this.shortCutContent = null;

    // calendar enable control or not
    this.isControl = false;

    // selected `li` object
    this.selectedItem = null;

    // current selected date
    this.selectedDate = new Date();

    // current show year
    this.showYear = this.selectedDate.getFullYear();
    // current show month
    this.showMonth = this.selectedDate.getMonth();
    // current selected day
    this.showDay = this.selectedDate.getDate();

    // shortcut year & month content object
    this.yearContent = null;
    this.monthContent = null;
    // shortcut selected year & month
    this.shortcutYear = this.showYear;
    this.shortcutMonth = this.showMonth;

    this.yearStep = 1950;

    // css
    this.css = {
        // 容器
        calendar:'calendar',
        // 控制栏
        control:'control',
        // <<
        upper:'upper',
        // <
        up:'up',
        // 当前日期
        current:'current',
        // >
        down:'down',
        // >>
        downer:'downer',
        // 周,日
        week:'week',
        // 针对ie5.5及以下
        week_ie5:'week-ie5',
        // 周标题
        week_title:'wtitle',
        // 周内容
        week_content:'wcontent',
        // 当前日
        current_day:'current-day',
        // 移过
        over:'over',
        // 移出
        out:'out',
        /* 快捷层 */
        // 快捷
        shortcut:'shortcut',
        // 标题
        shortcut_title:'shortcut-title',
        // 标题状态
        selected:'selected',
        unselected:'unselected',
        // 内容
        shortcut_content:'shortcut-content',
        // 针对ie5.5及以下
        shortcut_content_ie5:'shortcut-content-ie5',
        // 特定年被选择
        content_selected:'content-selected',
        content_unselected:'content-unselected'
    };
}
Calendar.Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
Calendar.Months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

// 初始化
Calendar.prototype.Init = function () {
    this.container = oNode.CreateNode('div');
    this.container.id = 'calendar';
    CSS.AddClass(this.container, this.css.calendar);

    this.CreateContent(this.showYear, this.showMonth);
    //this.CreateWeekContent(this.showYear, this.showMonth);
    this.Create(this.showYear, this.showMonth);
};

Calendar.prototype.CreateContent = function (Y, M) {
    var self = this;

    var content = this.content = oNode.CreateNode('ul');
    oNode.AddNode(content, this.container);
    CSS.AddClass(content, this.css.control);

    // previous year
    var upper = this.upper = oNode.CreateNode('li');
    oNode.AddNode(upper, content);
    CSS.AddClass(upper, this.css.upper);

    // previous month
    var up = this.up = oNode.CreateNode('li');
    oNode.AddNode(up, content);
    CSS.AddClass(up, this.css.up);

    // current date
    var current = this.current = oNode.CreateNode('li');
    oNode.AddNode(current, content);
    CSS.AddClass(current, this.css.current);

    // next month
    var down = this.down = oNode.CreateNode('li');
    oNode.AddNode(down, content);
    CSS.AddClass(down, this.css.down);

    // next year
    var downer = this.downer = oNode.CreateNode('li');
    oNode.AddNode(downer, content);
    CSS.AddClass(downer, this.css.downer);

    if (!!this.isControl) {
        oNode.AddNode(oNode.CreateTextNode('<<'), upper);
        Events.AttachEvent(upper, 'click', function (e, th) {
            th = th || this;
            self.SetShowDate(th.Y, th.M);
            self.Create(th.Y, th.M);

            self.ChangeShortCutYear(th.Y);
            self._ContentChange();
        });

        oNode.AddNode(oNode.CreateTextNode('<'), up);
        Events.AttachEvent(up, 'click', function (e, th) {
            th = th || this;
            self.SetShowDate(th.Y, th.M);
            self.Create(th.Y, th.M);

            self.ChangeShortCutMonth(th.M);
            self._ContentChange();
        });

        // 当前时间
        Events.AttachEvent(current, 'click', function () {
            var curDate = new Date();

            //if (self.showYear == curDate.getFullYear() &&
            //    self.showMonth == curDate.getMonth() &&
            //    self.showDay == curDate.getDate()) return;

            self.selectedDate = curDate;
            self.Create(curDate.getFullYear(), curDate.getMonth());
            self.ChangeShortCutState();
            self._ContentChange();
        });
        Events.AttachEvent(current, 'mouseover', function () {
            clearTimeout(self.shortCut.timer);
            self.CreatShortCut();
            self.SetVisible(true);
            //CSS.SetDisplay(self.shortCutContent, true);

            ///
            self.ChangeShortCutState(self.showYear, self.showMonth);
        });
        Events.AttachEvent(current, 'mouseout', function () {
            self.shortCut.timer = setTimeout(function(){
                self.SetVisible(false);
                //CSS.SetDisplay(self.shortCutContent, false);
            }, 1000);
        });

        oNode.AddNode(oNode.CreateTextNode('>'), down);
        Events.AttachEvent(down, 'click', function (e, th) {
            th = th || this;
            self.SetShowDate(th.Y, th.M);
            self.Create(th.Y, th.M);

            self.ChangeShortCutMonth(th.M);
            self._ContentChange();
        });

        oNode.AddNode(oNode.CreateTextNode('>>'), downer);
        Events.AttachEvent(downer, 'click', function (e, th) {
            th = th || this;
            self.SetShowDate(th.Y, th.M);
            self.Create(th.Y, th.M);

            self.ChangeShortCutYear(th.Y);
            self._ContentChange();
        });
    }

    // show shortcur
    var shortCut = this.shortCut = oNode.CreateNode('div');
    oNode.AddNode(shortCut, this.container);
    shortCut.style.position = 'relative';
    shortCut.style.clear = 'both';
    shortCut.timer = 0;

    // ie5.5 及下版本
    var css_ie5 = Browser.IsIE5 ? this.css.week_ie5 : '';

    // week title
    var weekTitle = oNode.CreateNode('ul');
    oNode.AddNode(weekTitle, this.container);
    CSS.AddClass(weekTitle, this.css.week, this.css.week_title, css_ie5);
    weekTitle.innerHTML = "<li>日<\/li><li>一<\/li><li>二<\/li><li>三<\/li><li>四<\/li><li>五<\/li><li>六<\/li>";

    // week content
    this.weekContentContainer = oNode.CreateNode('div');
    oNode.AddNode(this.weekContentContainer, this.container);

    // clear float
    var clear = oNode.CreateNode('div');
    oNode.AddNode(clear, this.container);
    clear.style.clear = 'left';
    //CSS.AddClass(clear, 'calendar-clear');
}

// create week content
Calendar.prototype.CreateWeekContent = function (Y, M) {
    var self = this;

    // ie5.5 及下版本
    var css_ie5 = Browser.IsIE5 ? this.css.week_ie5 : '';

    var curDate = new Date(Y, M, 1);
    //curDate.setFullYear(Y, M, 1);
    // 当前月的第一天是星期几
    var firstDay = curDate.getDay();

    this.weekContentContainer.innerHTML = '';
    var weekContent = oNode.CreateNode('ul');
    oNode.AddNode(weekContent, this.weekContentContainer);
    CSS.AddClass(weekContent, this.css.week, this.css.week_content, css_ie5);

    var i = 0;
    var days = Calendar.Days;
    while (1) {
        var day = oNode.CreateNode('li');
        oNode.AddNode(day, weekContent);

        var _day;
        if (firstDay <= i && i < firstDay + days[M]) {
            _day = day._day = i - firstDay + 1;
            if (_day == this.selectedDate.getDate()/* || (M == 1 && _day == days[M])*/) {
                this.selectedItem = day;
                CSS.AddClass(day, this.css.current_day);
            }
            oNode.AddNode(oNode.CreateTextNode(_day), day);

            Events.AttachEvent(day, 'click', function (e, th) {
                th = th || this;

                CSS.RemoveClass(self.selectedItem, self.css.current_day);
                self.selectedItem = th;
                CSS.AddClass(self.selectedItem, self.css.current_day);

                curDate.setFullYear(Y, M, th._day);
                self._Change(curDate);
            });
            Events.AttachEvent(day, 'mouseover', function (e, th) {
                th = th || this;
                CSS.ReplaceClass(th, self.css.out, self.css.over);
            });
            Events.AttachEvent(day, 'mouseout', function (e, th) {
                th = th || this;
                CSS.ReplaceClass(th, self.css.over, self.css.out);
            });
        }

        if ((i + 1) % 7 == 0) { 
            if(i >= firstDay + days[M] - 1) {
                break;
            }
            weekContent = oNode.CreateNode('ul');
            oNode.AddNode(weekContent, this.weekContentContainer);
            CSS.AddClass(weekContent, this.css.week, this.css.week_content, css_ie5);
        }
        i++;
    }
};

// 显示主日历框架
Calendar.prototype.Create = function (Y, M) {