Bonjour
Je souhaite ajouter a un site un calendrier avec lequel je puisse personnalisé des dates c'est a dire pouvoir affecter une couleur a un jour précis avec si possible une info bulle...
Pour le moment j'ai trouver le code d'un calendrier simple en javascript:
http://www.supportduweb.com/ftp/ybou...alendrier.html
dont voici le code
code html:index.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <!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>
code js: calendrier.js
code css: calendrier.css
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79 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; }
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 .cal_calendrier { border:1px solid black; padding:1px; background-color:white; width:250px; margin:auto; height:200px; } .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; }
je souhaite personnaliser par exemple le 25 et le 31 octobre en le mettant de couleur rouge avec une info bulle :"c' est la que ca se passe." sur les deux dates.
je pense rajouter une div pour le jour evenement avec le code css:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 .cal_evenement { color:#ff0000; }
mais pour le reste en js je suis completement perdu....
HELP!!!!!
Partager