sync.calendarselect.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

        var i, j, td, tr, x, cellDiv, dayOfWeekName, monthYearDiv, monthYearInput, headerWidth,
            enabled = this.component.isRenderEnabled(),
            dayOfWeekNameAbbreviationLength = parseInt(this.component.render("dayOfWeekNameAbbreviationLength", 2), 10),
            date = this.component.get("date");

        this._firstDayOfWeek = parseInt(this._msg["FirstDayOfWeek"], 10) || 0;

        if (!date) {
            date = new Date();
        }

        this._date = { 
             year: date.getFullYear(), 
             month: date.getMonth(), 
             day: date.getDate()
        };
        this._monthData = new Extras.Sync.CalendarSelect.MonthData(this._date.year, this._date.month, this._firstDayOfWeek);    

        monthYearInput = this._createMonthYearInput();
        this._monthYearWidth = new Core.Web.Measure.Bounds(monthYearInput).width + 10; //FIXME hardcoded.
    
        this._loadRenderData();

        this._div = document.createElement("div");
        this._div.id = this.component.renderId;
        this._div.style.cssText = "width:" + (this._cellWidth * this._xSize) + "px;";
        
        Echo.Sync.LayoutDirection.render(this.component.getLayoutDirection(), this._div);
        Echo.Sync.Font.render(this._font, this._div);
        Echo.Sync.Color.render(this.component.render("foreground", Extras.Sync.CalendarSelect.DEFAULT_FOREGROUND), this._div,
                "color");
        Echo.Sync.Color.render(this.component.render("background", Extras.Sync.CalendarSelect.DEFAULT_BACKGROUND), this._div,
                "backgroundColor");
        Echo.Sync.FillImage.render(this.component.render("backgroundImage"), this._div);
        Echo.Sync.Border.render(this.component.render("border",  Extras.Sync.CalendarSelect.DEFAULT_BORDER), this._div);
        Echo.Sync.Font.render(this.component.render("font"), this._div);
        
        monthYearDiv = document.createElement("div");
        monthYearDiv.align = "center";
        monthYearDiv.style.cssText = "padding:2px 5px;white-space:nowrap;overflow:hidden;"; //FIXME hardcoded
        monthYearDiv.appendChild(monthYearInput);
        this._div.appendChild(monthYearDiv);
        
        this._calendarDiv = document.createElement("div");
        this._calendarDiv.style.cssText = "position:relative;";

        this._calendarDiv.style.width = this._rowWidth + "px";
        this._calendarDiv.style.height = this._calendarHeight + "px";
        this._div.appendChild(this._calendarDiv);
        
        this._currentRowDivs = [];
        
        var headerDiv = document.createElement("div");
        headerDiv.style.cssText = "position:absolute;";
        headerDiv.style.width = (this._cellWidth * 7) + "px";
        headerDiv.style.height = this._headerHeight + "px";
        Echo.Sync.Color.render(this.component.render("headerForeground", Extras.Sync.CalendarSelect.DEFAULT_FOREGROUND), headerDiv,
                "color");
        Echo.Sync.Color.render(this.component.render("headerBackground", Extras.Sync.CalendarSelect.DEFAULT_BACKGROUND), headerDiv,
                "backgroundColor");
        Echo.Sync.FillImage.render(this.component.render("headerBackgroundImage"), headerDiv);
        this._calendarDiv.appendChild(headerDiv);
        
        for (x = 0; x < this._xSize; ++x) {
            cellDiv = document.createElement("div");
            cellDiv.style.cssText = "position:absolute;text-align:center;";
            cellDiv.style.left = (x * (this._cellWidth + this._hCellSpacing)) + "px";
            cellDiv.style.width = this._cellWidth + "px";
            cellDiv.style.height = this._headerHeight + "px";
            cellDiv.style.overflow = "hidden";
            
            dayOfWeekName = this._msg["DayOfWeek." + ((this._firstDayOfWeek + x) % 7)];
            if (dayOfWeekNameAbbreviationLength > 0) {
                dayOfWeekName = dayOfWeekName.substring(0, dayOfWeekNameAbbreviationLength);
            }
            cellDiv.appendChild(document.createTextNode(dayOfWeekName));
            
            headerDiv.appendChild(cellDiv);
        }
        
        this._scrollContainer = document.createElement("div");
        this._scrollContainer.style.cssText = "position:absolute;overflow:hidden;";
        this._scrollContainer.style.top = (this._headerHeight + this._headerMargin) + "px";
        this._scrollContainer.style.height = (this._ySize * this._cellHeight + (this._ySize - 1) * this._vCellSpacing) + "px";
        this._scrollContainer.style.width = this._rowWidth + "px";
        Echo.Sync.Color.render(this._dateForeground, this._scrollContainer, "color");
        Echo.Sync.Color.render(this._dateBackground, this._scrollContainer, "backgroundColor");
        Echo.Sync.FillImage.render(this._dateBackgroundImage, this._scrollContainer);
        this._calendarDiv.appendChild(this._scrollContainer);
        
        this._dayContainerDiv = this._createDayContainer();
        this._scrollContainer.appendChild(this._dayContainerDiv);
                
        parentElement.appendChild(this._div);

        Core.Web.Event.add(this._monthSelect, "change", Core.method(this, this._processMonthSelect), false);
        Core.Web.Event.add(this._yearField, "change", Core.method(this, this._processYearChange), false);
        Core.Web.Event.add(this._yearField, "keyup", Core.method(this, this._processYearKeyUp), false);
        Core.Web.Event.add(this._yearDecSpan, "click", Core.method(this, this._processYearDecrement), false);
        Core.Web.Event.add(this._yearIncSpan, "click", Core.method(this, this._processYearIncrement), false);
        Core.Web.Event.add(this._calendarDiv, "click", Core.method(this, this._processDateSelect), false);
        Core.Web.Event.add(this._calendarDiv, "mouseover", Core.method(this, this._processDateRolloverEnter), false);
        Core.Web.Event.add(this._calendarDiv, "mouseout", Core.method(this, this._processDateRolloverExit), false);

        this._updateSelection();
    },
    
    renderDispose: function(update) {
        Core.Web.Event.removeAll(this._monthSelect);
        Core.Web.Event.removeAll(this._yearField);
        Core.Web.Event.removeAll(this._yearDecSpan);
        Core.Web.Event.removeAll(this._yearIncSpan);
        Core.Web.Event.removeAll(this._calendarDiv);
    
        this._div = null;
        this._monthSelect = null;
        this._yearField = null;
        this._dayContainerDiv = null;
        this._scrollContainer = null;
        this._calendarDiv = null;
    },
    
    renderUpdate: function(update) {
        if (update.isUpdatedPropertySetIn({date: true })) {
            var date = this.component.get("date") || new Date();
            if (this._date.month == date.getMonth() && this._date.day == date.getDate() && this._date.year == date.getFullYear()) {
                 return false;
            }
        }

        // Full Render
        if (this._animation) {
            this._animation.abort();
        }
        var element = this._div;
        var containerElement = element.parentNode;
        Echo.Render.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false;
    },
    
    _setCellStyle: function(cellIndex, rollover, reset) {
        var date = this._monthData.getCellDate(cellIndex);
        var cell = this._getCell(cellIndex);
        if (!reset && date.day == this._date.day && date.month == this._date.month && date.year == this._date.year) {
            // Render selected
            Echo.Sync.Color.renderClear(this._dateSelectedBackground, cell, "backgroundColor");
            Echo.Sync.Color.renderClear(this._dateSelectedForeground, cell, "color");
            Echo.Sync.FillImage.render(this._dateSelectedBackgroundImage, cell);
            Echo.Sync.Border.render(this._dateSelectedBorder, cell);
        } else if (!reset && rollover) {
            // Render rollover
            Echo.Sync.Color.renderClear(this._dateRolloverBackground, cell, "backgroundColor");
            Echo.Sync.Color.renderClear(this._dateRolloverForeground, cell, "color");
            Echo.Sync.FillImage.render(this._dateRolloverBackgroundImage, cell);
            Echo.Sync.Border.render(this._dateRolloverBorder, cell);
        } else {
            if (this._monthData.isCellAdjacent(cellIndex)) {
                // Render adjacent
                Echo.Sync.Color.renderClear(this._dateAdjacentBackground, cell, "backgroundColor");
                Echo.Sync.Color.renderClear(this._dateAdjacentForeground, cell, "color");
            } else {
                // Render default
                Echo.Sync.Border.renderClear(this._dateBorder, cell);
                cell.style.backgroundImage = "";
                cell.style.backgroundColor = "";
                cell.style.color = "";
            }
        }
    },
    
    _setDate: function(newValue) {
        var oldValue = this._date,
            oldCellIndex = this._monthData.getCellIndex(this._date.day),
            newCellIndex,
            overlap;

        this._setCellStyle(oldCellIndex, false, true);
        
        this._rangeCheck(newValue);
        this._date = newValue;

        this._monthData = new Extras.Sync.CalendarSelect.MonthData(newValue.year, newValue.month, this._firstDayOfWeek);

        if (newValue.year == oldValue.year) {
            if (newValue.month == oldValue.month) {
                // Day Change
                newCellIndex = this._monthData.getCellIndex(this._date.day);
                this._setCellStyle(newCellIndex, false);
            } else {
                // Month/Day Change
                if (oldValue.month - newValue.month == 1) {
                    // Displaying previous month.
                    overlap = this._monthData.nextMonthWeek == 4 ? 2 : 1;
                } else if (oldValue.month - newValue.month == -1) {
                    // Displaying next month.
                    var oldMonthData = new Extras.Sync.CalendarSelect.MonthData(oldValue.year, oldValue.month,
                            this._firstDayOfWeek);
                    overlap = oldMonthData.nextMonthWeek == 4 ? 2 : 1;
                } else {
                    overlap = 0;
                }
                this._animateUpdate(true, true, oldValue.month < newValue.month, overlap);
            }
        } else {
            // Year/Month/Day Change
            this._animateUpdate(true, false, oldValue.year < newValue.year);
        }
        
        this._updateSelection();
        
        this._storeValue();
    },
    
    _storeValue: function() {
        this.component.set("date", new Date(this._date.year, this._date.month, this._date.day));
    },
    
    _updateSelection: function() {
        if (parseInt(this._yearField.value, 10) !== this._date.year) {
            this._yearField.value = this._date.year;
        }
        if (this._monthSelect.selectedIndex != this._date.month) {
            this._monthSelect.selectedIndex = this._date.month;
        }
    }
});