(Resolvido) Calendário no evento OnFocus

[DeveloperJr]

Pessoal, consegui um calendário free na web, muito bom por sinal.

Porém eu gostária de implementar para que ele apareça sempre que eu der focus no text, para não precisar ter um icone na página.

Alguém tem alguma idéia de como fazer isto?

http://www.softcomplex.com/products/tigra_calendar/

o Js é este:

// Tigra Calendar v4.0.2 (12-01-2009) European (dd-mm-yyyy)
// http://www.softcomplex.com/products/tigra_calendar/
// Public Domain Software... You're welcome.

// default settins
var A_TCALDEF = {
    'months' : ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    'weekdays' : ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
    'yearscroll': true, // show year scroller
    'weekstart': 0, // first day of week: 0-Su or 1-Mo
    'centyear'  : 70, // 2 digit years less than 'centyear' are in 20xx, othewise in 19xx.
    'imgpath' : 'images/calendar/' // directory with calendar images
}
// date parsing function
function f_tcalParseDate (s_date) {

    var re_date = /^\s*(\d{1,2})\/(\d{1,2})\/(\d{2,4})\s*$/;
    if (!re_date.exec(s_date))
        return alert ("Invalid date: '" + s_date + "'.\nAccepted format is dd-mm-yyyy.")
    var n_day = Number(RegExp.$1),
        n_month = Number(RegExp.$2),
        n_year = Number(RegExp.$3);

    if (n_year < 100)
        n_year += (n_year < this.a_tpl.centyear ? 2000 : 1900);
    if (n_month < 1 || n_month > 12)
        return alert ("Invalid month value: '" + n_month + "'.\nAllowed range is 01-12.");
    var d_numdays = new Date(n_year, n_month, 0);
    if (n_day > d_numdays.getDate())
        return alert("Invalid day of month value: '" + n_day + "'.\nAllowed range for selected month is 01 - " + d_numdays.getDate() + ".");

    return new Date (n_year, n_month - 1, n_day);
}
// date generating function
function f_tcalGenerDate (d_date) {
    return (
        (d_date.getDate() < 10 ? '0' : '') + d_date.getDate() + "/"
        + (d_date.getMonth() < 9 ? '0' : '') + (d_date.getMonth() + 1) + "/"
        + d_date.getFullYear()
    );
}

// implementation
function tcal (a_cfg, a_tpl) {

    // apply default template if not specified
    if (!a_tpl)
        a_tpl = A_TCALDEF;

    // register in global collections
    if (!window.A_TCALS)
        window.A_TCALS = [];
    if (!window.A_TCALSIDX)
        window.A_TCALSIDX = [];
    
    this.s_id = a_cfg.id ? a_cfg.id : A_TCALS.length;
    window.A_TCALS[this.s_id] = this;
    window.A_TCALSIDX[window.A_TCALSIDX.length] = this;
    
    // assign methods
    this.f_show = f_tcalShow;
    this.f_hide = f_tcalHide;
    this.f_toggle = f_tcalToggle;
    this.f_update = f_tcalUpdate;
    this.f_relDate = f_tcalRelDate;
    this.f_parseDate = f_tcalParseDate;
    this.f_generDate = f_tcalGenerDate;
    
    // create calendar icon
    this.s_iconId = 'tcalico_' + this.s_id;
    this.e_icon = f_getElement(this.s_iconId);
    if (!this.e_icon) {
        document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Open Calendar" />');
        this.e_icon = f_getElement(this.s_iconId);
    }
    // save received parameters
    this.a_cfg = a_cfg;
    this.a_tpl = a_tpl;
}

function f_tcalShow (d_date) {

    // find input field
    if (!this.a_cfg.controlname)
        throw("TC: control name is not specified");
    if (this.a_cfg.formname) {
        var e_form = document.forms[this.a_cfg.formname];
        if (!e_form)
            throw("TC: form '" + this.a_cfg.formname + "' can not be found");
        this.e_input = e_form.elements[this.a_cfg.controlname];
    }
    else
        this.e_input = f_getElement(this.a_cfg.controlname);

    if (!this.e_input || !this.e_input.tagName || this.e_input.tagName != 'INPUT')
        throw("TC: element '" + this.a_cfg.controlname + "' does not exist in "
            + (this.a_cfg.formname ? "form '" + this.a_cfg.controlname + "'" : 'this document'));

    // dynamically create HTML elements if needed
    this.e_div = f_getElement('tcal');
    if (!this.e_div) {
        this.e_div = document.createElement("DIV");
        this.e_div.id = 'tcal';
        document.body.appendChild(this.e_div);
    }
    this.e_shade = f_getElement('tcalShade');
    if (!this.e_shade) {
        this.e_shade = document.createElement("DIV");
        this.e_shade.id = 'tcalShade';
        document.body.appendChild(this.e_shade);
    }
    this.e_iframe =  f_getElement('tcalIF')
    if (b_ieFix && !this.e_iframe) {
        this.e_iframe = document.createElement("IFRAME");
        this.e_iframe.style.filter = 'alpha(opacity=0)';
        this.e_iframe.id = 'tcalIF';
        this.e_iframe.src = this.a_tpl.imgpath + 'pixel.gif';
        document.body.appendChild(this.e_iframe);
    }
    
    // hide all calendars
    f_tcalHideAll();

    // generate HTML and show calendar
    this.e_icon = f_getElement(this.s_iconId);
    if (!this.f_update())
        return;

    this.e_div.style.visibility = 'visible';
    this.e_shade.style.visibility = 'visible';
    if (this.e_iframe)
        this.e_iframe.style.visibility = 'visible';

    // change icon and status
    this.e_icon.src = this.a_tpl.imgpath + 'no_cal.gif';
    this.e_icon.title = 'Close Calendar';
    this.b_visible = true;
}

