Popup Calendar 'Facebook style'

 

here is the code for the moment !!!

window.ie6 = (document.all && !window.opera && !window.XMLHttpRequest);

function addEvent(obj, e, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(e, fn, false);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on"+e, fn);
        return r;
    } else {
        return false;
    }
}
/* Position Functions */

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return {left: curleft, top: curtop};
}

// Wrap code with module pattern.
(function() {
    var global = this;
    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var popup = null;
    var isDisplayed = false;
    var currentId = '';
    var startDay = 7;
    var interval = null;
    var calendar = {};

    var today = new Date();
    today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

    popup = document.createElement('div');
    popup.className = 'popup_calendar';
    popup.style.display = 'none';
    popup.innerHTML = ' ';

    document.body.appendChild(popup);

    // timer for auto display after .5 sec of mouse out
    addEvent(popup, 'mouseover', function(e) {clearInterval(interval);});
    addEvent(popup, 'mouseout', function(e) {interval = setInterval(hide, 500);});

    var draw = function()
    {
        var cal = calendar[currentId];
        var html = '<table cellpadding="0" cellspacing="0"><thead><tr><td class="prev_month"><a onclick="popup_calendar_adjust(-1);">&lsaquo;</a></td><td class="month_title" colspan="5">'+cal.months[cal.month] + ' ' + cal.year+'</td><td class="next_month"><a onclick="popup_calendar_adjust(1);">&rsaquo;</a></td></tr><tr><th>'+cal.days[0]+'</th><th>'+cal.days[1]+'</th><th>'+cal.days[2]+'</th><th>'+cal.days[3]+'</th><th>'+cal.days[4]+'</th><th>'+cal.days[5]+'</th><th>'+cal.days[6]+'</th></tr></thead><tbody><tr>';

        var daysInMonth = 32 - new Date(cal.year, cal.month, 32).getDate();
        var firstDay = new Date(cal.year, cal.month, 1);
        var lastDay  = new Date(cal.year, cal.month, daysInMonth);
        var firstWeekDay = firstDay.getDay();
        var lastWeekDay  = lastDay.getDay();

        for (var i=0; i < firstWeekDay; i++) {
            html += '<td class="empty">&nbsp;</td>';
        }

        for (i=1; i <= daysInMonth; i++) {
            var thisDay = new Date(cal.year, cal.month, i);
            var isToday = thisDay.getTime() == today.getTime() ? 'today': '';
            var isFieldDay = thisDay.getTime() == fieldDate.getTime() ? ' selected': '';

            if (thisDay.getDay() == 0 && i != 1)
                html += "<tr>";

            html += '<td><a class="' + isToday + isFieldDay + '" onclick="popup_calendar_select('+cal.year+', '+cal.month+', '+i+')">' + i + '</a></td>';

            if (thisDay.getDay() == 6)
                html += '</tr>';
        }

        for (i=lastWeekDay; i < 6; i++)
            html += '<td class="empty">&nbsp;</td>';

        if (lastWeekDay != 6) html += '</tr>';

        html += '</tbody></table>';

        popup.innerHTML = html;

        var coors = findPos(cal.toggler);
        popup.style.position = 'absolute';
        popup.style.top = coors.top+20 + 'px';
        popup.style.left = coors.left-1 + 'px';
        popup.style.display = 'block';

        if (window.ie6)
            document.body.className += ' hide_selects';
    }

    var show = function(id)
    {
        isDisplayed = true;
        currentId = id;
        var cal = calendar[id];

        if (cal.input.value) {
            fieldDate = new Date(cal.input.value.replace(/-/g, '/'));
            if (fieldDate == 'Invalid Date')
                fieldDate = today;
        } else {
            fieldDate = today;
        }

        cal.year  = fieldDate.getFullYear();
        cal.month = fieldDate.getMonth();
        cal.day   = fieldDate.getDate();

        draw();
    }

    var hide = function()
    {
        isDisplayed = false;
        popup.style.display = 'none';
        clearInterval(interval);

        currentId = '';

        if (window.ie6)
            document.body.className = document.body.className.replace(' hide_selects', '');
    }

    var toggle = function(id)
    {
        if (isDisplayed && id && id == currentId) {
            hide();
        } else {
            show(id);
        }
    }

    var adjust_month = function(offset)
    {
        var cal = calendar[currentId];
        if (offset == 1) {
            if (cal.month == 11) {
                cal.month = 0;
                cal.year++;
            } else cal.month++;
        }
        else {
            if (cal.month == 0) {
                cal.month = 11;
                cal.year--;
            } else cal.month--;
        }
        draw();
    }

    var select = function(y, m, d)
    {
        var cal = calendar[currentId];
        cal.year = y;
        cal.month = m;
        cal.day = d;

        cal.input.value = y +'-'+ (m < 9 ? '0'+(m+1): (m+1)) +'-'+ ((d < 10) ? '0'+d: d);

        hide();

        // fire event onSelect
        if (typeof cal.onSelect == 'function')
            cal.onSelect(y, m, d);
    }

    global.PopupCalendar = function(id, toggler)
    {
        calendar[id] = this;

        this.months = months;
        this.days = days;

        this.year = this.month = this.day = this.onSelect = null;

        this.input = document.getElementById(id);
        this.toggler = toggler != null ? document.getElementById(toggler): this.input;

        this.toggle = function() {toggle(id);}

        addEvent(this.toggler, 'click', this.toggle);
    }

    global.popup_calendar_adjust = adjust_month;
    global.popup_calendar_select = select;

})();

2006 - now © Philippe Archambault, made by Frog CMS