GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET)
cs_titours
Messages postés
2
Date d'inscription
jeudi 26 juin 2003
Statut
Membre
Dernière intervention
26 août 2004
-
26 août 2004 à 16:27
Jbtree007 Messages postés 1 Date d'inscription jeudi 17 février 2005 Statut Membre Dernière intervention 29 décembre 2012 - 29 déc. 2012 à 10:43
Jbtree007 Messages postés 1 Date d'inscription jeudi 17 février 2005 Statut Membre Dernière intervention 29 décembre 2012 - 29 déc. 2012 à 10:43
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/25255-gnoocalendar-calendrier-dynamique-version-objet
https://codes-sources.commentcamarche.net/source/25255-gnoocalendar-calendrier-dynamique-version-objet
29 déc. 2012 à 10:43
vraiment bien ton calendrier, je l'utilise mais depuis quelques temps je n'ai plus la possibilité de changer les années ou les mois via les listes déroulantes.
J'utilise MOZILLA v17.0.1
Merci d'avance pour ta réponse
12 août 2010 à 12:11
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
20 août 2009 à 16:38
vraiment bien ce calendrier.
partique, sympa et super simple d'utilisation.
Bravo à son créateur mister zegnoo.
2 juin 2009 à 15:11
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?
26 août 2008 à 14:06
26 avril 2008 à 11:43
20 févr. 2008 à 16:27
Travail de Pro!!!!!!!!!
7 févr. 2008 à 14:21
2 oct. 2007 à 17:50
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.
23 juil. 2007 à 10:59
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 !
++
18 juin 2007 à 10:49
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.
14 juin 2007 à 19:13
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...
13 juin 2007 à 10:51
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.
14 mars 2007 à 11:37
20 févr. 2007 à 12:18
Fichier source : js/gnoocalendar.js
Ligne : 515
J'utilise Firefox avec le moteur de template smarty.
quelqu'un aurait une idée ?
1 oct. 2006 à 01:05
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 ;)
8 sept. 2006 à 14:39
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)
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+"'"; }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. @+
31 juil. 2006 à 21:06
De plus, le script est écrit de manière propre.
Donc bravo et merci.
31 juil. 2006 à 15:08
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...
13 juin 2006 à 15:42
sinon sous Firfox sa marche :) voula
2 juin 2006 à 10:13
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 !
27 mars 2006 à 20:31
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:)
27 mars 2006 à 15:56
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
23 mars 2006 à 17:08
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 -->
/* * 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; }Je ne sais pas si j'ai tout bien fait, mais ça a l'air de bien tourner pour le moment.
A+
20 mars 2006 à 17:45
20 mars 2006 à 17:19
Repère dans le code HTML la section d'appel du 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.
20 mars 2006 à 16:20
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.
20 mars 2006 à 15:50
Merci encore une fois.
@+ Soundy
20 mars 2006 à 15:24
20 mars 2006 à 15:13
20 mars 2006 à 14:21
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)
20 mars 2006 à 14:08
15 mars 2006 à 15:50
J'étais en train d'implémenter les MàJ de teacherfred quand j'ai remarqué que le :
if (this.checkDate(d)==today.getDate()&& this.curMonth==today.getMonth()&& this.curYear==today.getYear()) { tmp += "<td class='Gctoday'"; }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 ...
20 févr. 2006 à 16:56
20 févr. 2006 à 15:10
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 += "
").
à tester:)
20 févr. 2006 à 14:55
Il y a en effet un pb sous IE 6 quand le script n'est initialisé qu'au niveau du formulaire.
Exemple:
<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(' '); document.write(' '); 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> </td> </td> </form>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.
13 janv. 2006 à 09:56
mille merci pour le code :)
20 déc. 2005 à 12:15
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
16 déc. 2005 à 15:18
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.
28 nov. 2005 à 23:02
Excellent travail Zegnoo !
19 nov. 2005 à 14:06
quel navigateur et quel OS utilises tu stp?
19 nov. 2005 à 10:32
//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 += "";
tmp += "";
tmp += "";
tmp += "";
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!
19 nov. 2005 à 09:43
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
3 nov. 2005 à 01:30
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...
14 oct. 2005 à 15:38
bon dev à toi aussi
14 oct. 2005 à 15:29
14 oct. 2005 à 15:22
(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.
14 oct. 2005 à 15:21
voilà
et zegnoo ton boulot est nickel ya rien à redire
14 oct. 2005 à 15:17
14 oct. 2005 à 15:13
le fichier js que j'ai téléchargé ne comprennait pas ce test
14 oct. 2005 à 15:05
ton problème devait être autre.
la rustine proposée ne me semble donc pas nécessaire:)
14 oct. 2005 à 14:32
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;}
14 oct. 2005 à 13:00
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:)
12 oct. 2005 à 14:42
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
12 oct. 2005 à 14:42
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
22 août 2005 à 00:54
ton scripte sera utilisé plienement
merci et bravo encore
24 juin 2005 à 14:14
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!
24 juin 2005 à 13:19
good job !!!!
22 mai 2005 à 19:40
j ai téléchargé les 3 fichiers mais je sai pa koi faire !!
au secours !!
11 avril 2005 à 10:06
http://www.zegnoo.net/GnooCalendar/multi
21 mars 2005 à 16:49
22 déc. 2004 à 15:27
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:)
16 déc. 2004 à 08:54
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??
++
16 déc. 2004 à 08:27
Merci
25 nov. 2004 à 14:00
j'ai corrigé le problème (en ne déplaçant le calendrier que lorsqu'il est apparent).
bon dev:)
25 nov. 2004 à 10:30
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 ?
13 oct. 2004 à 17:11
12 oct. 2004 à 20:25
12 oct. 2004 à 16:24
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 !!
7 oct. 2004 à 17:30
7 oct. 2004 à 17:28
mais comment fait-on pour qu'il se cache une fois que l'on a choisi un date
merci
2 sept. 2004 à 13:48
c'est pas très clair tout ça:)
(merci pour les compliments:))
1 sept. 2004 à 16:43
26 août 2004 à 16:27
good job !