begin process at 2012 02 11 05:09:57
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Date & Heure

 > GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET)

GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET)


 Information sur la source

Note :
8,87 / 10 - par 30 personnes
8,87 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
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é :57 644 / 8 454

Auteur : zegnoo

Ecrire un message privé
Commentaire sur cette source (73)
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

###############################################
BU G-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["testestformie ld1"]);
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

Les Membres Club peuvent 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")

 Sources de la même categorie

Source avec Zip CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien
OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand
SAINT DU JOUR par tefa24600
Source avec Zip Source avec une capture NIPCLOCK 1.2 par neep
COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

 Sources en rapport avec celle ci

GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx
Source avec Zip Source avec une capture MICRO-CALENDAR par amrounix
Source avec Zip TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM par LogansRun
Source avec une capture AFFICHE UN CALENDRIER SOUS UNE ZONE DE SAISIE par amrounix
Source avec Zip 2 VERSIONS DE CALENDRIER DATEUR par jperre

Commentaires et avis

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 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 !!!!!!

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 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

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 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 !!

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 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().

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 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:)

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

Genial exactement ce que je cherchai!!!
Merci

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??
++

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 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... ;)

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 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 !!

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

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

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!

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: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

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 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:)

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 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:)

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 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!

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 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.

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

Zegnoo t'es un bon lol !

Commentaire de oliverN00noors le 14/10/2005 15:38:55

exactement zegnoo
bon dev à toi aussi

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 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

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 zegnoo le 19/11/2005 14:06:57

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

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 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.

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 DJTIME le 13/01/2006 09:56:03

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


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 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:)

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 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 ...

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 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)

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 zegnoo le 20/03/2006 15:24:25

ah bon et par quoi il 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 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.

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 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.

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 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

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 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 !

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 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...

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 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. @+

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 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 ?

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 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.

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 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.

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 lutin7812 le 02/10/2007 17:50:03

Bonjour, ce calendrier est super, mais comme tous les commentaires ici, j'ai aussi un petit souci. Je sais que le sujet a déjà été abordé mais je ne trouve pas de solution ad hoc.

Je souhaiterais que le calendrier s'affiche sur l'image où l'on clic mais sous Firefox aussi.
Le code de YOUSPIM provoque une erreur sous Friefox 2.0 car l'event n'est pas disponible tel quel. Si quelqu'un a une idée ou un bout de code existant je suis preneur.
Je débute et l'abonnement à un évèenement me semble compliqué.

Merci d'avance.

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

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

Commentaire de falomeflora le 20/02/2008 16:27:06

Merci!!!j'ai lontemps cherché un calendrier pareille.
Travail de Pro!!!!!!!!!

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

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 TEST29 le 26/08/2008 14:06:14 9/10

Merci pour ce calendrier ! Beau et fonctionnel, que demande le peuple ?

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?

Commentaire de kraten le 20/08/2009 16:38:35

Hi,
vraiment bien ce calendrier.
partique, sympa et super simple d'utilisation.
Bravo à son créateur mister zegnoo.

Commentaire de Spylover le 12/08/2010 12:11:14 10/10

Bonjour à tous,

je souhaiterais que lorsque l'on clique sur une date il lance une URL avec comme paramètre la date plûtot qu'il la mette dans un champs.

Merci de votre aide

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Calcul de DATE avec JavaScript [ par Dzeus ] Salut, G besoin d'ecrire une fonction qui renvoie le nombre de jour exact écoulé entre deux dates ; exemple..20/02/2001 et 5/03/2001...ATTENTION : Il un javascript qui calcul le nombre de jour entre 2 date? [ par jetlee79 ] Bonjour,Je recherche désespérèment un javascript qui me dise le nombre de jours qu'il y a entre 2 date.Car j'ai une page html ou je saisie dans TXtDat DateTimePicker [ par theboboteam ] Bonjour, peut on utiliser l'activeX DateTimePicker en javascript pour afficher un calendrier dans mes pages htm?j'ai bien vue des sources de calendrie téléchargement d'un calendrier en javascript [ par FIFI69 ] il n'y a rien dans le téléchargement, seulement des raccourcis et des liens. javascript probleme format date [ par wanted87 ] bonjour je suis en asp et sur ma base sql ma variable date_pret et date retour sont enregistrés en format jj/mm/aaaa et je voudrai controler date_pret Formulaire avec verification dynamique [ par bladebo ] BonjourVoila j'aimerai savoir comment faire pour vérifier un formulaire et faire un affichage qui se modifie si certaines zones du formulaire ne sont Une question pour mon calendrier [ par syltouille ] Bonjour et bonne annee tout le monde.Mon premier souci de cette annee est:J'ai realise un calendrier en PHP avec des images pour chaque jour.- Je voud Fermeture de popup et envoi d'informations [ par Rankin ] Salut &#224; tous. Je bosse actuellement sur la r&#233;alisation d'un site, qui contient une partie administration pour g&#233;rer des bases de donn& Problème avec les popup [ par vodkapomme43 ] Bonjour &#224; tous,Voila mon probl&#232;me: j'ai cr&#233;e un bouton qui execute un javascript: il affiche une popup avec un calendrier (le bouton se Fomulaire Dynamique JavaScript [ par umaga ] Bonjour &#224; tous,Une petite question de n&#233;ophyte en Javascript. Je cherche &#224; r&#233;aliser un formulaire dynamique. Disons que une partie


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,499 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales