CALENDRIER JAVASCRIPT

Commentaire de Anthed le 16/02/2006 21:18:00

Effectivement mais je crois que c'est le lot tout div. Pour palier à ce problème, il n'y a pas d'autre choix que de masquer les selects de la page pendant l'affichage d'un div. Pour ce faire, on peut affecter à tous les selects un style particulier. Il suffit alors, lors de la détection de l'affichage du div, de modifier la visibilité de la classe correspondante. On peut également affecter à chaque select un id spécifique (ex : select0, select1, ...) et boucler sur chacun :
function hideSelects()
{
  var i = 0;
  var element = document.getElementById("select" + i);
  while (element != null)
  {
    element.style.visibility = "hidden";
    i++;
    element = document.getElementById("select" + i);
  }
}
Lors du masquage du div, procéder de la même manière en réaffectant "visible" à chaque select.
A+.

Commentaire de Anthed le 15/05/2006 23:44:25

Hello,
Concernant le problème évoqué ci-dessus sur les selects qui restent sur les div, je signale qu'afficher le div sur une iframe marche plutôt bien, pour ceux qui ne seraient pas emballés par l'idée de masquer leurs selects ...
A+.

Commentaire de testone le 14/06/2006 16:18:47

salut

ce script ne fonctionne que sur IE 6 et Opera (execution sur IE, opera, netscape, mozilla)
dommage, c'est une vraie merveille, SVP qu'un developpeur JS le fixe
merci les amis :)

Commentaire de PCPT le 01/07/2007 17:41:13 administrateur CS

salut,
quelle différence avec http://www.javascriptfr.com/codes/CALENDRIER-PARAMETRABLE-PERSONNALISABLE_34697.aspx ?
laquelle supprimer? ;)

Commentaire de PCPT le 02/07/2007 18:50:34 administrateur CS

regrouper non...
fait ton choix ;)

Commentaire de PCPT le 03/07/2007 11:28:42 administrateur CS

ok je supprime l'autre
et j'te mets un petit 10 pour celle-ci
très peu de modifs pour mes besoins, code clair, exactement ce qu'il me fallait :p

merci pour cette contribution ;)

Commentaire de Anthed le 03/07/2007 15:17:57

Oui, il s'agit d'un jour bonus ! :)
Je vais tâcher d'y jeter un coup d'oeil ...
A+.

Commentaire de Anthed le 04/07/2007 10:04:23

C'est un calendrier que j'ai fait de mon côté mais que j'ai déjà intégré dans différentes applications professionnelles (progiciel de prêts bancaires, application web de bourse en ligne). En le mettant à disposition ici, je suppose que quiconque peut le réutiliser. Si ce n'est pas le cas, je compte sur vous pour m'envoyer des oranges en prison ou pour me pistonner quand je pointerai à l'ANPE.

Commentaire de Anthed le 14/08/2007 10:50:33

Merci pour tes remarques JLN :)

Je viens d'apporter la correction sur le positionnement du calendrier. Par contre, je n'arrive pas à reproduire le bug du 32/10. Si quelqu'un est tombé dessus, merci de m'indiquer si cela concerne un browser particulier et quel est l'enchaînement d'actions conduisant à cette erreur. Merci d'avance.

Commentaire de JLN le 14/08/2007 16:23:37

Merci pour le correctif Anthed, pour le 32 je ne suis pas non plus arrivé à reproduire... Est-ce réellement fondé ?
Merci pour ton aide, car je maitrise pas mal le php mais encore assez le javascript pour me plonger réellement dans ta source... Pour ma part je l'utilise sur un site perso sur un serveur ou je n'ai pas ouvert l'accès, donc perso.
Bonne prog à tous,
@+ JLN

Commentaire de Anthed le 14/08/2007 17:06:16

Ok, merci JLN. Concernant la surbrillance, je vais voir ce que je peux faire pour que le jour précédemment sélectionné soit mis en valeur de façon différente de celui survolé par la souris.

