Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET)


Information sur la source

Catégorie :Date & Heure Classé sous : calendrier, dynamique, javascript, date, gnoo Niveau : Initié Date de création : 08/08/2004 Date de mise à jour : 27/03/2006 20:29:32 Vu / téléchargé: 39 035 / 7 090

Note :
8,83 / 10 - par 29 personnes
8,83 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (70)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
Calendrier dynamique

###############################################
Fonctionnalités :
* v1 27/04/2004
- insertion de plusieurs calendriers possibles
- interface customisable via le fichier css
- changement dynamique de champs cible
- changement dynamique de liste de jours fèriés
- changement dynamique de l'intitulé du calendrier
* v1.1 19/09/2004
- calendriers dragables (sauf NS4 et IE5Mac)
* v1.2 03/10/2004
- ajout d'une méthode getMonth pour afficher directement le mois désiré
- ajout d'une méthode getYear pour afficher directement l'année désiré
- ajout d'un bouton de fermeture du calendrier
* v1.3 25/11/2004 :
- fermeture automatique à la sélection d'une date
- correction bug lié au positionnement lors du masquage
* v1.4 09/01/2005 :
- correction bug scrollbar des listes avec Mozilla Firefox1.0
* v1.5 15/10/2005 :
- correction bug sur les listes avec Safari
* v1.6 27/03/2006 :
- ajout d'une méthode setFormat pour choisir le format de date ("fr" ou "us")
###############################################

Environnements testés :
             IE4 IE5+  NS4.x NS7.x Mozilla Opera7.x
fonctionne : non oui   oui   oui   oui     oui
interface :  non clean beurk clean clean   clean

 

Conclusion

###############################################
BUG-REPORT :
Opera7.03 : changement de champs cible impossible si le formulaire contenant
le champs cible est après le div d'affichage du calendrier dans le code du document
Pour signaler un bug ou demander des infos : zegnoo@free.fr

###############################################
UTILISATION :
Inclusion des deux fichiers necessaires :
<link rel='stylesheet' href='gnoocalendar.css' />
<script type="text/javascript" src="gnoocalendar.js"></script>
Instanciation:
var CL = new GnooCalendar("CL", 20, 10 );
paramêtres :
1 : nom de l'instance
2 : nombre d'années avant la date courante à afficher
3 : nombre d'années aprè la date courante à afficher

Initialisation:
CL.init("calend", document.forms["testform"].elements["testestformield1"]);
paramêtres :
1 : id du calque (div) d'affichage
2 : objet dont la propriété value va recevoir le String contenant la date selectionnée (typiquement un champs texte)

Activer l'option Drag&Drop:
CL.isDragable(true/false);

changement de champs cible :
CL.setTarget(document.forms["testform"].elements["testestformield2"]);
paramêtre :
1 : objet dont la propriété value va recevoir le String contenant la date selectionnée

Affichage :
CL.show();

Masquage :
CL.hide();

Changement du format de date (défaut : fr) :
CL.setFree("fr"/"us");


Affichage des jours feriés :
CL.setFree(true/false);

changement de la liste des jours feriés :
CL.setFreeDay(new Array("03/02", "31/07", "19/11"));

changement du titre du calendrier :
CL.setTitle("nouveau titre");

changement du mois affiché :
CL.getMonth(11); // novembre

changement de l'anné affichée :
CL.getYear(2003);
###############################################

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

15 août 2004 12:26:23 :
ajout d'un shoot-écran
19 septembre 2004 12:16:15 :
possibilité de rendre les calendriers dragables.
03 octobre 2004 17:34:23 :
3 modifications : - ajout d'une méthode getMonth pour afficher directement le mois désiré - ajout d'une méthode getYear pour afficher directement l'année désiré - ajout d'un bouton de fermeture du calendrier
25 novembre 2004 13:53:53 :
* v1.3 25/11/2004 : - fermeture automatique à la sélection d'une date - correction du bug lié au positionnement lors du masquage (bug signalé le 25/11/2004 par otd2004)
09 janvier 2005 15:31:31 :
correction d'un bug lié à l'utilisation de la scrollbar de la liste des années avec Mozilla Firefox1.0
15 octobre 2005 16:18:52 :
correction d'un bug avec Safari concernant les listes
27 mars 2006 20:29:34 :
ajout d'une méthode setFormat pour choisir le format de date ("fr" ou "us")

Commentaires et avis

signaler à un administrateur
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 !

signaler à un administrateur
Commentaire de theoreme le 01/09/2004 16:43:14

Super, mais sans vouloir compliquer les choses, je voudrait pouvoir rajouter des évènement à une date et qui serait linké vers une page qui aurait le descriptif de l'évènement. Balaise non !!!!!!

