/* (C) www.dhtmlgoodies.com, September 2005 Version 1.2, November 8th - 2005 - Added background in IE Version 1.3, November 12th - 2005 - Fixed top bar position in Opera 7 Version 1.4, December 28th - 2005 - Support for Spanish and Portuguese Version 1.5, January 18th - 2006 - Fixed problem with next-previous buttons after a month has been selected from dropdown Version 1.6, February 22nd - 2006 - Added variable which holds the path to images. Format todays date at the bottom by use of the todayStringFormat variable Pick todays date by clicking on todays date at the bottom of the calendar Version 2.0 May, 25th - 2006 - Added support for time(hour and minutes) and changing year and hour when holding mouse over + and - options. (i.e. instead of click) This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland */ var languageCode = 'en'; // Possible values: en,ge,no,nl,es,pt-br,fr // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 doctype for hungarian) var calendar_display_time = true; // Format of current day at the bottom of the calendar // [todayString] = the value of todayString // [dayString] = day of week (examle: mon, tue, wed...) // [UCFdayString] = day of week (examle: Mon, Tue, Wed...) ( First letter in uppercase) // [day] = Day of month, 1..31 // [monthString] = Name of current month // [year] = Current year var todayStringFormat = '[todayString] [UCFdayString]. [day]. [monthString] [year]'; var pathToImages = '../../../images/'; // Relative to your HTML file var speedOfSelectBoxSliding = 200; // Milliseconds between changing year and hour when holding mouse over "-" and "+" - lower value = faster var intervalSelectBox_minutes = 5; // Minute select box - interval between each option (5 = default) var calendar_offsetTop = 0; // Offset - calendar placement - You probably have to modify this value if you're not using a strict doctype var calendar_offsetLeft = 0; // Offset - calendar placement - You probably have to modify this value if you're not using a strict doctype var calendarDiv = false; var MSIE = false; var Opera = false; if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0)MSIE=true; if(navigator.userAgent.indexOf('Opera')>=0)Opera=true; switch(languageCode){ case "en": /* English */ var monthArray = ['January','February','March','April','May','June','July','August','September','October','November','December']; var monthArrayShort = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var dayArray = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; var weekString = 'Week'; var todayString = ''; break; case "ge": /* German */ var monthArray = ['Januar','Februar','M?rz','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; var monthArrayShort = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']; var dayArray = ['Mon','Die','Mit','Don','Fre','Sam','Son']; var weekString = 'Woche'; var todayString = 'Heute'; break; case "no": /* Norwegian */ var monthArray = ['Januar','Februar','Mars','April','Mai','Juni','Juli','August','September','Oktober','November','Desember']; var monthArrayShort = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des']; var dayArray = ['Man','Tir','Ons','Tor','Fre','Lør','Søn']; var weekString = 'Uke'; var todayString = 'Dagen i dag er'; break; case "nl": /* Dutch */ var monthArray = ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December']; var monthArrayShort = ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec']; var dayArray = ['Ma','Di','Wo','Do','Vr','Za','Zo']; var weekString = 'Week'; var todayString = 'Vandaag'; break; case "es": /* Spanish */ var monthArray = ['Enero','Febrero','Marzo','April','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; var monthArrayShort =['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic']; var dayArray = ['Lun','Mar','Mie','Jue','Vie','Sab','Dom']; var weekString = 'Semana'; var todayString = 'Hoy es'; break; case "pt-br": /* Brazilian portuguese (pt-br) */ var monthArray = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']; var monthArrayShort = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']; var dayArray = ['Seg','Ter','Qua','Qui','Sex','Sáb','Dom']; var weekString = 'Sem.'; var todayString = 'Hoje é'; break; case "fr": /* French */ var monthArray = ['Janvier','F?vrier','Mars','Avril','Mai','Juin','Juillet','Ao?t','Septembre','Octobre','Novembre','D?cembre']; var monthArrayShort = ['Jan','Fev','Mar','Avr','Mai','Jun','Jul','Aou','Sep','Oct','Nov','Dec']; var dayArray = ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim']; var weekString = 'Sem'; var todayString = "Aujourd'hui"; break; case "ru": /* Russian - Remember to use encoding windows-1251 , i.e. the tag. */ var monthArray = ['??????','???????','????','??????','???','????','????','??????','????????','???????','??????','???????']; var monthArrayShort = ['???','???','???','???','???','???','???','???','???','???','???','???']; var dayArray = ['??','??','??','??','??','??','??']; var weekString = '#'; var todayString = '???????'; break; case "da": /*Danish*/ var monthArray = ['januar','februar','marts','april','maj','juni','juli','august','september','oktober','november','december']; var monthArrayShort = ['jan','feb','mar','apr','maj','jun','jul','aug','sep','okt','nov','dec']; var dayArray = ['man','tirs','ons','tors','fre','l?r','s?n'] var weekString = 'Uge'; var todayString = 'I dag er den'; break; case "hu": /* Hungarian - Remember to use UTF-8 encoding, i.e. the tag */ var monthArray = ['Janu??r','Febru??r','M??rcius','??prilis','M??jus','J??nius','J??lius','Augusztus','Szeptember','Okt??ber','November','December']; var monthArrayShort = ['Jan','Feb','M??rc','??pr','M??j','J??n','J??l','Aug','Szep','Okt','Nov','Dec']; var dayArray = ['H??','Ke','Sze','Cs','P??','Szo','Vas']; var weekString = 'H??t'; var todayString = 'Mai nap'; break; case "it": /* Italian*/ var monthArray = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre']; var monthArrayShort = ['Gen','Feb','Mar','Apr','Mag','Giu','Lugl','Ago','Set','Ott','Nov','Dic']; var dayArray = ['Lun',';Mar','Mer','Gio','Ven','Sab','Dom']; var weekString = 'Settimana'; var todayString = 'Oggi è il'; break; case "se": /* Svenska */ var monthArray = ['Januari','Februari','Mars','April','Maj','Juni','juli','Augusti','September','Oktober','November','December']; var monthArrayShort = ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']; var dayArray = ['M?','Ti','On','To','Fr','L?','S?']; var weekString = 'Vecka'; var todayString = 'Idag'; break; } var daysInMonthArray = [31,28,31,30,31,30,31,31,30,31,30,31]; var currentMonth; var currentYear; var currentHour; var currentMinute; var calendarContentDiv; var returnDateTo; var returnFormat; var activeSelectBoxMonth; var activeSelectBoxYear; var activeSelectBoxHour; var activeSelectBoxMinute; var iframeObj = false; var returnDateToYear; var returnDateToMonth; var returnDateToDay; var returnDateToHour; var returnDateToMinute; var inputYear; var inputMonth; var inputDay; var inputHour; var inputMinute; var calendarDisplayTime = false; var selectBoxHighlightColor = '#D60808'; // Highlight color of select boxes var selectBoxRolloverBgColor = '#E2EBED'; // Background color on drop down lists(rollover) var selectBoxMovementInProgress = false; var activeSelectBox = false; function cancelCalendarEvent() { return false; } function isLeapYear(inputYear) { if(inputYear%400==0||(inputYear%4==0&&inputYear%100!=0)) return true; return false; } var activeSelectBoxMonth = false; var activeSelectBoxDirection = false; function highlightMonthYear() { if(activeSelectBoxMonth)activeSelectBoxMonth.className=''; activeSelectBox = this; if(this.className=='monthYearActive'){ this.className=''; }else{ this.className = 'monthYearActive'; activeSelectBoxMonth = this; } if(this.innerHTML.indexOf('-')>=0 || this.innerHTML.indexOf('+')>=0){ if(this.className=='monthYearActive') selectBoxMovementInProgress = true; else selectBoxMovementInProgress = false; if(this.innerHTML.indexOf('-')>=0)activeSelectBoxDirection = -1; else activeSelectBoxDirection = 1; }else selectBoxMovementInProgress = false; } function showMonthDropDown() { if(document.getElementById('monthDropDown').style.display=='block'){ document.getElementById('monthDropDown').style.display='none'; }else{ document.getElementById('monthDropDown').style.display='block'; document.getElementById('yearDropDown').style.display='none'; document.getElementById('hourDropDown').style.display='none'; document.getElementById('minuteDropDown').style.display='none'; } } function showYearDropDown() { if(document.getElementById('yearDropDown').style.display=='block'){ document.getElementById('yearDropDown').style.display='none'; }else{ document.getElementById('yearDropDown').style.display='block'; document.getElementById('monthDropDown').style.display='none'; document.getElementById('hourDropDown').style.display='none'; document.getElementById('minuteDropDown').style.display='none'; } } function showHourDropDown() { if(document.getElementById('hourDropDown').style.display=='block'){ document.getElementById('hourDropDown').style.display='none'; }else{ document.getElementById('hourDropDown').style.display='block'; document.getElementById('monthDropDown').style.display='none'; document.getElementById('yearDropDown').style.display='none'; document.getElementById('minuteDropDown').style.display='none'; } } function showMinuteDropDown() { if(document.getElementById('minuteDropDown').style.display=='block'){ document.getElementById('minuteDropDown').style.display='none'; }else{ document.getElementById('minuteDropDown').style.display='block'; document.getElementById('monthDropDown').style.display='none'; document.getElementById('yearDropDown').style.display='none'; document.getElementById('hourDropDown').style.display='none'; } } function selectMonth() { document.getElementById('calendar_month_txt').innerHTML = this.innerHTML currentMonth = this.id.replace(/[^\d]/g,''); document.getElementById('monthDropDown').style.display='none'; for(var no=0;no=0){ currentMonth=currentMonth-1;; if(currentMonth<0){ currentMonth=11; currentYear=currentYear-1; } }else{ currentMonth=currentMonth+1;; if(currentMonth>11){ currentMonth=0; currentYear=currentYear/1+1; } } writeCalendarContent(); } function createMonthDiv(){ var div = document.createElement('DIV'); div.className='monthYearPicker'; div.id = 'monthPicker'; for(var no=0;no=0){ var startYear = yearItems[1].innerHTML/1 -1; if(activeSelectBoxYear){ activeSelectBoxYear.style.color=''; } }else{ var startYear = yearItems[1].innerHTML/1 +1; if(activeSelectBoxYear){ activeSelectBoxYear.style.color=''; } } for(var no=1;no=0){ var startHour = hourItems[1].innerHTML/1 -1; if(startHour<0)startHour=0; if(activeSelectBoxHour){ activeSelectBoxHour.style.color=''; } }else{ var startHour = hourItems[1].innerHTML/1 +1; if(startHour>14)startHour = 14; if(activeSelectBoxHour){ activeSelectBoxHour.style.color=''; } } var prefix = ''; for(var no=1;no14)startHour=14; var subDiv = document.createElement('DIV'); subDiv.innerHTML = ' - '; subDiv.onclick = changeSelectBoxHour; subDiv.onmouseover = highlightMonthYear; subDiv.onmouseout = function(){ selectBoxMovementInProgress = false;}; subDiv.onselectstart = cancelCalendarEvent; div.appendChild(subDiv); for(var no=startHour;no=0){ if(this.src.indexOf('left')>=0)this.src = pathToImages + 'left.gif'; if(this.src.indexOf('right')>=0)this.src = pathToImages + 'right.gif'; }else{ if(this.src.indexOf('left')>=0)this.src = pathToImages + 'left_over.gif'; if(this.src.indexOf('right')>=0)this.src = pathToImages + 'right_over.gif'; } } function highlightClose() { if(this.src.indexOf('over')>=0){ this.src = pathToImages + 'close.gif'; }else{ this.src = pathToImages + 'close_over.gif'; } } function closeCalendar(){ document.getElementById('yearDropDown').style.display='none'; document.getElementById('monthDropDown').style.display='none'; document.getElementById('hourDropDown').style.display='none'; document.getElementById('minuteDropDown').style.display='none'; calendarDiv.style.display='none'; if(iframeObj)iframeObj.style.display='none'; if(activeSelectBoxMonth)activeSelectBoxMonth.className=''; if(activeSelectBoxYear)activeSelectBoxYear.className=''; } function writeTopBar() { var topBar = document.createElement('DIV'); topBar.className = 'topBar'; topBar.id = 'topBar'; calendarDiv.appendChild(topBar); // Left arrow var leftDiv = document.createElement('DIV'); leftDiv.style.marginRight = '1px'; var img = document.createElement('IMG'); img.src = pathToImages + 'left.gif'; img.onmouseover = highlightArrow; img.onclick = switchMonth; img.onmouseout = highlightArrow; leftDiv.appendChild(img); topBar.appendChild(leftDiv); if(Opera)leftDiv.style.width = '16px'; // Right arrow var rightDiv = document.createElement('DIV'); rightDiv.style.marginRight = '1px'; var img = document.createElement('IMG'); img.src = pathToImages + 'right.gif'; img.onclick = switchMonth; img.onmouseover = highlightArrow; img.onmouseout = highlightArrow; rightDiv.appendChild(img); if(Opera)rightDiv.style.width = '16px'; topBar.appendChild(rightDiv); // Month selector var monthDiv = document.createElement('DIV'); monthDiv.id = 'monthSelect'; monthDiv.onmouseover = highlightSelect; monthDiv.onmouseout = highlightSelect; monthDiv.onclick = showMonthDropDown; var span = document.createElement('SPAN'); span.innerHTML = monthArray[currentMonth]; span.id = 'calendar_month_txt'; monthDiv.appendChild(span); var img = document.createElement('IMG'); img.src = pathToImages + 'down.gif'; img.style.position = 'absolute'; img.style.right = '0px'; monthDiv.appendChild(img); monthDiv.className = 'selectBox'; if(Opera){ img.style.cssText = 'float:right;position:relative'; img.style.position = 'relative'; img.style.styleFloat = 'right'; } topBar.appendChild(monthDiv); var monthPicker = createMonthDiv(); monthPicker.style.left = '37px'; monthPicker.style.top = monthDiv.offsetTop + monthDiv.offsetHeight + 1 + 'px'; monthPicker.style.width ='60px'; monthPicker.id = 'monthDropDown'; calendarDiv.appendChild(monthPicker); // Year selector var yearDiv = document.createElement('DIV'); yearDiv.onmouseover = highlightSelect; yearDiv.onmouseout = highlightSelect; yearDiv.onclick = showYearDropDown; var span = document.createElement('SPAN'); span.innerHTML = currentYear; span.id = 'calendar_year_txt'; yearDiv.appendChild(span); topBar.appendChild(yearDiv); var img = document.createElement('IMG'); img.src = pathToImages + 'down.gif'; yearDiv.appendChild(img); yearDiv.className = 'selectBox'; if(Opera){ yearDiv.style.width = '50px'; img.style.cssText = 'float:right'; img.style.position = 'relative'; img.style.styleFloat = 'right'; } var yearPicker = createYearDiv(); yearPicker.style.left = '113px'; yearPicker.style.top = monthDiv.offsetTop + monthDiv.offsetHeight + 1 + 'px'; yearPicker.style.width = '35px'; yearPicker.id = 'yearDropDown'; calendarDiv.appendChild(yearPicker); var img = document.createElement('IMG'); img.src = pathToImages + 'close.gif'; img.style.styleFloat = 'right'; img.onmouseover = highlightClose; img.onmouseout = highlightClose; img.onclick = closeCalendar; topBar.appendChild(img); if(!document.all){ img.style.position = 'absolute'; img.style.right = '2px'; } } function writeCalendarContent() { var calendarContentDivExists = true; if(!calendarContentDiv){ calendarContentDiv = document.createElement('DIV'); calendarDiv.appendChild(calendarContentDiv); calendarContentDivExists = false; } currentMonth = currentMonth/1; var d = new Date(); d.setFullYear(currentYear); d.setDate(1); d.setMonth(currentMonth); var dayStartOfMonth = d.getDay(); if(dayStartOfMonth==0)dayStartOfMonth=7; dayStartOfMonth--; document.getElementById('calendar_year_txt').innerHTML = currentYear; document.getElementById('calendar_month_txt').innerHTML = monthArray[currentMonth]; document.getElementById('calendar_hour_txt').innerHTML = currentHour; document.getElementById('calendar_minute_txt').innerHTML = currentMinute; var existingTable = calendarContentDiv.getElementsByTagName('TABLE'); if(existingTable.length>0){ calendarContentDiv.removeChild(existingTable[0]); } var calTable = document.createElement('TABLE'); calTable.cellSpacing = '0'; calendarContentDiv.appendChild(calTable); var calTBody = document.createElement('TBODY'); calTable.appendChild(calTBody); var row = calTBody.insertRow(-1); var cell = row.insertCell(-1); cell.innerHTML = weekString; cell.style.backgroundColor = selectBoxRolloverBgColor; for(var no=0;no0 && colCounter%7==0){ var row = calTBody.insertRow(-1); var cell = row.insertCell(-1); var week = getWeek(currentYear,currentMonth,no); cell.innerHTML = week; // Week cell.style.backgroundColor = selectBoxRolloverBgColor; } var cell = row.insertCell(-1); if(currentYear==inputYear && currentMonth == inputMonth && no==inputDay){ cell.className='activeDay'; } cell.innerHTML = no; cell.onclick = pickDate; colCounter++; } if(!document.all){ if(calendarContentDiv.offsetHeight) document.getElementById('topBar').style.top = calendarContentDiv.offsetHeight + document.getElementById('timeBar').offsetHeight + document.getElementById('topBar').offsetHeight -1 + 'px'; else{ document.getElementById('topBar').style.top = ''; document.getElementById('topBar').style.bottom = '0px'; } } if(iframeObj){ if(!calendarContentDivExists)setTimeout('resizeIframe()',350);else setTimeout('resizeIframe()',10); } } function resizeIframe() { iframeObj.style.width = calendarDiv.offsetWidth + 'px'; iframeObj.style.height = calendarDiv.offsetHeight + 'px' ; } function pickTodaysDate() { var d = new Date(); currentMonth = d.getMonth(); currentYear = d.getFullYear(); pickDate(false,d.getDate()); } function pickDate(e,inputDay) { var month = currentMonth/1 +1; if(month<10)month = '0' + month; var day; if(!inputDay && this)day = this.innerHTML; else day = inputDay; if(day/1<10)day = '0' + day; if(returnFormat){ returnFormat = returnFormat.replace('dd',day); returnFormat = returnFormat.replace('mm',month); returnFormat = returnFormat.replace('yyyy',currentYear); returnFormat = returnFormat.replace('hh',currentHour); returnFormat = returnFormat.replace('ii',currentMinute); returnDateTo.value = returnFormat; }else{ for(var no=0;no=0){ tmpHour = inputField.value.substr(hourPos,2); currentHour = tmpHour; }else{ currentHour = '00'; } var minutePos = format.indexOf('ii'); if(minutePos>=0){ tmpMinute = inputField.value.substr(minutePos,2); currentMinute = tmpMinute; }else{ currentMinute = '00'; } }else{ var d = new Date(); currentMonth = d.getMonth(); currentYear = d.getFullYear(); currentHour = '08'; currentMinute = '00'; tmpDay = d.getDate(); } inputYear = currentYear; inputMonth = currentMonth; inputDay = tmpDay/1; if(!calendarDiv){ initCalendar(); }else{ if(calendarDiv.style.display=='block'){ closeCalendar(); return false; } writeCalendarContent(); } returnFormat = format; returnDateTo = inputField; positionCalendar(buttonObj); calendarDiv.style.visibility = 'visible'; calendarDiv.style.display = 'block'; if(iframeObj){ iframeObj.style.display = ''; iframeObj.style.height = '140px'; iframeObj.style.width = '195px'; } setTimeProperties(); updateYearDiv(); updateMonthDiv(); updateMinuteDiv(); updateHourDiv(); } function displayCalendarSelectBox(yearInput,monthInput,dayInput,hourInput,minuteInput,buttonObj) { if(!hourInput)calendarDisplayTime=false; else calendarDisplayTime = true; currentMonth = monthInput.options[monthInput.selectedIndex].value/1-1; currentYear = yearInput.options[yearInput.selectedIndex].value; if(hourInput){ currentHour = hourInput.options[hourInput.selectedIndex].value; inputHour = currentHour/1; } if(minuteInput){ currentMinute = minuteInput.options[minuteInput.selectedIndex].value; inputMinute = currentMinute/1; } inputYear = yearInput.options[yearInput.selectedIndex].value; inputMonth = monthInput.options[monthInput.selectedIndex].value/1 - 1; inputDay = dayInput.options[dayInput.selectedIndex].value/1; if(!calendarDiv){ initCalendar(); }else{ writeCalendarContent(); } returnDateToYear = yearInput; returnDateToMonth = monthInput; returnDateToDay = dayInput; returnDateToHour = hourInput; returnDateToMinute = minuteInput; returnFormat = false; returnDateTo = false; positionCalendar(buttonObj); calendarDiv.style.visibility = 'visible'; calendarDiv.style.display = 'block'; if(iframeObj){ iframeObj.style.display = ''; iframeObj.style.height = calendarDiv.offsetHeight + 'px'; iframeObj.style.width = calendarDiv.offsetWidth + 'px'; } setTimeProperties(); updateYearDiv(); updateMonthDiv(); updateHourDiv(); updateMinuteDiv(); }