//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! //! Déclaration des variables globales ! //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! var calendarRoot = "calendar"; var nomMois = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"); //Tableau contenant le nom des mois (12 valeurs de 0 à 11) var nomJours = new Array("Lun","Mar","Mer","Jeu","Ven","Sam","Dim"); //Tableau contenant le nom des jours (7 valeurs de 0 à 6) var nbDaysInMonth = new Array(31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //Tableau contenant le nombre de jours dans un mois (valeurs fixes, cas particulier pour le mois de février qui nécéssite une fonction de bissextilité) var joursferies = new Array("01/01", "01/05", "08/05", "14/07", "15/08", "01/11", "11/11", "25/12"); var feriesaleatoires = new Array; //Tableau qui contiendra les dates générées par la fonction jours_fériés pour une année donnée feriesaleatoires[0] = "1"; //Date de paques (initialisée à 1) feriesaleatoires[1] = "1"; //Date de l'ascension (idem) feriesaleatoires[2] = "1"; //date de pentecôte (idem) var sJour = 0; //Variable qui contient le jour sélectionné var sMois = 0; //Variable qui contient le mois séléctioné var sAnnee = 0; //Variable qui contient l'année sélectionée var crtdate = new Date(); //crtdate pour current date var jour = crtdate.getDay(); //Variable qui contient le jour actuel !!0 pour dimanche, 1 pour lundi ... 6 pour samedi!! var mois = crtdate.getMonth(); //Variable qui contient le mois actuel !! 0 pour janvier, 11 pour décembre !! indice_mois = (mois + 1); //Mise en forme USA -> EU if(indice_mois < 10) {indice_mois = ("0"+indice_mois)} //Mise en forme : rajoute un 0 devant le chiffre si il est inférieur à 10 var annee = crtdate.getFullYear(); //Variable qui contient l'année actuelle //!!Permet de récupérer la valeur de l'anné sur 4 chiffres pour la date passée en paramètre!! var indice_jour = crtdate.getDate(); //Variable qui contient la valeur du jour du mois [1 à 31] if(indice_jour < 10) {indice_jour = ("0"+indice_jour)} //mise en forme... var Mouse_X; //Variable globale Position X de la souris var Mouse_Y; //Variable globale Position Y de la souris if(sJour == "") { sJour = jour; } //Initialisation des variables au début si l'on ne sélectionne rien if(sMois == "") { sMois = mois; } //Pareil pour le mois if(sAnnee == "") {sAnnee = annee;} //Pareil pour l'année document.onmousemove = WhereMouse; //Indique la position de la souris sur la page //********************************************************************************************************************************* //* Se charge de montrer/cacher l'élement calendrier selon le navigateur internet (firefox ne prend pas en charge l'objet .event) * //********************************************************************************************************************************* function affiche_calendrier(id_input) { vient_d_etre_affiche = true; champ_a_modifier = id_input; //alert("Vous allez maintenant modifier le contenu de "+champ_a_modifier); if(document.getElementById("calendrier").style.visibility == "visible") { document.getElementById("calendrier").style.visibility = "hidden"; //si le calendrier est déjà affiché, on le cache. } else { document.getElementById("calendrier").style.visibility = "visible"; dispCal(); //appelle la fonction dispCal (génération du tableau calendrier) } } //**************************************************************************************************************************** //* Détermine si une année est bissextile ou non, tout simplement en vérifiant s'il existe le 29 février de l'année en cours * //* Entrée: variable annee * //* Sortie: booléen VRAI ou FAUX * //**************************************************************************************************************************** function isBissextile(annee) { fev = new Date(annee, 1, 29); if(fev.getDate() == 29) {return(true);} else {return(false);} } //*************************************************************************** //* Fonction qui détermine la position du curseur de la souris dans la page * //*************************************************************************** function WhereMouse(e) { // L'événement est passée à la fonction // donc tous sauf IE… if(e) // Si le curseur de la souris a bougé... { // Dans ce cas on obtient directement la position dans la page Mouse_X = e.pageX; Mouse_Y = e.pageY; } else { // Dans ce cas on obtient la position relative à la fenêtre d'affichage Mouse_X = event.clientX; Mouse_Y = event.clientY; } } //************************************************************* //* Fonction qui actualise le calendrier selon l'incrémention * //************************************************************* function changeMonth(type) { if(type == "+") { if(sMois == 11) {sAnnee++; sMois = 0;} else {sMois++;} //Si l'on était au mois de décembre lors d'une incrémentation, on retombe sur le mois 0 (janvier) sinon on incrémente de 1 } if(type == "-") { if(sMois == 0) {sAnnee--; sMois = 11;} else {sMois--;} //Si l'on était au mois de janvier lors d'une décrémentation, on retombe sur le mois 11 (décembre) sinon on décrémente de 1 } dispCal(); // puis on regénère un nouveau calendrier } //********************************************************************************************************* //* Fonction qui détermine le nombre de jours maximum d'un mois, selon que l'année soit bissextile ou non * //********************************************************************************************************* function getNbDay(month, year) { if((month == 1) && (isBissextile(year))) {return(29);} //Dans le cas où une année est bissextile et que l'on demande pour le mois de février, la fonction retournera 29... if((month == 1) && (!isBissextile(year))) {return(28);} //Dans le cas où une année est non bissextile et que l'on demande pour le mois de février, la fonction retournera 28... return(nbDaysInMonth[month]); //Sinon, la fonction ira chercher dans le tableau nbDaysInMonth le nombre de jours du mois voulu à l'indice du mois indiqué... } //******************************************************* //* Fonction qui génère un calendrier d'un mois en HTML * //******************************************************* function dispCal() { //Création d'un objet date pour savoir le mois et l'année actuelle à chaque appel de la fonction dispCal (la variable globale "mois" crée des erreurs si la fonction dispCal est appelée plus d'une fois) var avoir_date = new Date(); var le_mois = avoir_date.getMonth(); var l_annee = avoir_date.getFullYear(); //Entête du calendrier (peut être passé par style CSS... mais présente certaines incompatibilitées: border-collapse) codeHtml=""; codeHtml+=" "; //Structure conditionelle qui empêche d'aller sur les mois antérieurs au mois actuel. if (((sMois < le_mois) || (sMois == le_mois)) && (l_annee == sAnnee)){ codeHtml+=" "; } else if ((sMois > le_mois) || (sAnnee > l_annee)){ codeHtml+=" "; } codeHtml+=" "; codeHtml+=" "; //Boucle POUR qui rempli le nom des jours dans la 2ème ligne du tableau. for(i = 0; i < nomJours.length; i++) { codeHtml+=" "; } codeHtml+=" "; // Corps du calendrier: // +++ Premiers jours du mois +++ jMois = new Date(sAnnee, sMois, 1); wday = jMois.getDay(); //variable wday (pour "week day") : chargé de récupérer à quel jour correspond le 1er jour du mois (0: dimanche, 1:lundi ... 6:samedi) if(wday == 0) {wday = 7;} //si ce jour correspond à un dimanche (javascript est au format US et place le dimanche en début de semaine -> sunday: 0), on le déterminera cette valeur en pos 7 pour la placer en fin de semaine //ainsi on aura les correspondances suivantes: lundi: 1, mardi: 2, mercredi: 3, jeudi: 4, vendredi: 5, samedi: 6, dimanche: 7 wday--; //Pour revenir avec 7 élements de 0 à 6, on décrémente la variable wday de 1 (lundi: 0, mardi: 1, mercredi: 2, jeudi: 3, vendredi: 4, samedi: 5, dimanche: 6) crtDay = 1; // crtDay pour current Day (au début, c'est le 1er du mois) codeHtml+=" "; // +++ Colonne de décallage pour les jours du mois d'avant +++ (sert à remplir les premières cases du calendrier par les derniers jours du mois précédent) for(decal = 0; decal < wday; decal++) { calJ = new Date(sAnnee, sMois, 1-(wday-decal)); codeHtml += ""; } date_actuelle = (indice_jour+"/"+indice_mois+"/"+annee); test = new Date(sAnnee, sMois, crtDay); //On crée une boucle POUR qui va incrémenter le 1er jour du mois et l'inscrire entre des balises TD pour 7 balises TD (fini de remplir une ligne du jour actuel jusqu'en fin de semaine) //Boucle qui rempli le reste de la 1ère ligne par les premiers jours du mois en cours //Pour cette boucle, on fait appel à 5 sous-fonctions. //Ensuite, selon que la date soit supérieure ou inférieure à la date actuelle, on génère une case TD... for(j = 0; j < 7-wday; j++) { test = new Date(sAnnee, sMois, crtDay); //Défini une date grâce à l'objet date num_jour_de_case = test.getDay(); //Récupère le numéro de jour de case (0 1 2 3 4 5 6) jour_de_case = correspond(num_jour_de_case); //Converti ce numéro en sa valeur réelle (dimanche, lundi, mar...) date_courante = id_case(crtDay); //Défini la date au format jj/mm/aaaa de la case qui va être générée jours_feries(sAnnee); //Appel à la fonction qui se charge de déterminer les 3 jours fériés aléatoires en focntion de l'année au format aaaa style = style_case(crtDay); //Défini le style CSS à appliquer etat = compare_dates(date_courante); //Détermine le type de TD à générer en fonction de la date à générer if (etat == "INF"){ // Si la case que l'on va créer est un jour passé codeHtml += ""; } else if (etat == "EGAL"){ // Si la date que l'on va créer est un jour présent. codeHtml += ""; } else if (etat == "SUP"){ // Si la date que l'on va créer est un jour futur. codeHtml += ""; } crtDay++; } codeHtml+=" "; //Et qui fait un retour à la ligne une fois les 7 balises(premières cases) créees (fin de boucle POUR) // +++ Autres lignes du calendrier +++ lastDay = getNbDay(sMois, sAnnee); //Fait appel à la fonction getNbDay pour avoir le nombre de jours dans le mois courant (envoie en paramètre sMois et sAnnee) while(crtDay <= lastDay) //On crée une boucle TANTQUE la variable crtDay est inférieure ou égale au nombre de jours dans le mois { codeHtml+=" "; // Rempli pour le mois entier jusqu'au dernier jour du mois... //On fait aussi appel aux 5 mêmes sous-fonctions for(j = 0; j < 7; j++) { cMois = new Date(sAnnee, sMois, crtDay); if(cMois.getMonth() == sMois) { test = new Date(sAnnee, sMois, crtDay); num_jour_de_case = test.getDay(); jour_de_case = correspond(num_jour_de_case); date_courante = id_case(crtDay); jours_feries(sAnnee); style = style_case(crtDay); etat = compare_dates(date_courante); if (etat == "INF"){ // Si la case que l'on va créer est un jour passé codeHtml += ""; } else if (etat == "EGAL"){ // Si la date que l'on va créer est un jour présent. codeHtml += ""; } else if (etat == "SUP"){ // Si la date que l'on va créer est un jour futur. codeHtml += ""; } } else { codeHtml += ""; } crtDay++; } codeHtml+=" "; } codeHtml+="
"+nomMois[sMois]+" "+sAnnee+" "+nomMois[sMois]+" "+sAnnee+"
"+nomJours[i]+"
"+calJ.getDate()+"" +crtDay+ "" +crtDay+ "" +crtDay+ "
" +crtDay+ "" +crtDay+ "" +crtDay+ ""+cMois.getDate()+"
"; document.getElementById("calendrier").innerHTML = codeHtml; } //************************************************************************ //*Fonction qui attribue pour une case sa date (format jj/mm/aaaa) en ID:* //************************************************************************ function id_case(jour_case) { mois_case = (sMois + 1); jour_case = crtDay; if(jour_case < 10){ jour_case = ("0"+jour_case); } if(mois_case < 10){ mois_case = ("0"+mois_case); } return (jour_case+"/"+mois_case+"/"+sAnnee); } //**************************************************************************** //*Fonction qui détermine le style CSS d'une case en fonction de sa date * //*3 styles sont possible selon la date: normal, jour present ou jour férié * //**************************************************************************** function style_case(le_jour) { le_mois = (sMois + 1); //Mise en forme USA -> EU if(le_jour < 10){ //Mise en forme si nombre inf. à 10, on ajoute un 0 devant le_jour = ("0"+le_jour); } if(le_mois < 10){ //Idem... le_mois = ("0"+le_mois); } //Dans le cas où une case correspond à la date de début sélectionné... if(date_courante == (champ_a_modifier.value)){return ("debut")} //Dans le cas où une case correspond à la date de fin sélectionné... // if(date_courante == (document.formulaire.date_fin.value)){return ("fin")} //Dans le cas où une case correspond à la date actuelle... if(date_actuelle == date_courante){return ("present")} //Dans le cas où une case correspondrait à un jour férié du tableau joursferies... for (k = 0; k < joursferies.length; k++){ if(joursferies[k] == (le_jour+"/"+le_mois)){return ("ferie")} } //Dans le cas où une case correspondrait à un des 3 jours fériés aléatoires... for (l = 0; l < feriesaleatoires.length; l++){ if(feriesaleatoires[l] == (le_jour+"/"+le_mois)){return ("ferie")} } return ("normal"); } //********************************************************************************* //* Fonction qui met en forme l'attribut CSS avec l'indice du jour correspondant * //* (il est impossible qu'un style CSS commence par un chiffre) * //********************************************************************************* function correspond(num_jour) { if (num_jour == 0){return ("dimanche");} if (num_jour == 1){return ("lundi");} if (num_jour == 2){return ("mardi");} if (num_jour == 3){return ("mercredi");} if (num_jour == 4){return ("jeudi");} if (num_jour == 5){return ("vendredi");} if (num_jour == 6){return ("samedi");} } //*********************************************************************************************************************** //*Fonction qui se charge de mettre dans le champ (input) en question la date du jour cliqué sur une case du calendrier * //*********************************************************************************************************************** function clic_jour(jour_clique) { document.getElementById(champ_a_modifier).value = jour_clique; } //****************************************************************************************** //* Fonction qui compare si une date est inférieur, égale ou supérieure à al date actuelle * //****************************************************************************************** function compare_dates(testez_moi) { var date_a_tester = new String(testez_moi); //découpage de la date d'iD de la case (qui est une date au format jj/mm/aaaa) en 3 variables pour pouvoir y effectuer des opérations de comparaison... annee_a_tester = date_a_tester.substr(6,4); //pour l'année mois_a_tester = date_a_tester.substr(3,2); //... jour_a_tester = date_a_tester.substr(0,2); //... if (annee_a_tester < annee ){return ("INF")} //L'année de la case est supérieure à l'année actuelle if (annee_a_tester > annee ){return ("SUP")} //L'année de la case est inférieure à l'année actuelle if (annee_a_tester == annee){ //Si l'année de la case est égale à l'année actuelle... if (mois_a_tester < indice_mois ){return ("INF")} //...et que le mois de la case est inférieur au mois actuel if (mois_a_tester > indice_mois ){return ("SUP")} //...et que le mois de la case est supérieur au mois actuel if (mois_a_tester == indice_mois){ //...et que le mois de la case est égal au mois actuel... if(jour_a_tester < indice_jour ){return ("INF")} //...et que le jour de la case est inférieur au jour actuel if(jour_a_tester > indice_jour ){return ("SUP")} //...et que le jour de la case est supérieur au jour actuel if(jour_a_tester == indice_jour){return ("EGAL")} //...et que le jour de la case est égal au jour actuel } } }