Nerolph, je suis plutôt pro-open-source donc fais ce que tu veux. Si tu récupère des bouts de code à droite et à gauche et qu'à chaque fois, tu dois rajouter 'Un grand merci sincère et chaleureux à untel blablabla' dans le code, tu ne vas pas t'en sortir :) et je dis un grand 'ZUT' à ceux qui se prennent pour des grands maîtres du développement en exigeant que leur nom soit présent partout.

A+ tout le monde ;)

Commentaire de Nerolph le 14/08/2007 17:54:39

Donc en résumé, ce bug était dû à l'interface chaise-clavier...
^_^

Commentaire de testone le 24/08/2007 12:45:48

Bonjour

Encore bravo pour ce calendrier, je confirme encore que c'est une vraie merveille comme je l'ai dit l'année dernière, sauf qu'il y a un tout petit bug dans le fichier calendar.htm

    <link href="stylesheets\calendar.css" type="text/css" rel="stylesheet" />
    <script src="scripts\calendar.js"></script>

faut juste remplacer le \ par / et tout fonctionnera sous ff et netscape
quoi qu'il en est, c'est une merveille :)

Commentaire de yodev le 03/10/2007 14:30:35

J'ai oublié avant le while :

remplacer

j = (new Date(calendar.cyear, calendar.cmonth-1, 1)).getDay();

par :

var selDate = new Date(calendar.cyear, calendar.cmonth-1, 1);
var today = new Date();
j = (selDate).getDay();

@@+++

Commentaire de JLN le 05/10/2007 17:21:37

Petite précision au sujet de la modif proposée par YODEV c'est la fonction "fillCalendar" et non la fonction "Calendar" pour les néophite que nous sommes, c'est moins pénible à rechercher.

Sinon merci à ANTHED pour ce script génial et à toi YODEV pour ce petit plus et si j'osai... Ne sarai-t-il pas possible de colorer le jour de la date figurant dans le champ sur le calendrier tout comme on le fait pour la date courante ? Si oui comment s'y prendre, le javascript est pour moi (et bon nombre d'entre nous) trop inconnu pour prétendre une modif qui ne mette pas tout en l'air.

Merci beaucoup.
@+ JLN

Commentaire de JLN le 07/10/2007 09:11:30

Bonjour,
     Si je comprend bien YLEBAILLY = YODEV peu importe un grand merci en tout cas, mais je ne sais pas si c'est moi, car plus d'affichage spécial aujourd'hui dans le calendrier, malgré les modifs, je suis vraiment bon à rien... Pourtant pour être sure avant de poster, je suis repartie de l'original et j'ai refait les modifs et rien ???
Bon j'y retourne et si je trouve mon éventuelle erreur je reposte.
Merci beaucoup pour ton aide.
@+ JLN

Commentaire de Zeroc00l le 13/11/2007 15:17:29

Oops pas fait gaffe que maintenant il fallait noter en même temps que l'on commente, d'où ce message ...
Pas de possibilité de changer sa note Messieurs les admins ?

Commentaire de Zeroc00l le 13/11/2007 17:06:09

Je souhaitais simplement qu'il y ait un seul commentaire avec la note.
Bref je reviens juste pour dire que dans le fichier calendar.html y'a une petite faute sur le dernier div, deux onclick se suivent :
onclick="increaseYear();" onclick="incrementMonth();"

J'en profite poser quelques questions :

1) Pourquoi à chaque fois que je trouve un script sympa les variable et les fonctions sont en vrac dans le fichier (pas a l'interieur d'une seul fonction en vue d'e nfaire une classe PROPRE et sans risque de collision) ?

2) Ne serait-il pas plus sympa / propre de generer également un div en position absolue, et d'y incoporporer le code HTML du calendrier dynamiquement ?
Bref c'est ce que je vais faire, au final j'aurai juste à taper :

<script ... src="calendaer.js">
<input onclick="javascript:(new PopupCalendar(path_vers_les_images, id_input)).Popup();"

Au vue de la quantité de source ou ce n'est pas "propre" à mon sens ( == sous forme de classe) je me demande si y'a encore des choses importantes que j'ignore à propos du javascript ... :S

