begin process at 2012 02 14 10:49:11
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Date & Heure

 > 2 VERSIONS DE CALENDRIER DATEUR

2 VERSIONS DE CALENDRIER DATEUR


 Information sur la source

Note :
9,2 / 10 - par 5 personnes
9,20 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Date & Heure Classé sous :calendrier, dateur, date Niveau :Initié Date de création :02/03/2007 Date de mise à jour :01/10/2011 17:03:18 Vu / téléchargé :24 520 / 3 581

Auteur : jperre

Ecrire un message privé
Commentaire sur cette source (20)
Ajouter un commentaire et/ou une note

 Description

Voici deux versions de calendrier dateur.
1 version qui affiche le calendrier dans une fenêtre popup.
1 version qui affiche le calendrier dans un tableau appartenant à la fenêtre d'utilisation.
Dans les deux cas, le calendrier est lié à une textbox dans laquelle il renvoie la date formatée.
Par défaut, le calendrier affiche le mois de la date inscrite dans la textbox(si elle existe),sinon, il affiche la date du mois courant.
Ces calendriers sont configurables en ce qui concerne :
- le format d'affichage de la date,
- le 1er jour de la semaine.
D'autre part, ils déterminent automatiquement les dates des jours fériés français.


 Conclusion

Pour le bug sur IE6, signalé par The Sorrow, je fournirais une version corrective au mois de juin.

 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

14 avril 2007 17:04:38 :
Suppression de 2 bugs : * Non prise en compte de l'année de la date éventuellement inscrite dans la textbox liée au calendrier, lors de l'ouverture de celui ci, * Non centrage des dates des mois encadrants dans les cellules du tableau d'affichage, Ajout d'une version avec un tableau déplaçable à l'aide de la souris (en pointant sur le titre de la fenêtre - Dateur).
17 avril 2007 17:03:32 :
Suppression de 2 lignes de code mort dans le code javascript du tableau déplaçable Ajout d'un encadrement aux calendriers sous forme de tableau.
19 avril 2007 12:58:34 :
Détection d'un bug : Lors du déplacement du mois de décembre vers le mois de janvier, l'année affichée (exemple 2007) ne s'incrémente pas de 1 (2008), mais contatène (20071). La fonction NextYear a été modifiée pour forcer javascript à interpréter la valeur passée en paramètre comme un nombre et non comme une chaîne de caractères
24 mai 2007 09:25:51 :
Détection d'un bug sur les calendriers Tableau et TableauDeplacable: Lorsque le calendrier a déjà été affiché, à l'ouverture il n'affiche pas, lorsque la zone de texte est vide, le mois et l'année de la date du jour. Il affiche le mois et l'année qui étaient sélectionnés avant sa dernière fermeture. La fonction NewCal a été modifiée pour corriger ce bug.
02 juin 2007 17:52:24 :
Je remercie The Sorrow de m'avoir signalé des bugs sous IE6. J'ai repris mes programmes sur une plateforme avec IE6 et, en effet, j'ai constaté 3 bugs : 1 - lorsque le dernier jour du mois correspond à la dernière colonne de la semaine, le mois ne s'affiche pas. Le bug vient du fait qu'IE6 est beaucoup plus strict que Firefox et IE7, il interdit de créer une ligne vide dans un tableau. 2 - les flèches de déplacement ne s'affichent pas. Problème CSS, seule la police Arial, dans la liste des polices que je proposait, affiche les caractères unicode flèche droite et flèche gauche. Firefox et IE7 vont chercher la bonne police, tandis qu'IE6 prend la première police proposée qui existe sur le PC. 3 - la couleur des boutons n'apparaît pas toujours en blanc. Problème CSS, sous IE6, il faut préciser que le lien (visited) conserve la même couleurque (link). Voici donc ci jointe la version corrective. J'en ai profité: - pour éclaircir le code (blocs width, suppression d'informations inutiles). - pour ajuster la taille des fenêtres popup en fonction du navigateur (Firefox n'efface pas la barre d'état).
01 octobre 2011 17:03:19 :
Voici une nouvelle version de mon calendrier dateur. Cette version utilise les nouvelles propriétés de CSS3. De plus le code Javascript a été allégé de plusieurs lignes.

 Sources du même auteur

