Faire un calendrier en javascript avec un effet de transparence |
|---|
Faire un calendrier en javascript avec un effet de transparenceNote : 4.5/5 (5 votes) Derniéres modifications : 26/01/2012 à 15:20:33 Mots-Clés : calendrier javascript scripts moi année jours semaine (X)html css transparence opacity opacitée calendar Dans ce script, je vous apprendrait à faire un calendrier JavaScript avec un effet de transparence et le tout valide (X)html strict 1.1 et css 2. Pour ceux qui sont curieux: Bon pour commencer, le fonctionnement va être simple, on récupère la le jour, le moi et l'année en forme de chiffre. Le calendrier va être fait en tableau, son titre sera la date actuelle. Nous allons aussi faire un tableau array en JavaScript qui contient le nombre de jours dans chaque moi. Pour le moi de Février, nous allons tout simplement lui donner la valeur de 29 si nous sommes dans une année bissextile. Nous allons récupérer le jour de la semaine du premier jour du moi et allons faire une boucle selon le nombre de jours du moi actuel. Pour complexer un petit peu les choses nous allons aussi afficher les derniers et premiers jours des mois qui précèdes ou qui suives. Et à chaque fois que l?on arrive au samedi, on saute de ligne car on commence une nouvelle semaine.Pour ceux qui ne savaient pas, le dimanche est le premier jour de la semaine.
Les cellules du tableau seront mises en transparence grâce à une fonction JavaScript et le tableau aura une image de fond de votre choix. Bon assez parler, le code : calendrier.js: Code: JavaScript function setStyle(id,style,value) { id.style[style] = value; } function opacite(el,opacity) { setStyle(el,"filter:","alpha(opacity="+opacity+")"); setStyle(el,"-moz-opacity",opacity/100); setStyle(el,"-khtml-opacity",opacity/100); setStyle(el,"opacity",opacity/100); } function calendrier() { var date = new Date(); var jour = date.getDate(); var moi = date.getMonth(); var annee = date.getYear(); if(annee<=200) { annee += 1900; } mois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'); jours_dans_moi = new Array(31,28,31,30,31,30,31,31,30,31,30,31); if(annee%4 == 0 && annee!=1900) { jours_dans_moi[1]=29; } total = jours_dans_moi[moi]; var date_aujourdui = jour+' '+mois[moi]+' '+annee; dep_j = date; dep_j.setDate(1); if(dep_j.getDate()==2) { dep_j=setDate(0); } dep_j = dep_j.getDay(); document.write('<table class="cal_calendrier" onload="opacite(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_aujourdui+'</th></tr>'); document.write('<tr class="cal_j_semaines"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>'); sem = 0; for(i=1;i<=dep_j;i++) { document.write('<td class="cal_jours_av_ap">'+(jours_dans_moi[moi-1]-dep_j+i)+'</td>'); sem++; } for(i=1;i<=total;i++) { if(sem==0) { document.write('<tr>'); } if(jour==i) { document.write('<td class="cal_aujourdhui">'+i+'</td>'); } else { document.write('<td>'+i+'</td>'); } sem++; if(sem==7) { document.write('</tr>'); sem=0; } } for(i=1;sem!=0;i++) { document.write('<td class="cal_jours_av_ap">'+i+'</td>'); sem++; if(sem==7) { document.write('</tr>'); sem=0; } } document.write('</tbody></table>'); opacite(document.getElementById('cal_body'),70); return true; } calendrier.css: Code: CSS .cal_calendrier { border:1px solid black; padding:1px; background-color:#4594ff; width:250px; margin:auto; height:200px; background-image:url('http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/calendrier/fond-250-200.gif'); } .cal_calendrier th { border:1px solid black; background-color:#ffffff; } .cal_calendrier td { border:1px solid black; background-color:#ffffff; text-align:center; } .cal_aujourdhui { color:#ff0000; } .cal_jours_av_ap { color:#5a779e; } Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calendrier javascript</title> <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calendrier.css" /> <script type="text/javascript" src="calendrier.js"></script> </head> <body> <script type="text/javascript"> calendrier(); </script> </body> </html> Merci à tous pour votre lecture. Scripts et tutoriaux similaires à celui ci:
CommentairesAjouter un commentaireLes commentairesEnvoyé par JLN le 11/01/2009 à 05:42:49
Citation : "Pour ceux qui ne savaient pas, le dimanche est le premier jour de la semaine."
Seulement pour les anglophone, pour nous c'est le lundi. Avec quelques modif simple on peut rectifier le tir... Envoyé par ybouane le 11/01/2009 à 10:26:35
Merci pour ta remarque car je ne le savait pas
cette article de wikipedia le dit dailleur: http://fr.wikipedia.org/wiki/Hebdomadaire Citation: Le lundi est considéré comme le premier jour de la semaine. (norme ISO 8601 et Académie française). merci quand j'aurai le temps je le modifierait. :) Envoyé par tyty14 le 27/10/2009 à 11:59:40
salut à tous,
j'aurais besoin de rajouter des boutons pour aller au mois suivant et précèdent. Si quelqu'un peux m'aider. Merci d'avance. Envoyé par Abdelfettah le 24/10/2010 à 01:28:17
Merci Bcp mon frére, c'est vraiment génial !!!!!!!!!
Envoyé par SPB le 25/05/2011 à 23:37:18
Citation : "Pour ceux qui ne savaient pas, le dimanche est le premier jour de la semaine."
C'est vrai pour tous les pays de calendrier Grégorien. Envoyé par moumo le 20/06/2011 à 17:08:42
mercii il ma beaucoup aider
Envoyé par ptitnono888 le 26/06/2011 à 18:18:24
Super c'est ce que je cherchais depuis longtemps ! Ça serait bien de rajouter une fonction qui permette d'ajouter des évènements sur le calendrier...
Envoyé par lala le 31/12/2011 à 14:23:37
sa marche pas --'
Envoyé par hunter le 13/01/2012 à 17:50:04
<script type="text/javascript">
alert("ne ça marche pas "); </script> Envoyé par vcrcepex le 24/01/2012 à 12:30:03
20
Envoyé par qsnXXPItpitAQRCGu le 26/01/2012 à 03:12:31
Ab fab my gdooly man.
Envoyé par linuxidable le 06/02/2012 à 21:44:52
remarque: le dernier jours du mois est le même que le jour zero du mois suivant; cela évite bien des recherches sur le nombre de jours
<script type="text/javascript"> var mois=3 var an=2011 var ladate= new Date(mois+"/"+0+"/"+an) //jour zero du mois de mars var j=ladate.getDate() alert(j) // devrait sortir 29 </script> superbe travail !!! Envoyé par uraniumsimo le 09/02/2013 à 16:27:08
mérci boucoup c'est une manifique application de calendrier
|