GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET)

Commentaire de titours le 26/08/2004 16:27:24

Ce calendrier est génial, du super boulot je tiens à le dire je suis informaticien je sais de quoi je parle, y'a du taf là dessus.
good job !

Commentaire de zegnoo le 02/09/2004 13:48:57

"rajouter des évènement à une date et qui serait linké vers une page qui aurait le descriptif de l'évènement"
c'est pas très clair tout ça:)

(merci pour les compliments:))

Commentaire de zegnoo le 07/10/2004 17:30:56

en appellant sa méthode hide() sur le onchange du champs qui reçoit la date sélectionnée?:)

Commentaire de zegnoo le 12/10/2004 20:25:09

oui c'est possible, tu peux faire apparaitre le calendrier dans un div que tu peux positionner ou tu veux

Commentaire de otd2004 le 25/11/2004 10:30:38

Effectivement ce calendrier est très pro!
J'essaie de le masquer après la sélection d'une date en utilisant la méthode hide() dans la méthode getDate(), le calendrier se masque bien, par contre si je le réouvre, le pointeur de souris se positionne sur la date sélectionnée précédemment en restant bloqué dessus, ce qui a pour effet le déplacement du calendrier au déplacement de la souris. Aurais-je oublié quelque chose ?

Commentaire de ehmarc le 16/12/2004 08:27:09

Genial exactement ce que je cherchai!!!
Merci

Commentaire de zegnoo le 22/12/2004 15:27:00

salut,
effectivement il semble que le changement de la valeur du champs via le calendrier ne génère aucun évènement récupérable par le champs.
A priori, une solution serait d'initialiser un timer au chargement de la page qui teste régulièrement la valeur du champs.
bon dev:)

Commentaire de zegnoo le 11/04/2005 10:06:40

une version prenant en charge plusieurs champs cible est disponible à cette URL :
http://www.zegnoo.net/GnooCalendar/multi

Commentaire de catoio le 24/06/2005 13:19:33

calendrier vivement conseillé :)
good job !!!!

Commentaire de MrCafe le 22/08/2005 00:54:15

Bon boulo ;)
ton scripte sera utilisé plienement
merci et bravo encore

Commentaire de oliverN00noors le 12/10/2005 14:42:42

Ce calendrier est très bien développé félicitation!
Le problème que j'ai c'est que je dois le faire fonctionner :
- sous Firefox : il fonctionne nickel
- sous IE6 et là apperemment cela semble bloquer quelque part puisque le calendrier ne s'affiche pas
Si vous pouvez m'aider je vous en serait reconnaissant
Merci d'avance

Commentaire de oliverN00noors le 14/10/2005 14:32:02

salut,
en fait j'ai résolu le problème,
pour que le calendrier soit compatible avec IE6 il faut rajouter un test document.all et utiliser cette fonction plutot que document.getElementById()
pour etre plus précis dans la fonction this.show() cela donne cela :
//test compatibilité Firefox
else if(document.getElementById(this.div))
{document.getElementById(this.div).innerHTML = ""+this.tag;}
//test compatibilité IE6
else if(document.all)
{document.all[this.div].innerHTML = ""+this.tag;}

Commentaire de oliverN00noors le 14/10/2005 15:13:23

ben document.getElementById(this.div) ne fonctionne pas avec IE6 mais document.all[] fonctionne donc ça résout le problème  
le fichier js que j'ai téléchargé ne comprennait pas ce test

Commentaire de oliverN00noors le 14/10/2005 15:21:52

ben ptet que javais un autre pb mais quand jai débuggé sous IE pour voir d'ou ça venait, ça plantait sur getElementById donc c pour ça que j'ai rajouté le test et rajouté document.all
voilà
et zegnoo ton boulot est nickel ya rien à redire

Commentaire de oki972 le 14/10/2005 15:29:49

Zegnoo t'es un bon lol !

Commentaire de elzedo le 03/11/2005 01:30:29

Bravo pour ce calendrier très bien developpé, il y a pas à dire...
Il est facile d'utilisation, facilement adaptable à ses besoins il est parfait !
Je l'ai modifié pour qu'il se poditionne par rapport à l'élément sur lequel l'évènement est déclenché.. aucun problème ! je vote 10...