signaler à un administrateur
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:))

signaler à un administrateur
Commentaire de seufer le 07/10/2004 17:28:19

super ton calendrier
mais comment fait-on pour qu'il se cache une fois que l'on a choisi un date

merci

signaler à un administrateur
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?:)

signaler à un administrateur
Commentaire de seufer le 12/10/2004 16:24:33

ok merci, j'avais trouvé entre temps :)
par contre je voudrais positionné le calendrier en fonction de la position du champs, tu crois que c'est possible

En fait je ne voudrais pas que 2 calendriers se superposent

merci !!

signaler à un administrateur
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

signaler à un administrateur
Commentaire de zegnoo le 13/10/2004 17:11:37

concernant la disparition du calendrier lors de la selection d'une date, j'ai dit des bétises précédemment (à propos du onchange), la solution est de faire appelle à la méthode hide() du calendrier dans sa méthode getDate().

signaler à un administrateur
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 ?

signaler à un administrateur
Commentaire de zegnoo le 25/11/2004 14:00:21

nan nan, tu n'as rien oublié, ça serait plutôt moi:)
j'ai corrigé le problème (en ne déplaçant le calendrier que lorsqu'il est apparent).
bon dev:)

signaler à un administrateur
Commentaire de ehmarc le 16/12/2004 08:27:09

Genial exactement ce que je cherchai!!!
Merci

signaler à un administrateur
Commentaire de ehmarc le 16/12/2004 08:54:52

J'ai un petit souci quand meme...
quand je je rempli mon champ txt avec le calendar mais sur ce champ txt jai aussi des evenements (onChange et onkeyup) qui malheureusement ne s'effectue pas quand je fait cette transposition
Une solution??
++

signaler à un administrateur
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:)

signaler à un administrateur
Commentaire de oki972 le 21/03/2005 16:49:38

Je voudrais savoir comment renseigner plusieurs champ avec un seul calendrier. Sinon, c'est vraiment du bon boulot, avec ce petit plus si on peut m'aider il sera super pro! Help me zegnoo... ;)

signaler à un administrateur
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

signaler à un administrateur
Commentaire de aminix9 le 22/05/2005 19:40:31

salu les amis je sui un débutant et j arrive pa à utiliser le calendrier !!
j ai téléchargé les 3 fichiers mais je sai pa koi faire !!
au secours !!

signaler à un administrateur
Commentaire de catoio le 24/06/2005 13:19:33

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

signaler à un administrateur
Commentaire de oki972 le 24/06/2005 14:14:58

Ben tu lances le fichier index.html pour commencer, ensuite tu regardes le code, pour comprendre un peu comment ça fonctionne. Le fichier Js (c'est le script) tu verras il n'y a pas beaucoup à changer (c'est selon que tu as 1, ou 2 champ de dates)
Sinon Zegnoo merci pour le travail que tu as fait avec moi, j'avais omis de mettre une note, alors je suis revenu te mettre un 10/10 tant pour la qualité du code que pour l'aide rapide que tu m'as fourni. @+ l'ami, Je vous envoie le bonjour des antilles!

signaler à un administrateur
Commentaire de MrCafe le 22/08/2005 00:54:15

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

signaler à un administrateur
Commentaire de oliverN00noors le 12/10/2005 14:42:17

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

signaler à un administrateur
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

signaler à un administrateur
Commentaire de zegnoo le 14/10/2005 13:00:34

salut:)
désolé pour la lenteur des réponses je ne suis pas très disponible en ce moment.
tu peux être un peu plus descriptif par rapport à ton problème?
le div qui contient le calendrier ne doit pas être dans un tableau car il a des coordonnées absolues, ça vient peut être de la.
bon dev:)

signaler à un administrateur
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;}


signaler à un administrateur
Commentaire de zegnoo le 14/10/2005 15:05:26

l'exemple téléchargeable sur ce site fonctionne sous IE6.
ton problème devait être autre.
la rustine proposée ne me semble donc pas nécessaire:)

signaler à un administrateur
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

signaler à un administrateur
Commentaire de oki972 le 14/10/2005 15:17:20

Zegnoo t'as bien fait ton boulot ca marche sous IE sans modification aucune. Oliv' tu dois avoir un pb! @+ les gars!

signaler à un administrateur
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

signaler à un administrateur
Commentaire de zegnoo le 14/10/2005 15:22:07

a ma connaissance le fichier téléchargeable fonctionne sous IE6 (bis).
(et IE6 gère la méthode document.getElementById, conforme au DOM)
le problème devait plutôt se situer au niveau de son implémentation dans ta page.
Mais si tu as trouvé une solution qui te convient c'est nickel, inutile de pollémiquer:)
bon dev.

