JQuery + JSCalendar

Este pequeno artigo mostrarei como integrar o JQuery com o famoso JSCalendar (http://www.dynarch.com/projects/calendar/).

Primeiramente, recomendo colocar as bibliotecas de terceiros em uma pasta separada, para não ter que mexer nelas. Eu coloco em {pasta_principal_do_projeto}/tparty/js/jscalendar/

Obs: Para quem for usar a versão traduzida para o portugues, precisa aplicar uma atualização, senão o calendário não vai aparecer de forma correta. De forma simples e rápida, edite o arquivo jscalendar/lang/calendar-pt.js e na linha 46 adicione:

Calendar._FD = 0;

ou para quem trabalha com o linux: fiz uma função em shell script:

PatchJSCalendar()

{

PATH_TPARTY='/caminho/da/pasta/tparty; # Caminho completo da pasta tparty

JSCALENDAR='jscalendar-1.0'; # Nome da pasta do JSCalendar

cd $PATH_TPARTY;

echo '--- calendar-pt.js 2005-03-07 17:06:35.000000000 +0000
+++ calendar-pt.js.new 2008-03-31 02:44:41.000000000 +0000
@@ -43,6 +43,10 @@
"Sab",
"Dom");

+// First day of the week. “0″ means display Sunday first, “1″ means display
+// Monday first, etc.
+Calendar._FD = 0;
+
// full month names
Calendar._MN = new Array
(”Janeiro”,
‘ > /tmp/calendar-pt.js.diff
patch $PATH_TPARTY/$JSCALENDAR/lang/calendar-pt.js -p0 -N -s -i /tmp/calendar-pt.js.diff

}

Agora adicione as linhas no seu código HTML para chamar o script jscalendar, na ordem que está, lembrando que de chamar o script do jquery.js também

<script src=”/tparty/jquery/jquery.js” type=”text/javascript”></script>
<script src=”/tparty/js/jscalendar/jscalendar.js” type=”text/javascript”></script>
<link href=”/tparty/js/jscalendar/calendar-win2k-1.css” rel=”stylesheet” type=”text/css” />
<script src=”/tparty/js/jscalendar/lang/calendar-pt.js” type=”text/javascript”></script>
<script src=”/tparty/js/jscalendar/calendar-setup.js” type=”text/javascript”></script>

<form id=”form”>
<input type=”text” name=”data” id=”data”>
</form>

<script>

// Adicione o código abaixo no seu arquivo de biblioteca JS ou deixe-o aqui

/*
* JS Calendar $(selector).jscalendar(options)
* @param options = options jscalendar - são as mesmas opções usadas no jscalendar
* http://www.dynarch.com/demos/jscalendar/doc/html/reference.html
* Use: $(”#data1″).jscalendar({showsTime: true, ifFormat: “%m/%d/%Y %H:%M:%S”});
*
* Autor: Candido Tominaga
* Data: 28/03/2008

* Atualizado: 27-08-2008 - Chained

*/

$.fn.jscalendar = function _JsCalendar(conf)
{
        var options = conf || {};
        options.DateFormat = options.DateFormat  || "%d/%m/%Y";
				options.showsTime = options.showsTime || false;

        $(this).each(function()
        {
                var id = $(this)[0].id;
                var idb = id + "_jsc";
                $(this).after('<input type="button" id="'+idb+'" value="..." />');
                 Calendar.setup({
                          inputField  : id,         // ID of the input field
                          ifFormat    : options.DateFormat,    // the date format
                          button      : idb,       // ID of the button
			  showsTime 	: options.showsTime
                        });
        });
        return this;
}

</script>

27 de julho de 2008, recentemente descobri que se colocar o calendário várias vezes, pode ocorrer um erro

Aqui esta o patch

— calendar.original.js    2008-07-21 16:20:56.000000000 -0300
+++ calendar.js    2008-07-21 16:21:27.000000000 -0300
@@ -1790,6 +1790,7 @@
return str;
};

+if ( !Date.prototype.__msh_oldSetFullYear ) {
Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear;
Date.prototype.setFullYear = function(y) {
var d = new Date(this);
@@ -1797,6 +1798,7 @@
if (d.getMonth() != this.getMonth())
this.setDate(28);
this.__msh_oldSetFullYear(y);
+}
};

// END: DATE OBJECT PATCHES

veja mais como aplicar o patch
http://www.qprocura.com.br/blog/