function f_tcalHide (n_date) {
    if (n_date)
        this.e_input.value = this.f_generDate(new Date(n_date));

    // no action if not visible
    if (!this.b_visible)
        return;

    // hide elements
    if (this.e_iframe)
        this.e_iframe.style.visibility = 'hidden';
    if (this.e_shade)
        this.e_shade.style.visibility = 'hidden';
    this.e_div.style.visibility = 'hidden';
    
    // change icon and status
    this.e_icon = f_getElement(this.s_iconId);
    this.e_icon.src = this.a_tpl.imgpath + 'cal.gif';
    this.e_icon.title = 'Open Calendar';
    this.b_visible = false;
}

function f_tcalToggle () {
    return this.b_visible ? this.f_hide() : this.f_show();
}

function f_tcalUpdate (d_date) {

    var d_today = this.a_cfg.today ? this.f_parseDate(this.a_cfg.today) : f_tcalResetTime(new Date());
    var d_selected = this.e_input.value == ''
        ? (this.a_cfg.selected ? this.f_parseDate(this.a_cfg.selected) : d_today)
        : this.f_parseDate(this.e_input.value);

    // figure out date to display
    if (!d_date)
        // selected by default
        d_date = d_selected;
    else if (typeof(d_date) == 'number')
        // get from number
        d_date = f_tcalResetTime(new Date(d_date));
    else if (typeof(d_date) == 'string')
        // parse from string
        this.f_parseDate(d_date);
        
    if (!d_date) return false;

    // first date to display
    var d_firstday = new Date(d_date);
    d_firstday.setDate(1);
    d_firstday.setDate(1 - (7 + d_firstday.getDay() - this.a_tpl.weekstart) % 7);
    
    var a_class, s_html = '<table class="ctrl"><tbody><tr>'
        + (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, -1, 'y') + ' title="Previous Year"><img src="' + this.a_tpl.imgpath + 'prev_year.gif" /></td>' : '')
        + '<td' + this.f_relDate(d_date, -1) + ' title="Previous Month"><img src="' + this.a_tpl.imgpath + 'prev_mon.gif" /></td><th>'
        + this.a_tpl.months[d_date.getMonth()] + ' ' + d_date.getFullYear()
            + '</th><td' + this.f_relDate(d_date, 1) + ' title="Next Month"><img src="' + this.a_tpl.imgpath + 'next_mon.gif" /></td>'
        + (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, 1, 'y') + ' title="Next Year"><img src="' + this.a_tpl.imgpath + 'next_year.gif" /></td></td>' : '')
        + '</tr></tbody></table><table><tbody><tr class="wd">';

    // print weekdays titles
    for (var i = 0; i < 7; i++)
        s_html += '<th>' + this.a_tpl.weekdays[(this.a_tpl.weekstart + i) % 7] + '</th>';
    s_html += '</tr>';

    // print calendar table
    var n_date, n_month, d_current = new Date(d_firstday);
    while (d_current.getMonth() == d_date.getMonth() ||
        d_current.getMonth() == d_firstday.getMonth()) {
    
        // print row heder
        s_html +='<tr>';
        for (var n_wday = 0; n_wday < 7; n_wday++) {

            a_class = [];
            n_date = d_current.getDate();
            n_month = d_current.getMonth();

            // other month
            if (d_current.getMonth() != d_date.getMonth())
                a_class[a_class.length] = 'othermonth';
            // weekend
            if (d_current.getDay() == 0 || d_current.getDay() == 6)
                a_class[a_class.length] = 'weekend';
            // today
            if (d_current.valueOf() == d_today.valueOf())
                a_class[a_class.length] = 'today';
            // selected
            if (d_current.valueOf() == d_selected.valueOf())
                a_class[a_class.length] = 'selected';

            s_html += '<td onclick="A_TCALS[\'' + this.s_id + '\'].f_hide(' + d_current.valueOf() + ')"' + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>'

            d_current.setDate(++n_date);
            while (d_current.getDate() != n_date && d_current.getMonth() == n_month) {
                d_current.setHours(d_current.getHours + 1);
                d_current = f_tcalResetTime(d_current);
            }
        }
        // print row footer
        s_html +='</tr>';
    }
    s_html +='</tbody></table>';
    
    // update HTML, positions and sizes
    this.e_div.innerHTML = s_html;

    var n_width  = this.e_div.offsetWidth;
    var n_height = this.e_div.offsetHeight;
    var n_top  = f_getPosition (this.e_icon, 'Top') + this.e_icon.offsetHeight;
    var n_left = f_getPosition (this.e_icon, 'Left') - n_width + this.e_icon.offsetWidth;
    if (n_left < 0) n_left = 0;
    
    this.e_div.style.left = n_left + 'px';
    this.e_div.style.top  = n_top + 'px';

    this.e_shade.style.width = (n_width + 8) + 'px';
    this.e_shade.style.left = (n_left - 1) + 'px';
    this.e_shade.style.top = (n_top - 1) + 'px';
    this.e_shade.innerHTML = b_ieFix
        ? '<table><tbody><tr><td rowspan="2" colspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_tr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td height="' + (n_height - 7) + '" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_mr.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bl.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_br.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tbody></table>'
        : '<table><tbody><tr><td rowspan="2" width="6"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td rowspan="2"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td width="7" height="7"><img src="' + this.a_tpl.imgpath + 'shade_tr.png"></td></tr><tr><td background="' + this.a_tpl.imgpath + 'shade_mr.png" height="' + (n_height - 7) + '"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tr><td><img src="' + this.a_tpl.imgpath + 'shade_bl.png"></td><td background="' + this.a_tpl.imgpath + 'shade_bm.png" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td><img src="' + this.a_tpl.imgpath + 'shade_br.png"></td></tr><tbody></table>';
    
    if (this.e_iframe) {
        this.e_iframe.style.left = n_left + 'px';
        this.e_iframe.style.top  = n_top + 'px';
        this.e_iframe.style.width = (n_width + 6) + 'px';
        this.e_iframe.style.height = (n_height + 6) +'px';
    }
    return true;
}

