javascript-based-kalender

/**
 * @author Eris
 * @version 0.2.0 (Beta)
 * @date 09-01-2007
 * @download http://www.schipbreukeling.nl/docs/scripts/kalender.html
 * @license GPL http://www.schipbreukeling.nl/docs/license.html or license.txt
 *  Creates a layer with a calender where the user can select one date.
 *  Copyright (C) 2007  Eris
 *  
 *  This program is free software; you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation; either version 2 of the License, or
 *  (at your option) any later version.
 *  
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *  
 *  You should have received a copy of the GNU General Public License
 *  along with this program; if not, write to the Free Software
 *  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 *  
 *  See readme.txt for more info.
 */

/*Config setting*/
//create a data object for the date now so we don't need to change it next year. (today.getFullYear() to get the current year) Offcourse you can set a "own" value
var today = new Date();
var start_year = today.getFullYear();
//end year
var end_year =  today.getFullYear() + 5;
//location of the "close" cross
var delete_cross = '/images/scripts/calendar/delete.png';

//language settings.
var calendar = 'Calendar';
//month names
var month_names = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
//names of the days. 0 = sunday, 6 = saturday
//we don't care about "logic" values because the user will not see it. If they will see it he/she got enough knowlege about browsers and their quirks
var day_names = new Array('Sun','Mon','Tue','Wen','Thu','Fri','Sat');

//default config arrays please do not change!
//array with the days (0 = January 11 = December)
var days = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//we don't take care about leap year. This will be done later
//W3C  Dom support . Prevent browser errors.
if(document.getElementsByTagName && document.createElement){
var w3c = true;
}else{
var w3c = false;
}
/**
 * function show_calendar(e)
 * @param e
 * @return nothing
 * @id show_calendar
 * Create a DHTML Layer. Add the basic elements and runs one time generate_table()
 * Do not use this function when you want to use a inline onclick action!
 */

function show_calendar(e){
  if(!w3c) return;
    if (!e) var h = window.event.srcElement;
    else var h = e.target;
    if (h.nodeType == 3) // defeat Safari bug
        h = h.parentNode;
    //small short cut
    var d = document;
    if(!d.getElementById('calendar')){
    //create a div element
    var div = d.createElement('div');
    //insert div inside the dom tree
    d.body.appendChild(div);
        div.id = 'calendar';
        //before we forget we need to add a reminder. Otherwise the script will forget which input field should be field.
    var hidden = d.createElement('input');
    hidden.type = 'hidden';
    hidden.id= 'id';
    //behind this line you need to edit the location of the "input field"
    //When you want to add a onclick on the field h.id is enough
    //When you want to add a image (See example) you need to change it to:
    //h.previousSibling.id; Find by testing and just general knowlege of the dom structure
    hidden.value = h.previousSibling.id;
    div.appendChild(hidden);
    var mouseY = findPosY(h);
    var mouseX = findPosX(h);

    //placing block
    mouseY = mouseY + 20;
    div.style.top = mouseY +'px';
    div.style.left = mouseX +'px';
    //everything is ready continu to fill the div
    finish_div();
}
}



/**
 * function show_calendar_inline()
 * @param {element)
 * @return null
 * @id show_calendar_inline()
 * Description: the inline version of the show calendar
 * Call it like onclick="show_calender_inline(this)"
 */
function show_calendar_inline(element){
  if(!w3c) return;
    //if the onclick is add to a other element the input we should move to there. Other whis use var h = element;
  h = element.previousSibling;
    //small short cut
    var d = document;
    if(!d.getElementById('calendar')){
    //create a div element
    var div = d.createElement('div');
    //insert div inside the dom tree
    d.body.appendChild(div);
        div.id = 'calendar';
        //before we forget we need to add a reminder. Otherwise the script will forget which input field should be field.
    var hidden = d.createElement('input');
    hidden.type = 'hidden';
    hidden.id= 'id';
    hidden.value = h.id;
    div.appendChild(hidden);
    var mouseY = findPosY(element);
    var mouseX = findPosX(element);

    //placing block
    mouseY = mouseY + 20;
    div.style.top = mouseY +'px';
    div.style.left = mouseX +'px';
    //every thing is ready now finish the div
    finish_div();
}
}
/**
 * function finish_div
 * @param null
 * @return null
 * @id finish_div
 * Description: Finish the div element
 */
function finish_div(){
  if(!w3c) return;
    var d = document;
    var div = d.getElementById('calendar');
        var title = div.appendChild(d.createElement('div'));
          title.className = 'title';
          title.innerHTML = '<div class="float_right"><img src="'+delete_cross+'" alt="Close" id="close"/></div>'+calendar;
              d.getElementById('close').onclick = close_window;
    //maak een date object
    var now = new Date();

    //create a selectbox with monts
    var select1 = d.createElement('select');
    select1.id = 'month';
    for( i = 0; i < month_names.length; i++){
        var option = d.createElement('option');
        option.value = i;
        option.appendChild(document.createTextNode(month_names[i]));
        if(now.getMonth() == i){
            option.selected = 'selected';
        }
        select1.appendChild(option);
    }
    //make now a select box for the curent year and the next year.)
    var select2 = d.createElement('select');
    select2.id = 'year';
    for( i = start_year; i < (end_year + 1); i++){
            var option = d.createElement('option');
        if(now.getFullYear() == i){
            option.selected = 'selected';
        }
        option.value = i;
        option.appendChild(document.createTextNode(i));
        select2.appendChild(option);
    }
    //add a onchange action
    select1.onchange = generate_table;
    select2.onchange = generate_table;
    
    div.appendChild(select1);
    div.appendChild(select2);

    //now we generate a table. This is done by a second function so I don't have to copy past it twice.
    generate_table();
}