3) N'y a-t-il personne qui deteste les accolades à la K&R à part moi (== cad en fin de ligne et non pas aligné avec les accolades fermantes) ?
Ou bien est ce que tous le monde le fait pour une raison que j'ignore.
(hypothese : certains navigateurs trouvent une erreur si les accolades ne sont pas en fin de ligne ?)

Commentaire de Zeroc00l le 16/11/2007 04:16:24

Il est possible de déclarer des variables statiques ...
Donc même si il y'a plein d'instances ... on peut se débrouiller pour que si une instance Popupe (du verbe Popuper si si ! :p), elle fasse disparaitre les autres.
Au final ça fournit aux instances un comportement qui ressemble aux menus contextuels : Deux instances ne peuvent être popupé et visible en même temps.
Je vrai "proprifier" le code quand j'aurai plus rien à faire...
Interessé ou pas par le code proprifié ?

Commentaire de Zeroc00l le 30/11/2007 17:48:17

Ne prend absolument pas ma remarque comme une critique méchante.
C'était juste une opinion personnelle.
Le but de cette critique est avant tout d'avoir des explications sur le pourquoi de cette façon de faire (que quasiment tout le monde partage sur javascriptfr) ou alors de me remettre en question par rapport à ce que je croyais savoir.
(Je ne dis pas que tu l'a mal pris mais je préfère être absolument clair :)).

je ne cherche pas la performance (je suis d'accord que ça ne change rien).
La lisibilité, même si j'en suis sensible, n'est pas non plus en question.
Ce que je n'aime pas c'est aussi l'html directement dans la page ...
J'ai plein de code récupéré un peu partout et au final on sait plus quoi appartient à quel bout de js quand on a une page complexe.
J'aime le code très organisé, et j'ai rencontré un cas bizarre ou un argument n'était pas utilisé dans une fonction au profit d'une variable plus globale du même nom ! Bref une erreur vicieuse.. (je crois que j'ai même gardé un fichier pour illustrer la chose.)

Au final j'aime bien l'action unique quand j'ai envie de quelquechose.
Je veux un truc boum j'inclu un fichier (une seule action) et hop je peux l'utiliser.
Je n'ai pas à :
-- Inclure le js
-- Copier le code html (le retrouver déja, le mettre en commentaire dans le js ... c'est moyen :D)
-- Vérifier qu'il entre pas en collision avec d'autre variable ...
Alors qu'ajouter un fichier.js ( == une classe) je trouve ça plus simple et plus modulaire.
Et c'est pas la place que prend "function MaClass { }" :p qui grossit le code
(normalement si on fait cela très proprement on compresse aussi le js...)

Autre petite remarque : Générer le calendrier (l'html) dans le js permet également de le compresser (boucle js ...) et sans le js ça fait une page html plus propre (que le contenu et pas les outils et l'interface).

Encore un opinion perso qui ne prend appui que sur mes 2 seul mois de web dev :)
(ca vaut ce que ca vaut, dite moi si j'ai tort surtout) :
Je trouve ca crade d'avoir des choses cachés (visible) ou non affichés (display) dans une page si ce n'est pas pour utiliser avec du js...
Hors si js est désactivé ca évite de télécharger un truc qu'on utilise pas !

Que penses tu de tout ça ?

Commentaire de Anthed le 03/12/2007 09:38:45

A l'attention de ZerocOOl,

Concernant l'utilisation d'une classe, je n'ai pas grand chose à rajouter par rapport à ce que j'ai déjà dit. Si tu préfères du javascript version java, libre à toi (pourquoi pas).

Générer les composant html du calendrier depuis le fichier js plutôt que l'intégrer directement à la page concernée est en revanche une bonne idée (plus facile à intégrer et à mettre à jour en cas de présence sur plusieurs pages).

Pour info, je signale que j'avais réalisé la première version de ce calendrier dans le cadre professionnel et une des devises à méditer dans ces circonstances est : "Le mieux est l'ennemi du bien". Les impératifs de développement et les délais de livraison font qu'on n'a jamais assez de temps pour réaliser quelque chose de parfait. L'idéalisme poussé à l'extrême n'est pas rentable ...

Pour finir, je tâcherai de fournir une version prochainement avec une couleur différente et la possibilité de désactiver les liens associés aux jours passés.

Merci à tous pour vos différentes remarques. A+.

Commentaire de Zeroc00l le 03/12/2007 16:35:26

Ah j'oubliais un autre argumetn en faveur de la generation dans les js
j'ai essayé les masterpages (asp.net) hier et tous les id sont prefixés,
donc ca fout en l'air le code js ... :/

Autre idée :
- Quand la souris est en dehors du calendrier trop longtemps :
   simuler le clic sur la corix (ferme la fenêtre)

Commentaire de Zeroc00l le 06/12/2007 15:17:38

Pas bête l'idée de différencier les jours avant le jour actuel !
On y gagne on lisibilité.

Commentaire de Thierry_ZT le 04/02/2008 15:06:25

Super code, enfin un compatible DOCTYPE.

Merci.

Commentaire de Charles72 le 14/02/2008 19:52:52

Juste un petit commentaire en plus pour mettre la note que j'ai oubliée ^^

Commentaire de zealth le 07/04/2008 09:06:01

Bonjour,
Lorsque je télécharge le fichier ZIP, mon antivirus me sort:
"Le fichier javascriptfr_CALENDRIER-JAVASCRIPT___Page.zip contient le virus Compressed_Huge_File"...

Commentaire de PCPT le 07/04/2008 19:49:51 administrateur CS

non c'est dû aux sécurités de ton parefeu (ou celui de ton entreprise)...

Commentaire de bassouma10 le 25/05/2008 13:37:31

bonjour
merci beaucoup pour sette calendrier.
mais ect ce que qh'ila y a une possibilite de changer la forme de date à YYYY-MM-DD pour l'enregister dans ma base mysql car les autres format n'enregistrent pas dans ma base
merci

Commentaire de patricklane le 31/05/2008 22:13:17

Bonjour Anthed,
Je voulais juste te signaler un petit bug pas bien grave qui crée le phénomène suivant :
aujourd'hui, nous sommes le 31 mai et tous les mois comportant 31 jours jusqu'à la fin de l'année ont leur jour 31 coloré comme un jour "today".
Ceci est créé à la ligne 701 du fichier "calendar.js" par un test "<" à la place de ">".
Le test "<" est déjà fait à la ligne 699. J'ai testé après la correction en ">" et je n'ai plu que le 31 mai qui soit "today".
Encore bravo et merci pour ton code.

Commentaire de adenismael le 05/06/2008 11:18:06

merci pour ta gentillesse,respect pour ton altruisme et felicitation pour le code

Commentaire de speedbad le 17/06/2008 04:15:28

Bonjour, Ce script est pas mal, mais je me permets d'apporter une petite soluce a un bog avec certain Doctype.
En effet lorsque l'on joue avec les dimensions/placements il faut dorénavant préciser "px" ou "%" sinon ce n'est pas pris en compte et le calendrier reste à l'emplacement initial de la div.

donc pour la fonction initElement rajouter +"px"; à la fin des lignes 279,281,284,286 et 289 à 292.

Ensuite pour éviter que le scroll ne remonte tout seul au click sur certain navigateur avec les liens, remplacer l'appel de la fonction:
javascript:displayCalendar('w0', event);
par
return displayCalendar('w0', event);
et rajouter return false; à la fin de la fonction displayCalendar ligne 353.

merci pour le code en tout cas.

Commentaire de jonorange le 13/08/2008 17:35:52

Bonjour, cette source est vraiment très chouette, j'ai passé pas mal de temps a chercher un calendrier simple-clair-customizable et compatible mozilla-ie

tout content de cette trouvaille, je teste le script avec la page calendar.html sur mon serveur, et l) ca fonctionne sur ie (et plus sur Firefox !!

apres avoir relu tout les coms de cette pages. je trouve la solution :
ca viens juste du \ qu'il faut remplacer par / au debut du fichier
<script src="scripts\calendar.js"></script>  deviens  <script src="scripts/calendar.js"></script>  


mais voila.. vous allez rire.. une fois intégrer a mon formulaire php.. ça fonctionne sur firefox mais plus sur ie 6
qui me dis dans la barre d'état qu'il y a des erreur sur la page
je ne comprend vraiment pas d'où ça viens.. il n'aime pas les div dans les div peut-être ?

si quelqu'un a eu le même pbm .. ou a une idée je le remercie de me donner un coup de main

merci pour la source en tout cas

Commentaire de Slyders le 20/08/2008 15:00:36

Ne marche pus sous FireFox 3

Commentaire de Zeroc00l le 20/08/2008 15:45:39

Ca serait cool si tu donnais les modifs à faire !

Commentaire de Thierry_ZT le 29/08/2008 13:06:45

Bonjour,

Chapeau pour ce script, je l'utilise actuellement pour enregistrer des dates dans une base access mais je souhaite migrer le système sur mysql et alors là grosse galère. Le format de la date ne correspond pas à la norme us.
Du coup la date est à 0 dans la base.
Je voudrais juste savoir si c'est simple de remplir 2 champs dans le formulaire lorsqu'on clique sur une date. ex:
Champ1fr (avec la date au format français dd/mm/yyyy comme actuellement)
Champ1us (avec la date au format US yyyy/mm/dd) qui sera en hidden dans le form

Merci.

Commentaire de Tuttu le 14/10/2008 12:19:31

Très bon script qui m'est bien utile. Un grand merci. :)

Commentaire de alain18 le 12/11/2008 14:57:48

Bien-sur je suis super satisfait de ce calendrier, je souhaiterais qu'il s'affiche automatiquement sans a avoir a cliquer sur l'icone. Si qq a une idee je suis preneur, le probleme a ressoudre concerne le event qui est envoye au JS et la je patauge. Il faudrait que cela marche aussi bien sous IE que FF et autres.
Merci d'avance

et bien-sur je met une note a ce super code

Commentaire de fix23 le 18/11/2008 12:07:57

parfait : mise en place rapide, code clair et précis
ça marche du tonnerre !!

Commentaire de ybouane le 11/01/2009 06:08:13

assez long comme code mais bon je pense qu'il faut se pencher un peu plus dur le design. pour l'instant, j'utilise:
http://www.supportduweb.com/scripts_tutoriaux-code-source-9-faire-un-calendrier-en-javascript-avec-un-effet-de-transparence.html
merci :) et bravo pour ton travail

Commentaire de Usaf le 10/03/2009 11:55:19

Bonjour,

Est-il possible d'utiliser le format dd.mm.yyyy (. a la place de /) ? si oui ou faut t'il modofier ça ?

Merci

Commentaire de pgu83 le 27/04/2009 11:57:33

Bonjour,
Bravo pour ce script, il correspond exactement à ce que je cherchais.
Je rencontre le même problème que décrit par pierrealain6913 concernant les selects. J'ai vu la solution proposée par Anthed mais je ne comprends pas comment l'utiliser.
Je suis vraiment peu expérimenté en javascript, si quelqu'un peu me décrire plus précisement la méthode à suivre, merci d'avance.

Commentaire de Lenaic89 le 26/06/2009 11:00:25

Bonjour,
un autre bravo de ma part est du mise !!!

mais plus sérieusement je cherche à modifier ton code (ajout d'une fonction ou d'une partie du code)
de manière à pouvoir changer la couleur de certaines dates.

plus précisément j'aimerais pouvoir stocker dans un fichier, une base ou autre une liste de dates (des formations réparties sur l'année) et ensuite que ces dates soient utilisées pour colorer les cases correspondante dans le calendrier.
le système de stockage devra pouvoir être mise a jour sans modifier le code de préférence.

j'ai bien essayé de modifier ton code mais n'étant pas un petit génie du java script je me retrouve un peu bloqué.

merci de ton aide (si tu y pense car ce sujet commence a avoir de l'age !!!)

Commentaire de Anthed le 17/07/2009 17:28:33

Salut à tous !

Tout d'abord merci pour vos différents commentaires bien sympas. Je manque un peu de temps en ce moment mais je n'oublie pas vos différentes remarques d'améliorations. Je les apporterai dès que possible.

A l'attention de LENAIC89 :
Je te conseille de garder le fonctionnement du calendrier plus ou moins tel qu'il est. Ensuite, pour colorer certaines dates en fonction d'événements qui pourraient se trouver dans une base (mieux qu'un fichier), rien de tel qu'un petit appel ajax à chaque changement d'année ou de mois pour récupérer tes infos et surcharger dynamiquement l'affichage de base du calendrier (changement de couleur, affichage du détail de l'événement au survol par la souris du jour concerné, ...).

Merci encore à tous et à bientôt.

Commentaire de Akazed le 21/09/2009 14:49:11

très bon script. Merci Anthed.
Juste une petite critique : sur un champ date en bas d'un formulaire qui nécessite de faire défiler la page, le fait de cliquer sur le bouton et d'ouvrir le calendrier replace l'utilisateur en début de page. C'est un peu gênant parfois, mais sinon beau boulot !!

Commentaire de bobabar le 10/11/2009 16:31:11

Joli boulot à première vue. Je met "à première vue" simplement parce que je n'ai pas encore regarder la source et que je ne suis peut-être un peu juste pour une critique sérieuse.

1/ l'intégration est rapide, en 5 minutes, ton calendrier était sur une de mes pages.

2/ avec cette page faite en 5 minutes mes stests ont donnés ceci :
- sous FF 3.5 : OK, mais sans rien modifier le placement du calendrier est assez éloigné du bouton (je suppose que cela se configure dans le code JS)
- sous Chrome 3 : OK, mais le look du calendrier est assez différent, plus étalé horizontalement. Même remarque que sous FF par rapport au placement du calendrier. Le calendrier réagit plus vite, mais ça c'est sans doute à Chrome et ses performances en JS.
- sous IE 6 : ne fonctionne pas (rien n'apparait, et le navigateur m'indique "Objet attendu" à la ligne 247

3/1ère critique : effectivement, comme l'a dit quelqu'un plus haut, la page semble se recharcher ou en tout cas se recaler sur le haut de la page quand on choisit une date, ce qui est très énervant. Je vais essayer de comprendre pourquoi, parce que dans mon cas, cela le rend quasi-inutilisable, trop inconfortable pour l'utilisateur.

Je met 9/10 en raison des petites remarques ci-dessus.
Merci beaucoup en tout cas !

Commentaire de xxdasxx le 02/04/2010 17:21:05

Merci!
Cela fait un moment que je cherchais ce script!
il est parfait, et facile à integrer. Sur tout ceux que j'ai vu c'est le "best of the best"!
J'ai rencontré aucun bug jusqu'a présent.
Tu me facilites grave la vie!
Encore merci.

Commentaire de pasifisateur le 03/05/2010 19:12:47

ça marche impec sur FireFox et Chrome ,mais ça foire sur IE il m'affiche le calendrier en haut de page ignorant totalement la div où il est sensé s'insérer :( ,si quelqu'un pourra me montrer comment y remédier, je le remercie d'avance !!

Commentaire de abdessamie2010 le 10/05/2010 13:10:03

Génial et bravo, c'est ce que je cherchais!
Mais lorsque je le lance avec easyphp  il ne fonctionne pas!!!
:^(

SVP    un cou de main C urgent
merci d'avance  !:^(

Commentaire de djoshaiek le 07/07/2010 12:25:36

super bolo mereci bien :)
je suis débutant en javascript
c gentil si tu m explique comment intégrer cette calendrier dans mon page sans faire une grande modification merci :)

Commentaire de ramold le 17/09/2010 19:39:32

Merci pour ce code qui fonctionne très bien.
Le seul truc que je n'arrive pas à faire, c'est modifier la couleur des caractères des noms de mois et des chiffres des jours.
Je ne comprends pas trop pourquoi, mais je ne pense pas que cela vienne du code.

Quand je change la couleur dans le fichier css pour ces deux éléments (j'imagine la propriété color de .cal), rien ne se passe.

Mais bon, c'est pas grave.

Excellent travail.

Commentaire de rivestm le 24/12/2010 15:18:58

Merci c<est ce que je cherchais et +.

Commentaire de lahmamilahmami le 15/02/2011 22:54:15

Code simple est but précis,
Bravo c'est ce que je cherche exactement depuit des jours