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);">‹</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);">›</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"> </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"> </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;
})();