Source avec Zip Source avec une capture JEU DE MORPION
Source avec Zip MISE EN OEUVRE D'UN CONTRÔLE TAB ET DE QUATRE CONTRÔLES TREE...
Source avec Zip LABELS EN SURBRILLANCE

 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

Source avec Zip Source avec une capture MICRO-CALENDAR par amrounix
Source avec Zip CALENDRIER par mlle_bee
Source avec Zip Source avec une capture CALENDRIER JAVASCRIPT par Anthed
UN CALENDRIER AVEC DES INPUT TEXT QUI CONTROLE LES ANNÉES BI... par philippe
Source avec Zip Source avec une capture GNOOCALENDAR CALENDRIER DYNAMIQUE (VERSION OBJET) par zegnoo

Commentaires et avis

Commentaire de titirock le 15/04/2007 11:23:53

Salut!
Ton code est très bien,c'est vraiment ce que je cherchais! Bravo! Par contre la version Tableau déplacable ne fonctionne pas sur mon Firefox 2.0.0.3.

Commentaire de jperre le 18/04/2007 08:12:48

Je suis étonné que le Tableau déplaçable ne fonctionne pas sur Firefox 2.0.0.3 car je l'ai testé sur Firefox 2.0.0.3 et IE7, celà fonctionne parfaitement sur ces deux navigateurs. Toutefois, je rappelle qu'il faut utiliser les fichiers fournis pour chaque version (ils sont contenus dans l'archive zip correspondante) et surtout ne pas mélanger les fichiers des versions entre eux.

Commentaire de The Sorrow le 25/04/2007 09:52:19

Salut!
Premièrement bravo pour ce code trés bien réalisé et l'application du drag and drop dessus rend le tout encore plus sympa. Cependant j'ai un petit soucis. J'utilise IE6 et j'ai trouvé un bug lorsque on change d'année il y a certains mois (comme septembre 2007 par ex) qui n'affiche pas les jours...!!! Par contre sous mozilla 2.0.0.3 pas de soucis.... Je comprends pas du tout pourquoi et çà fait un petit moment que je cherche la solution. Merci d'avance pour vos suggestions

Commentaire de The Sorrow le 25/04/2007 09:54:02

Salut!
Premièrement bravo pour ce code trés bien réalisé et l'application du drag and drop dessus rend le tout encore plus sympa. Cependant j'ai un petit soucis. J'utilise IE6 et j'ai trouvé un bug lorsque on change d'année il y a certains mois (comme septembre 2007 par ex) qui n'affiche pas les jours...!!! Par contre sous mozilla 2.0.0.3 pas de soucis.... Je comprends pas du tout pourquoi et çà fait un petit moment que je cherche la solution. Merci d'avance pour vos suggestions

Commentaire de The Sorrow le 30/05/2007 17:27:19

Salut j'ai réussi à modifier le code de façon à ce que çà fonctionne sous ie (cependant en le corrigeant sous ie c'etait sur firefox que çà planté alors voila j'ai retravailler la fonction DrawCallBody. C'est peut etre pas terrible mais comme je suis débutant en JS .... Bonne continuation et merci encore pour ce code ++

function DrawCalBody() {
    /*Cette fonction dessine le corp du calendrier*/
var CalRows=document.getElementById("calendar").rows;

if (CalRows.length>3) {//S'il existe des données dans le corps du tableau, elles sont effacées

   for (i=CalRows.length;i>3;i--) {
       document.getElementById("calendar").deleteRow(i-1);
       }
   }
var iNumRow=3
var trCal=document.getElementById("calendar").insertRow(iNumRow);
var dtFirstDay=new Date(Cal.Year,Cal.Month,1);
var iFirstDayOfMonth=dtFirstDay.getDay();
var iMonth=Cal.getMonthDays();
var iPrevMonth=Cal.getMonthDays("Prev");
var iNumCell=0;//Compteur de cellules
for (i=0;i<=6;i++) {//Recherche de l'emplacement du premier jour du mois et des jours du mois précédent à reporter
    if (ColWeekDays[i]==iFirstDayOfMonth) {
   var DaysPrev=i;
   break;
   }
    }
for (i=1;i<=DaysPrev;i++) {//Copie des derniers jours du mois précédent
    var tdCal=document.createElement("td");
    DrawCell(tdCal,(iPrevMonth-DaysPrev+i),"Prev");
trCal.appendChild(tdCal);
iNumCell++;
    }
for (i=1;i<=iMonth;i++) {//Copie des jours du mois
    var tdCal=document.createElement("td");
    DrawCell(tdCal,i,null);
trCal.appendChild(tdCal);
iNumCell++
if (iNumCell==7) {//Fin de ligne et retour à la ligne suivante
iNumRow++;
trCal=document.getElementById("calendar").insertRow(iNumRow);
Nom = navigator.appName;
if(Nom != 'Netscape')
trCal.appendChild(trCal);
iNumCell=0;
}
}

var iNumCell2 = iNumCell;

//alert("Cell2 = "+iNumCell2);
if ((iNumCell2<7) && (iNumCell2!=0)) {//Copie des premiers jours du mois suivant
   for (i=1;i<=(7-iNumCell2);i++) {
       var tdCal=document.createElement("td");
       DrawCell(tdCal,i,"Next");
   trCal.appendChild(tdCal);
   }
}
}

Commentaire de fatatra le 07/11/2007 22:10:45 9/10

vraiment un super code, bien pratique.

Commentaire de LAURABOUCHE le 28/11/2007 16:32:00

Bonjour,
Merci pour ce code mais n'y a t il pas un moyen de faire en sorte que le calendrier s'ouvre automatiquement à coté de l'icone ?

Sinon merci.

Commentaire de ploulmet le 30/12/2007 18:36:39

Bonjour,

Merci pour ce partage de connaissances, mais je n'arrive pas utiliser ce code lorsque je mets la page en ligne, cela fonctionne très bien en local.
Il y a sûrement une raison évidente, mais après plusieurs heures, je ne vois pas, c'est le brouillard...
Merci de votre aide.

Commentaire de jperre le 31/12/2007 18:17:55

Généralement lorsque le code ne fonctionne pas lorsque la page est mise en ligne, il faut regarder du coté des adresses de fichiers sources (*.js, *.css) dans la page html appelante (balises <style> et <script>). Le plus souvent, les chemins d'accès ne sont pas valides.

Commentaire de declic01 le 11/03/2008 17:22:49 10/10

Bravo et merci, enfin un code de calendrier qui fonctionne simplement !

Commentaire de francis56 le 15/05/2009 10:41:07 9/10

Excellent code, merci pour ce partage encore une fois.

une question me tracasse tout de même, elle est identique à celle de LAURABOUCHE c'est à dire comment afficher le calendrier juste a coté de l'icône 'calendar'.

J'ai cherché dans le code et au niveaux des paramètres modifiable de trouve :

var cTop=200; //Coordonnée du haut du calendrier
var cLeft=300; //Coordonnée de la gauche du calendrier

qui devraient jouer sur la position du tableau mais rien n'y fait, puis-je avoir un peu d'aide ?
merci d'avance :)

Commentaire de jperre le 26/05/2009 13:00:01

La fonction NewCal(pCtrl,pFormat,pX,pY) permet de positionner le calendrier dans la page HTML. Les paramètres à entrer dans cette fonction sont :
pCtrl : attribut name de l'élément input de type text lié au calendrier,
pFormat : format d'affichage de la date,
pX : coordonnée left du calendrier,
pY : coordonnée top du calendrier.

Ces information sont indiquées en commentaire dans le code javascript du fichier calendar.js.

Pour positionner correctement le calendrier par rapport à l'icône de la page HTML, il suffit de récupérer les coordonnées et les dimensions de cette icône avec les propriétés de l'objet Image :
objetImage.style.top
objetImage.style.left
objetImage.style.height
objetImage.style.width

Commentaire de jujumat le 26/05/2009 16:28:21

Tout d'abord merci pour cette source JPERRE !!!!

Je veux juste réagir par rapport au placement des calendriers car j'ai du mal à comprendre quelle valeurs prennent pX et pY au moment de l'appel de la fonction.

J'ai fais un test en mettant cTop et cLeft à 0, et les calendrier sont quand même bien placé(dans fichier source)avec le décalage entre celui du haut et celui du bas. Comment géres-tu ce décalage ???

Merci d'avance !!!!!!!!!!!!

Commentaire de jperre le 26/05/2009 17:48:00

Dans le fichier source HTML de l'exemple de calendrier :
- l'attribut href de l'élément "a" (anchor) qui contient l'icône de calendrier de la date de début a la valeur suivante : "javascript:NewCal('DateDeb','DDMMYYYY',400,50)".
- l'attribut href de l'élément "a" (anchor) qui contient l'icône de calendrier de la date de fin a la valeur suivante : "javascript:NewCal('DateDeb','DDMMYYYY',400,127)".

Quelle que soit les valeurs initiales données aux variables cTop et cLeft, lors de l'appel de la fonction NewCal(), elles sont remplacées par les valeurs des deux derniers paramètres transmis à cette fonction.

Pour info pour un débutant : Le fait de donner la valeur "javascript:....." à l'attribut href indique au navigateur qu'il doit exécuter le code qui suit au lieu de chercher une URL.

Commentaire de Khchine_Hamza le 05/08/2009 21:16:20

Bravo ,c'est tres bien fait .Merci beaucoup et bonne continuation

Commentaire de Renald689 le 28/08/2010 22:22:49 8/10

Bonjour et bravo pour ce code.
J'ai toutefois un petit problème : j'aimera que le calendrier renvoie une date au format YYYY-MM-DD pour extre exploitable par SQL. J'ai trouvé comment remplacer le "/" par un "-", j'ai aussi modifié ceci :

this.Format="YYYYMMDD";//Format d'affichage de la date par défaut

Mais rien n'y fait, j'ai toujours une date du style "28-08-2010". Un tuyau ?

Commentaire de Renald689 le 28/08/2010 23:05:02

Toutes mes confuses, j'ai trouvé la solution : il suffisait de modifier l'argument d'appel de la fonction NewCal.

Commentaire de misterclic66 le 14/02/2011 11:45:57

excellent script, mais je relève cependant 1 truc qui me gêne :
nous sommes aujourd'hui un 14 du mois, et la date d'aujourd'hui prend bien la classe "today", mais également tous les 14 de tous les mois.
J'ai bien tenté de modifier la ligne 598 du fichier.js:
if (iDay==dtToday.getDate() && iMonth==dtToday.getDate()) {
......
au lieu de
if (iDay==dtToday.getDate()) {
......
mais rien n'y fait

J'ai besoin que seule la date du jour courant prenne la classe "today"
Je ne suis pas assez expert en js pour faire cela
Lien vers mon fichier test :
http://grenoble-sciences-test.ujf-grenoble.fr/test/calform.html

Merci pour votre aide

Commentaire de misterclic66 le 14/02/2011 11:48:47 10/10

J'avais oublié la note

Commentaire de jperre le 14/02/2011 18:01:23

Il est normal que la date sélectionnée dans le calendrier à l'ouverture soit le jour du mois de la date courante.
Et ce quel que soit le mois. Pour sélectionner une autre date, il suffit de mettre une valeur date par défaut dans le champ texte qui est lié au calendrier. Dans ce cas la date par défaut du calendrier sera la date du champ.
Bon courage!...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

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& Click sur une date du calendrier [ par fionalabelle ] Bonjour &#224; tous, <P class recherche calendrier [ par makinator7266 ] Bonjour à tous et toutes, je suis à la recherche d'un calendrier qui me permette d'afficher une fenêtre pop-up indiquant l'évenement correspondant à l Recupérer la date depui un calendrier [ par lebasketeur ] bonjour tout le monde,Au cours de mon premier projet en php/mysql, j'ai rencontré quelque problème, si vous pouvez bien m'aider...Dans un formulaire d Calendrier [ par vocal94130 ] Bonjour, Je voudrais savoir si vous connaissez un petit calendrier modifiable pour chaque date. Par exemple, si je clique sur 24 juillet, il y à un p Calendrier datepicker [ par midoxe ] bonjour tout le monde, Au cours de mon projet en php/mysql, j'ai rencontré quelque problème, si vous pouvez bien m'aider... Dans un formulaire d'ajou gestion calendrier [ par ikramta ] salut tout le monde.j'ai teléchargé un script qui permet d'afficher un calendrier et c'est vraiment ce que je veut ,mais une petite chause qui  me blo jaimerais savoir comment faire un <no script> qui remplace un calendrier pour inserer des date mais les bonne 31 fevrier sa n'existe pas merci #1 message [ par gb66 ] le ... veut dire que je ne veux pas me compliquer la tache a tout réécrire car ses sur un autre pc sa ressemble a sa je veux mettre mon noscript la-


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
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 : 3,416 sec (3)

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