Commentaire de teacherfred le 19/11/2005 10:32:34

j'ai finalement trouvé : il faut remplacer dans
//retourne la liste des mois
this.mList=function()
.....


for(var i=0; i<this.month.length; i++)
{
tmp += "<option value='"+i+"'";
if(this.curMonth==i) {
nextmonth = i+1 ;
backmonth = i-1 ;
tmp += " selected";
}
tmp += ">"+ this.month[i] +"</option>\n";
}
tmp += "</select></td><td class='Gtxt'>\n";
tmp += this.yList();

nextyear = this.curYear+1;
backyear = this.curYear-1;

tmp += "</td></tr>";
tmp += "<tr><td colspan='2'>";
// ligne sous les selects mois en an   //onclick='"+this.name+".getMonth(11);'
tmp += "<input type='button' name='preced' onclick='"+this.name+".getMonth("+backmonth+");' class='moisprec'>";
tmp += "<input type='button' name='suivant' onclick='"+this.name+".getMonth("+nextmonth+");' class='moissuiv'>";

tmp += "<input type='button' name='backyear' onclick='"+this.name+".getYear("+backyear+");' class='anprec'>";
tmp += "<input type='button' name='nextyear' onclick='"+this.name+".getYear("+nextyear+");' class='ansuiv'>";

tmp += "</td></tr></table>";



et ensuite définir les styles des boutons :

.moisprec
{
background-image:url(prec.gif);
background-color:#949fc7;
background-repeat:no-repeat;
border-width:0px;
margin-top:5px;
margin-left:20px;
width:20px;
}
.moissuiv
{
background-image:url(suiv.gif);
background-color:#949fc7;
background-repeat:no-repeat;
border-width:0px;
width:20px;
}
.anprec
{
background-image:url(prec.gif);
background-color:#949fc7;
background-repeat:no-repeat;
border-width:0px;
margin-top:5px;
margin-left:40px;
width:20px;
}
.ansuiv
{
background-image:url(suiv.gif);
background-color:#949fc7;
background-repeat:no-repeat;
border-width:0px;
width:20px;
}

// suiv.gif et prec.gif sont des fleches 'suivant' et 'precedent' ; si les gif sont pas trop gros çà rentre sur la ligne
// deux boutons pour modifier les mois et deux pour les années, independemment

j'espère que çà servira, et que ce sera intégré dans la prochaine version...

salut à tous!

Commentaire de trambi le 28/11/2005 23:02:07

En fait, il y a un problème sous IE (6) quand on met la division (balise div) dans un formulaire (balise form). Il faudrait pouvoir dire si on veut mettre la division dans un formulaire ou non.
Excellent travail Zegnoo !

Commentaire de petecruise le 20/12/2005 12:15:54

Le code est vraiment bien fait, mais j'ai une question cependant.
Serait il possible de facilement modifier le format de la date qui est affiche dans le champs du formulaire de destination.
Pour le moment la date est affiche au format jj/mm/aaaa et je voudrais obtenir un format mm/dd/yyyy

Commentaire de Roswell_ le 20/02/2006 14:55:57

Salut,
Il y a en effet un pb sous IE 6 quand le script n'est initialisé qu'au niveau du formulaire.
Exemple:
[code]
<body class="formBody">
<form name='testform' method='get' action='' style='margin:0px;'>
<script id="gnoocalendar" language="JavaScript" src="script/gnoocalendar.js"></script>
<script language="JavaScript1.2" type="text/javascript">
<!--

document.write('<link rel="stylesheet" type="text/css" href="css/gnoocalendar.css">');

document.write('<div id="calend" style="position: absolute; top: 100px; left: 100px; width: 190px; height: 190px; z-index: 99; border: solid 0px #000000;visibility: hidden;">');
document.write('&nbsp;</div>');

var CL = new GnooCalendar("CL", 20, 10 );


function test(input)
{
//CL.init("calend", document.getElementById("testestformield1"));
CL.init("calend", input);
CL.isDragable(true);
CL.setTitle("Choisissez une date");
CL.show();
}
//-->
</script>
<input id="testestformield1" type='text' name='testestformield1' onblur='alert(this.value);' value='' /></td>
<input type='button' name='a' onclick='test(elements["testestformield1"]);' value='cibler ce champs' /></td>
</form>
</body>
[/code]