signaler à un administrateur
Commentaire de oki972 le 14/10/2005 15:29:49

Zegnoo t'es un bon lol !

signaler à un administrateur
Commentaire de oliverN00noors le 14/10/2005 15:38:55

exactement zegnoo
bon dev à toi aussi

signaler à un administrateur
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...

signaler à un administrateur
Commentaire de teacherfred le 19/11/2005 09:43:58

salut Zegnoo !

très pro ! sauf drag&drop qui plante... mais c'est pas grave

sinon j'ai ajouté une couleur différente pour le jour courant :

il faut créer la classe Gctoday (et Gctodayon) dans le css

puis

il faut changer dans le JS cette fonction : this.dayCell=function(d,n) par ce qui suit :

// affichage des cellules avec jours existants
this.dayCell=function(d,n)
{
var today = new Date();
var classjour=new String('');
var tmp = new String("");
var ferie=new String('');

// class jour férié
if(this.isFreeDay(d,this.curMonth))
tmp += "<td class='Gfree'";

// class today
else if (
this.checkDate(d)==today.getDate()
&& this.curMonth==today.getMonth()
&& this.curYear==today.getYear()
) {
tmp += "<td class='Gctoday'";
}

// autres jours
else
tmp += "<td class='Gc"+n+"'";
if(!document.layers)
{
if(this.isFreeDay(d,this.curMonth)) ferie = "FERIE" ;
tmp += "title='"+this.checkDate(d)+" "+this.month[this.curMonth]+" "+this.curYear+" "+ferie+"'";
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;
}
// fin nouvelle fonction


le seul problème que j'ai, c'est pour rajouter des boutons "mois suivant" et "mois precedent" sous les selects :
j'ai fait des test mais marche pas... si quelqu'un a une idée... merci d'avance !!!

Fred

signaler à un administrateur
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!

signaler à un administrateur
Commentaire de zegnoo le 19/11/2005 14:06:57

comment ça le drag&drop plante?:)
quel navigateur et quel OS utilises tu stp?

signaler à un administrateur
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 !

signaler à un administrateur
Commentaire de gwel75 le 16/12/2005 15:18:46

Super code !! Exactement ce que je cherchais, un calendrier côté client, paramétrable, léger (un seul fichier script), efficace, sobre. Bravo vraiment.
Je confirme que sous IE6 le contrôle ne s'affiche pas quand on met la div dans un formulaire, il suffit de la sortir et c'est bon.
Excellent ! Bravo et merci.

signaler à un administrateur
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

signaler à un administrateur
Commentaire de DJTIME le 13/01/2006 09:56:03

zegnoo t'es un roi mec !!!!
mille merci pour le code :)


signaler à un administrateur
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.

signaler à un administrateur
Commentaire de zegnoo le 20/02/2006 15:10:55

c'est pourtant logique, le cas a déjà été évoqué.
et c'est pas super propre de tout mettre entre les balises <form> (je serais curieux de savoir ce que le validateur W3C en pense:)).

une solution consisterait à écrire dynamiquement le code du div à l'extérieur du formulaire (genre document.body.innerHTML += "<div ...</div>").
à tester:)

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de soundy le 15/03/2006 15:50:20

Salut @ tous et !!! BRAVO !!! à toi zegnoo pour ce travail exemplaire.
J'étais en train d'implémenter les MàJ de teacherfred quand j'ai remarqué que le :
<code>
if (this.checkDate(d)==today.getDate()&& this.curMonth==today.getMonth()&& this.curYear==today.getYear())
        {
            tmp += "<td class='Gctoday'";
        }
</code>
ne fonctionne pas sous Firefox. Quelqu'un aurait-il une idée ???
Oui, j'ai bien créé ma classe dans la feuille de style.
Cela s'affiche correctement sous IE6.

D'avance merci.

Soundy

PS : Je suis aussi à la recherche d'un tuto ou d'un cours ACCESSIBLE sur le DOM et ses getElementById et autres parentNode, parentElement etc, etc ...

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de zegnoo le 20/03/2006 14:21:53

salut,
ben vous en avez du souci....:)
il est préférable d'utiliser la méthode getFullYear() de l'objet date.
un exemple qui devrait répondre à votre problématique:
http://www.zegnoo.net/gnoocalendar/