function f_getPosition (e_elemRef, s_coord) {
    var n_pos = 0, n_offset,
        e_elem = e_elemRef;

    while (e_elem) {
        n_offset = e_elem["offset" + s_coord];
        n_pos += n_offset;
        e_elem = e_elem.offsetParent;
    }
    // margin correction in some browsers
    if (b_ieMac)
        n_pos += parseInt(document.body[s_coord.toLowerCase() + 'Margin']);
    else if (b_safari)
        n_pos -= n_offset;
    
    e_elem = e_elemRef;
    while (e_elem != document.body) {
        n_offset = e_elem["scroll" + s_coord];
        if (n_offset && e_elem.style.overflow == 'scroll')
            n_pos -= n_offset;
        e_elem = e_elem.parentNode;
    }
    return n_pos;
}

function f_tcalRelDate (d_date, d_diff, s_units) {
    var s_units = (s_units == 'y' ? 'FullYear' : 'Month');
    var d_result = new Date(d_date);
    d_result['set' + s_units](d_date['get' + s_units]() + d_diff);
    if (d_result.getDate() != d_date.getDate())
        d_result.setDate(0);
    return ' onclick="A_TCALS[\'' + this.s_id + '\'].f_update(' + d_result.valueOf() + ')"';
}

function f_tcalHideAll () {
    for (var i = 0; i < window.A_TCALSIDX.length; i++)
        window.A_TCALSIDX[i].f_hide();
}    

function f_tcalResetTime (d_date) {
    d_date.setHours(0);
    d_date.setMinutes(0);
    d_date.setSeconds(0);
    d_date.setMilliseconds(0);
    return d_date;
}

f_getElement = document.all ?
    function (s_id) { return document.all[s_id] } :
    function (s_id) { return document.getElementById(s_id) };

if (document.addEventListener)
    window.addEventListener('scroll', f_tcalHideAll, false);
if (window.attachEvent)
    window.attachEvent('onscroll', f_tcalHideAll);
    
// global variables
var s_userAgent = navigator.userAgent.toLowerCase(),
    re_webkit = /WebKit\/(\d+)/i;
var b_mac = s_userAgent.indexOf('mac') != -1,
    b_ie5 = s_userAgent.indexOf('msie 5') != -1,
    b_ie6 = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1;
var b_ieFix = b_ie5 || b_ie6,
    b_ieMac  = b_mac && b_ie5,
    b_safari = b_mac && re_webkit.exec(s_userAgent) && Number(RegExp.$1) < 500;

[ESerra]

Movendo PHP » JS.

[DeveloperJr]

Pessoal, resolvi o problema usando este calendario.

http://www.tidbits.com.br/click-calendario...os-em-portugues