Le script plante à la ligne 496: document.getElementById(this.div).innerHTML = ""+this.tag;
J'ai essayé avec document.all[this.div].innerHTML = ""+this.tag;
Mais rien y fait.
Si quelqu'un peut m'aider, je ne peux hélas pas modifier la structure du html généré et insérer le script ailleur.

Commentaire de Roswell_ le 20/02/2006 16:56:27

Ok, merci de ta réponse, j'avais pas compris qu'on pouvait pas utiliser les div inclus dans des forms. Changer le document.body.innerHTML pour ajouter le div au premier appel de la fonction semble fonctionner.

Commentaire de 12_darte_12 le 20/03/2006 14:08:42

Je suis d'accord soundy j'ai le même problème c'est bien dommage.

Commentaire de 12_darte_12 le 20/03/2006 15:13:19

J'ai un autre problème, c'est que le calendrier est considéré comme popup.

Commentaire de soundy le 20/03/2006 15:50:21

Ouhaaaaaaaaaaaaaaaa, mais comment fait-il !!! T'es tombé dedans tout petit ???
Merci encore une fois.

@+ Soundy

Commentaire de soundy le 20/03/2006 17:19:54

12_Darte_12 ==>
Repère dans le code HTML la section d'appel du div
<div id="calend" style="position: absolute; top: 1500px; left: 100px; width: 190px; height: 190px; z-index: 99; border: solid 0px #000000;visibility: hidden;">&nbsp;</div>

L'attribut STYLE de la balise, te permet de spécifier les valeurs des options TOP et LEFT pour définir la position exacte de ton calque. Soit respectivement 1500px et 100px en partant d'en haut à gauche si l'option "position" reçoit la valeur "absolute" comme ici, d'ailleurs. style="position: absolute;

Bon courage.

Commentaire de youspim le 23/03/2006 17:08:20

Salut,

Merci ZEGNOO pour ce code, il est tout simplement genial.

@12_DARTE_12: Pour que le calendrier s'affiche à coté de la souris, moi j'ai modifier la fonction show dans le fichier gnoocalendar.js et ca donne ceci -->

[code]
/*
* GnooCalendar.show()
* affiche le calendrier
*/
this.show = function()
{
this.vis = true;
this.tag = "<form name='"+this.name+"_form' method='post'>\n";
this.tag += this.mList();
this.tag += "</form>\n";
/* Récuparation des coordonnées de la souris */
                var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
                var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
                /* Positionnement du div contenant le calendrier à cote de la souris */
                document.getElementById(this.div).style.left = x+18;
                document.getElementById(this.div).style.top = y;
if(document.layers)
{
with(document.layers[this.div])
{
document.open("text/html");
document.write(this.tag);
document.close();
visibility='show';
}
}
else
{
document.getElementById(this.div).innerHTML = ""+this.tag;
document.getElementById(this.div).style.visibility = 'visible';
document.getElementById(this.div).style.display = 'block';
}
return;
}
[/code]

Je ne sais pas si j'ai tout bien fait, mais ça a l'air de bien tourner pour le moment.

A+

Commentaire de zegnoo le 27/03/2006 20:31:40

salut,
bon comme c'est une question récurrente, j'ai ajouté une méthode setFormat qui permet de passer les dates en format englais.
la source est disponible sur ce site.
(et du coup la dernière modif concernant le jour en cours y est aussi)
bon dev:)

Commentaire de GoldPegasus le 13/06/2006 15:42:26

salut avant tous comme l'a dit jeanoook trés bon code cependant j'ai mis ton code dans l'une de mes page et sous IE il m'indique une "erreur d'éxécution interne" après une petit recherche j'ai vue que c'est lors du remplisage de la balise que sa coince je viens te voir parce qe la je ne voie pas le problème.

sinon sous Firfox sa marche :) voula

Commentaire de LudWilhelm le 31/07/2006 21:06:18

Je ne peux que tirer mon chapeau face à une telle performance. Ce calendrier sera pour moi un outil très pratique et m'évitera des heures de développement (sachant que mon temps libre pour développer est très serré) alors que j'arrive à une phase de développement d'un formulaire nécessitant cette fonctionnalité.