/**
 * function generate_table()
 * @param null
 * @return null
 * @id generate_table
 * Description: Generates a html table with all dates. Starting with the Sunday (Inside JS as 0 and end on Saturday as 6)
 * date and year will fetched from the input fields earlier generated. By default Client side date / time. Or user set.
 * output will become a HTML tabel maximum 7 cols and 6 rows ( Sunday, Monday, Tuesday, Wendsday, Thursday, Friday, Saturday)
 * Rows Days of the week, (th)
 */
function generate_table(){
  if(!w3c) return;
    //look inside the div calendar if there exits a table. If true we trash it.
    if(document.getElementById('table')){
    //its exits trash it!
        document.getElementById('calendar').removeChild(document.getElementById('table'));
    }
    var table = document.createElement('table');
    var tbody = table.appendChild(document.createElement('tbody'));
    if(!document.getElementById('calendar').appendChild(table)){
        alert('Error');
    }
    table.id = 'table';

    var month = document.getElementById('month');
    var year = document.getElementById('year');
    //now look for the values
    var m = month.options[month.selectedIndex].value;
    var y = year.options[year.selectedIndex].value;
    //we just now generate a date
    var dates = new Date();
    dates.setYear(y);
    dates.setMonth(m);
    dates.setDate(1);
    //traceback first day of the month
    var firstDay = dates.getDay();
    //create a tr with day names
    var tr = document.createElement('tr');
    for(i = 0; i < day_names.length;i++){
        var th = document.createElement('th');
        th.innerHTML = day_names[i];
        tr.appendChild(th);
        
    }
    tbody.appendChild(tr);
    //we got maybe a leap year lets check it.
    //I don't care about the leap years each 100 years because its then no leap...  
    //(2100, 2200 and 2300) because this will happen 3 times every 400 year
    // it will be a not a leap year. Script will show only 1 day wrong
    if(dates.getFullYear() % 4 == 0){
        //leap year
        //februari
        days[1] = 29;
    }

    //we now just loop trough the the var firstDay (string) till we have reached the first day. If so stop script
    //create a element tr
    var tr = document.createElement('tr');
    for(i = 0; i < firstDay;i++){
        var td = document.createElement('td');
        //should be empty
        td.innerHTML = '';
        tr.appendChild(td);
    }
    //because the maxium value will be 6 we don't need to create a new row. Next for list we have to
    var w = 0;
    for(i = 1; i <= days[m];i++){
        var td = document.createElement('td');
        td.innerHTML = i;
        //add a onclick event
        td.onclick = close_return;
        tr.appendChild(td);
        if((i + firstDay) % 7 == 0){
            //save tr in table
            tbody.appendChild(tr);
            //create a new tr
            var tr = document.createElement('tr');
            w = -1;
        }
     w++;
    }    
    for(w;w % 7 > 0;w++ ){
            var td = document.createElement('td');
        //should be empty
        td.innerHTML = '';
        tr.appendChild(td);
    }
    table.appendChild(tr);
    
}
/**
 * function close_return()
 * @param null
 * @return null
 * @id close_return
 * Description: Return the selected date back to the input field
 */
function close_return(e){
  if(!w3c) return;
    if (!e) var h = window.event.srcElement;
    else var h = e.target;
    if (h.nodeType == 3) // defeat Safari bug
        h = h.parentNode;
    var id = document.getElementById('id').value;
    //create the date
    var d = h.innerHTML;
    if(d.length == 1){
        d = '0' + d;
    }
    var month = document.getElementById('month');
    var year = document.getElementById('year');
    //now look for the values
    //it seems to be that the month was a string instead of a int. Multiply m with 1 and add 1 . Then check to add a leading zero.
    var m = month.options[month.selectedIndex].value * 1 + 1;
    m = m.toString();
    
    if(m.length == 1){
        m = '0' + m;
    }
    var y = year.options[year.selectedIndex].value;
  //d = day
  //m = month
  //y = year
    var wanted_date = d + '-' + m + '-' + y;
    document.getElementById(id).value = wanted_date;
    
    close_window();
}

/**
 * function close_window()
 * @param null
 * @return null
 * @id close_close_window
 * Description: Remove DHTML layer
 */
function close_window(){
  if(!w3c)  return;
            document.body.removeChild(document.getElementById('calendar'));
}

/**
 * function findPosX()
 * @param {obj}
 * @return {int}
 * @id findPosX
 * @author PPK
 * Description: Find the X position of a element
 */
function findPosX(obj)
{

    var curleft = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}
/**
 * function findPosY()
 * @param {obj}
 * @return {int}
 * @id findPosY
 * @author PPK
 * Description: Find the Y position of a element
 */
function findPosY(obj)
{
    var curtop = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}