Une aide sur un calendrier en javascript [Résolu]

klara56 · 02/08/2011, 14h19

Bonjour,
Je suis nouveau sur le forum et j'aurai besoin d'un âme charitable pour modifier le script ci-dessous.
Il s'agit d'un calendrier affichant les 3 mois de l'année en cours. Ce script fonctionne très bien mais j'aimerai pouvoir en quelques lignes de codes modifier la couleurs de fond de certains jours. Le fond étant beige par défaut, j'aimerai modifier en rouge ou vert par ememple une semaine ou un jour directement en modifiant quelques lignes de codes.
Merci d'avance de votre aide.
Voici le code:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
 
<head>
 
<style type="text/css">
 
.main {
width:200px;
border:1px solid black;
}
 
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
 
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
 
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
 
.days #today{
font-weight: bold;
color: red;
}
 
</style>
 
 
<script type="text/javascript">
/***********************************************
* Basic Calendar-By Brian Gosselin at <a href="http://scriptasylum.com/bgaudiodr/" target="_blank">http://scriptasylum.com/bgaudiodr/</a>
*/ 
function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
 
var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
 
var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
 
dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=1;i<=42;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
</script> 
 
</head>
 
<body>
 
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
</script>
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="33%">
<script>
document.write(buildCal(curmonth-1 ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="33%">
<script>
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
<td width="34%">
<script>
document.write(buildCal(curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 1));
</script></td>
</tr>
</table> 
<p><font face="verdana" size="1">Powered and Generated by </font><a href="http://www.lesite.com" target="_blank"><font face="verdana,arial,helvetica" size="1" color="black">http://www.<b>espacejavascript</b>.com</font></a></p>
 
</body>
 
</html>

RomainVALERI · 02/08/2011, 15h20

Tu veux faire une modif "définitive", en dur ? ou bien pouvoir le changer à l'exécution, par exemple suite à un événement ?

Tu as un lien d'une page en ligne avec ce calendrier ? Histoire de pouvoir tester le rendu "en live" plutot que de suivre ce jeu de pistes à base de tableaux et de document.write

... ^^

klara56 · 02/08/2011, 16h18

Citation:

Envoyé par RomainVALERI

Tu veux faire une modif "définitive", en dur ? ou bien pouvoir le changer à l'exécution, par exemple suite à un événement ?

Tu as un lien d'une page en ligne avec ce calendrier ? Histoire de pouvoir tester le rendu "en live" plutot que de suivre ce jeu de pistes à base de tableaux et de document.write

... ^^

Merci pour ta réponse.

Je voudrais effectivement rendre certains jours ou semaines d'une autre couleur de fond "en dur" que je modifierai en code directement et ensuite je mets à jour la page concernée. Genre une ligne de code pour afficher la semaine du 15 au 20 aout 2011 sera une semaine en rouge, par exemple. Je modifierai donc directement avec FrontPage mon code en dur et ensuite je mets à jour la page. C'est pour un site de gîte (d'un ami) pour mettre les semaines déjà réservées.
Merci d'avance, si on peut faire assez simple car je ne suis pas un expert dans le JavaScript !

klara56 · 02/08/2011, 23h05

Voici le lien de la page en question :

http://www.moulindelaboulaye.fr/reservations.htm

C'est un site que j'ai fait avec Frontpage pour un ami qui a un gîte.
Il aimerait faire apparaitre les semaines ou jours occupés en rouge par exemple (les jours libres en vert). Et pour plus de clarté, ce serait mieux d'avoir le mois en cours à gauche et les deux, voire trois, mois suivants à sa droite.
Je suis nul en JavaScript et se serait sympa de pouvoir réaliser ce petit projet.
Merci d'avance.

RomainVALERI · 03/08/2011, 00h04

[DISCLAIMER PSYCHOLOGIQUE]
Les observations qui suivent n'ont pas pour but de vexer, offenser ou condamner ni l'auteur (Brian Gosselin) ni l'actuel utilisateur (klara56) du code incriminé. Alors s'il vous plait, je vous en prie.
[/DISCLAIMER PSYCHOLOGIQUE]

Dans un tableau écrit en HTML, la modification prendrait 1 minute.

Avec un tableau construit dynamiquement, sur la base d'un code sain et rationnel, ça prendrait 30 secondes.

Mais là, avec un tableau construit comme ici, à la fois sur la base de mauvaises pratiques, d'éléments obsolètes, sans indentation, avec des noms de variables "muets"... ("je dois stocker le nombre de passagers du train... comment vais-je l'appeler : « skfey_g44qe » quelle bonne idée

")

Question aussi lâche que saine (

) >>> Sais-tu qu'il y a un excellent calendrier dans les contributions que propose notre forum... Ce n'est pas exactement le même besoin puisqu'au départ c'est plutot un "datepicker" pour sélectionner une date ^^ mais nul doute que son auteur et les nombreuses personnes ayant participé à sa création préfèreront t'aider à l'implémenter chez toi (tiens, tu n'es pas seul(e) dans ce cas on dirait

) que de retravailler un code antique, visiblement "conçu pour" ne plus être modifié...

Mais ce n'est pas forcément souhaitable, ça dépend aussi du temps, de la motivation et de la compétence que tu pourras/voudras y investir.
Qu'en dis-tu ? ^^

NoSmoking · 03/08/2011, 10h05

Bonjour,
même si il est vrai que document.write a mauvaise presse, et à juste titre dans certains cas, son utilisation pour insérer des éléments dans le flux du document est tout à fait envisageable. C'est le pendant de echo en PHP.

On pourrait lui préférer la méthode avec innerHTML mais est ce bien plus "propre"?

Dans ces 2 cas le code inséré doit être "propre" avec tous les échappements des caractères spéciaux qui le compose, entre autre.

Le "must" étant bien sûr l'utilisation des méthodes DOM d'insertion d'élément tel createElement et appendChild et autre createTextNode, ou encore les méthodes applicables directement au TABLE comme insertRow ou insertCell.

Pour en revenir au code utilisé, il date un peu ce qui peut expliquer la mise en TABLE des 3 TABLE dans une TABLE.
Néanmoins la fonction retournant du code HTML on peut rapidement remplacer les document.write par des innerHTML, en remplaçant la TABLE conteneur par une DIV dans laquelle prendrait place le code une fois celle ci présente dans le DOM, le reste n'étant qu'une question de CSS.

Concernant la mise à jour des données, la création de data de réservation, sous forme JSON par exemple, pourrait permettre, toujours via le CSS, de modifier l'apparence des cellules concernées.

exemple data :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var data = {
  '2011_8_13' : 1,
  '2011_8_14' : 1,
  '2011_8_15' : 0,
  '2011_8_16' : 1,
  '2011_8_14' : 0,
  '2011_10_7' : 1,
  '2011_10_8' : 1,
  '2011_10_9' : 1,
  '2011_11_13' : 1
}

lorsque l'on rempli la case 2011,8,15, par exemple on affecte la class reserve à la cellule, le tour est joué.

Pour la maintenance, il suffira de modifier le fichier contenant les données de réservation.

On se retrouve donc avec
- 1 fichier HTML
- 1 fichier CSS
- 1 fichier JS

la structure du fichier HTML devenant...

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
15
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>R&eacute;servation</title>
<link href="calendrier.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="page">
  <h1>Calendrier des disponibilit&eacute;s</h1>
  <div id="calendrier"></div>
</div>
<script type="text/javascript" src="calendrier.js"></script>
</body>
</html>

et un appel dans le fichier JS du style, sur base de innerHTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var sHtml  = buildCal( curmonth,   curyear, "main", "month", "daysofweek", "days", 0);
    sHtml += buildCal( curmonth+1 ,curyear, "main", "month", "daysofweek", "days", 0);
    sHtml += buildCal( curmonth+2 ,curyear, "main", "month", "daysofweek", "days", 0);
document.getElementById('calendrier').innerHTML = sHtml;

il va de soit que le code de la fonction est à "dépoussiérer" légérement et à factoriser...

Voila en gros l'approche

klara56 · 03/08/2011, 13h58

Bonjour,
Merci pour vos réponses.
RomainVALERI: Effectivement le "calendrier-v3-beta" me parait une bonne base pour commencer mon petit projet.
NoSmoking : Merci pour les explications, il faut que je regarde tout cela bien attentivement pour essayer d'assimiler toutes ces commandes inconnues de mes neurones.

klara56 · 05/08/2011, 07h45

Bonjour,
J'ai finalement trouvé un calendrier qui correspondait à mes attentes.

Merci à vous.

02/08/2011, 15h20	#2
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	Tu veux faire une modif "définitive", en dur ? ou bien pouvoir le changer à l'exécution, par exemple suite à un événement ? Tu as un lien d'une page en ligne avec ce calendrier ? Histoire de pouvoir tester le rendu "en live" plutot que de suivre ce jeu de pistes à base de tableaux et de document.write ... ^^ __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

03/08/2011, 00h04	#5
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 074 Points : 4 074	[DISCLAIMER PSYCHOLOGIQUE] Les observations qui suivent n'ont pas pour but de vexer, offenser ou condamner ni l'auteur (Brian Gosselin) ni l'actuel utilisateur (klara56) du code incriminé. Alors s'il vous plait, je vous en prie. [/DISCLAIMER PSYCHOLOGIQUE] Dans un tableau écrit en HTML, la modification prendrait 1 minute. Avec un tableau construit dynamiquement, sur la base d'un code sain et rationnel, ça prendrait 30 secondes. Mais là, avec un tableau construit comme ici, à la fois sur la base de mauvaises pratiques, d'éléments obsolètes, sans indentation, avec des noms de variables "muets"... ("je dois stocker le nombre de passagers du train... comment vais-je l'appeler : « skfey_g44qe » quelle bonne idée ") Question aussi lâche que saine () >>> Sais-tu qu'il y a un excellent calendrier dans les contributions que propose notre forum... Ce n'est pas exactement le même besoin puisqu'au départ c'est plutot un "datepicker" pour sélectionner une date ^^ mais nul doute que son auteur et les nombreuses personnes ayant participé à sa création préfèreront t'aider à l'implémenter chez toi (tiens, tu n'es pas seul(e) dans ce cas on dirait ) que de retravailler un code antique, visiblement "conçu pour" ne plus être modifié... Mais ce n'est pas forcément souhaitable, ça dépend aussi du temps, de la motivation et de la compétence que tu pourras/voudras y investir. Qu'en dis-tu ? ^^ __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

02/08/2011, 23h05	#4
klara56 Invité de passage Inscription : août 2011 Messages : 5 Détails du profil Informations forums : Inscription : août 2011 Messages : 5 Points : 1 Points : 1	Voici le lien de la page en question : http://www.moulindelaboulaye.fr/reservations.htm C'est un site que j'ai fait avec Frontpage pour un ami qui a un gîte. Il aimerait faire apparaitre les semaines ou jours occupés en rouge par exemple (les jours libres en vert). Et pour plus de clarté, ce serait mieux d'avoir le mois en cours à gauche et les deux, voire trois, mois suivants à sa droite. Je suis nul en JavaScript et se serait sympa de pouvoir réaliser ce petit projet. Merci d'avance.
	00

03/08/2011, 13h58	#7
klara56 Invité de passage Inscription : août 2011 Messages : 5 Détails du profil Informations forums : Inscription : août 2011 Messages : 5 Points : 1 Points : 1	Bonjour, Merci pour vos réponses. RomainVALERI: Effectivement le "calendrier-v3-beta" me parait une bonne base pour commencer mon petit projet. NoSmoking : Merci pour les explications, il faut que je regarde tout cela bien attentivement pour essayer d'assimiler toutes ces commandes inconnues de mes neurones.
	00

05/08/2011, 07h45	#8
klara56 Invité de passage Inscription : août 2011 Messages : 5 Détails du profil Informations forums : Inscription : août 2011 Messages : 5 Points : 1 Points : 1	Bonjour, J'ai finalement trouvé un calendrier qui correspondait à mes attentes. Merci à vous.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email