(dès que j'ai un peu de temps je le mets en ligne içi)

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de zegnoo le 20/03/2006 15:24:25

ah bon et par quoi il est considéré comme popup???

signaler à un administrateur
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

signaler à un administrateur
Commentaire de 12_darte_12 le 20/03/2006 16:20:09

BAh je ne sais pas, mais sous IE avec le popup de windows XP sp2, j'ai la petite barre jaune qui me dit qu'il bloque un popup. Mais la je réessaye et ca me le fait plus, j'ai pas très bien compris ce qu'il s'est passé. Désolé pour le dérangement Zegnoo.

Une petite question supplémentaire, j'aimerai ouvrir le calendrier juste a côté de l'image sur laquelle je clique. Mais je ne sais pas comment faire.

En récuperant l'emplacement du curseur et en ouvrant le calendrier au coordonnées de celui-ci au moment du clique, je pense que cela doit marcher mais au niveau du code, je n'arrive pas a le transcrire.

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de 12_darte_12 le 20/03/2006 17:45:21

Le problème est que dans ce cassi mon ecran est reduit il ne m'affcihe pas au je veux le calendrier, c'est pour cela que je pensai au niveau du clique de la souris.

signaler à un administrateur
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+

signaler à un administrateur
Commentaire de cypripedium le 27/03/2006 15:56:17

Bonjour à tous,

Un grand merci à Gnoo pour ce calendrier. Impec. En revanche, je ne suis pas un pro du code, loin de la, et je me demandais s'il est possible de retourner la date ds le formulaire au format AAAA-MM-JJ au lieu de JJ/MM/AAAA, pour être utilisable en MysQL

signaler à un administrateur
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:)

signaler à un administrateur
Commentaire de jeanoook le 02/06/2006 10:13:32

Salut, tout d'abord super script!
Comment faire pour ouvrir un fichier lorsque l'on clique sur une date plutot que de renvoyer la date dans un champs ?Je débute en javascript je n'ai pas trouvé l'endroit à modifier !
Merci !

signaler à un administrateur
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

signaler à un administrateur
Commentaire de remedywu le 31/07/2006 15:08:43

Tout d'abord bravo pour ce beau calendrier.
Sous FF pas de pb par contre sous IE 6 j'ai un souci de transparence dans mon formulaire quand le calendrier est déplacé au dessus d'une requete php dans un Slect qui appelle mes champs Options.
Si vous avez eut ce pb ou si vous des idées...

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de soundy le 08/09/2006 14:39:48

Hello à tous.

ZEGNOO, t'auras jamais fini avec des gars comme nous, à chaque fois on en veux ++.

Bon là j'en ai une pas mal. C'est pas très grave, ça n'arrive que pas souvent mais bon, si on peut faire mieux, c mieux. ;-)

( fichier .js )
Dans this.dayCell=function(d,n)
<code>
if(this.isFreeDay(d,this.curMonth))
{
tmp += "<td class='Gfree'";
}
else if (this.checkDate(d)==now.getDate()
&& this.curMonth==now.getMonth()
&& this.curYear==now.getFullYear())
{
tmp += "<td class='Gc'";
}
else
{
tmp += "<td class='Gc"+n+"'";
}
</code>

Lors de l'affectation du style du jour courant on écarte subtilement la possibilité sournoise que notre jour puisse être  ET "aujourd'hui" ET "férié" ... Rhooooooo le vilain jour!!!

Alors là à froid, je propose de rajouter un style destiné à ce jour précis. Style qui rappellerai les caracéristique des fériés ET du jour courant.

Alors bon, voilà, c'était juste pour dire ...
un peu comme le chmilblic, quoi!

Allez, bye et merci encore pour ton travail. @+

signaler à un administrateur
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 ;)

signaler à un administrateur
Commentaire de dwarfman78 le 20/02/2007 12:18:49

Erreur : document.getElementById(this.div) has no properties
Fichier source : js/gnoocalendar.js
Ligne : 515

J'utilise Firefox avec le moteur de template smarty.
quelqu'un aurait une idée ?

signaler à un administrateur
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.

signaler à un administrateur
Commentaire de Plugman le 13/06/2007 10:51:55

Super script bravo !

J'aurais aimé savoir si il serait possible d'implémenter une méthode pour ne rentre cliquable que certain jours, genre passer un tableau en paramètre avec dedans tous les jours cliquable ?

Par exemple, pour voir cliquer que sur les jours ouvrés, ou l'inverse que les week-end, ...

Merci.

signaler à un administrateur
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...

signaler à un administrateur
Commentaire de adamo901 le 18/06/2007 10:49:05

bonjour tout le monde :
J'ai un petit soucis :
Quand j'utilise le calendrier dans mes pages (mes pages ont leurs propre CSS), le gnoocalendar change de forme?

Comment faire pour que le calendrier ne tien pas en compte le CSS que j'utilise pour mes pages html.

signaler à un administrateur
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 !

++

signaler à un administrateur