De plus, le script est écrit de manière propre.

Donc bravo et merci.

Commentaire de chais_pas_quoi_prendre_comme_pseudo le 01/10/2006 01:05:31

Bonjour,

Super script, bien utile.
Saurais tu, si ce n'est trop demandé, nous le faire avec les dates passées désactivées ?
Jusqu'à date d'aujourd'hui, impossible de sélectionner, puis à partir d'aujourd'hui, sélection possible.

Merci déjà pour le travail accompli ;)

Commentaire de nimp0001 le 14/03/2007 11:37:08

Réponse à  dwarfman78 : Vérifie que tu as bien l'appel à la fonction inti() dans la balise Body de ta page.

Commentaire de elzedo le 14/06/2007 19:13:24

Pour rendre la sélection des jours passés impossible :

1- ajouter la propriété "blockDate" :
this.blockDate = new Boolean(false);

2- modifier la méthode "this.dayCell=function(d,n)" :
// modifications à partir de if(!document.layers)
this.dayCell=function(d,n)
{
var tmp = new String("");
if(this.isFreeDay(d,this.curMonth))
tmp += "<td class='Gfree'";
else
tmp += "<td class='Gc"+n+"'";
if(!document.layers)
{
var _now = new Date();
_now.setHours(0);
_now.setMinutes(0);

var _dateCompare = new Date(this.curYear, this.curMonth, d+1);

if (this.blockDate) {
if (_now <= _dateCompare) {
tmp += "title='"+this.checkDate(d)+" "+this.month[this.curMonth]+" "+this.curYear+"'";
tmp += " onmousedown='"+this.name+".getDate(\"";
tmp += this.checkDate(d)+"/";
tmp += this.checkDate(1+parseInt(this.curMonth))+"/";
tmp += this.curYear+"\"";
tmp += ");' ";
} else {
tmp += "title='"+this.checkDate(d)+" "+this.month[this.curMonth]+" "+this.curYear+"'";
tmp += " style='text-decoration:line-through;'";
tmp += " onmousedown='null'";
}
}
else {
tmp += "title='"+this.checkDate(d)+" "+this.month[this.curMonth]+" "+this.curYear+"'";
tmp += " onmousedown='"+this.name+".getDate(\"";
tmp += this.checkDate(d)+"/";
tmp += this.checkDate(1+parseInt(this.curMonth))+"/";
tmp += this.curYear+"\"";
tmp += ");' ";
}

tmp += " onmouseover='this.className=this.className+\"on\";' ";
tmp += " onmouseout='this.className= this.className.substring(0,this.className.indexOf(\"on\"));'";
}
else
tmp += " width='22' height='16' ";
tmp += ">";
return tmp;
}

3- ajouter la méthode "setBlockDate" :
/*
* GnooCalendar.setBlockDate( Boolean bool )
* Active ou désactive le bloquage des jours antérieurs à la date du jour
*/
this.setBlockDate= function(bool)
{
this.blockDate = bool;
return;
}

4- initialiser le calendrier en ajoutant l'appel à setBlocked :
var cal = new GnooCalendar("cal", 20, 10 );
cal.setBlockDate(true);

Bonne continuation à tous...

Commentaire de toineb11 le 23/07/2007 10:59:36

Très bon outil ! Merci beaucoup ...

Malgré tout j'ai un petit problème général à IE je crois : si j'ai une liste déroulante sous le calendrier, celle-ci s'affiche au dessus. Résultat certains jours sont cachés, et de ce fait non selectionnables. Quelqu'un a déjà palié à ce problème ?

En tout cas, encore merci ! Super taff !

++

Commentaire de Mck le 07/02/2008 14:21:20

Très bon boulot, je l'implémente de suite :)

Commentaire de amrounix le 26/04/2008 11:43:15

jolie code ...un peu lourd mais y'a de l'idée, si ca ne te dérange pas, je vais m'y inspirer pour modifier mon calendrier ,  essaye le mien et dit moi ce que tu en pense ;-) tu pourrais aussi avoir des idées !

Commentaire de Persons le 02/06/2009 15:11:19

Bonjour,
Merci pour ce calendrier.
J'aimerai rajouter le numéro de semaine dans ce calendrier mais je ne vois pas trop comment faire?
Avez vous une piste?