Discussion :

[djesty]

Bonjour!

J'ai récemment posté une autre question à propos d'un calendrier de locations de salle de fête, bref, il fonctionne "parfaitement" sauf que, comme d'habitude, ceux qui n'ont jamais vu de ligne de code dans leur vie aiment ajouter des fonctionnalités...

On m'a demandé d'ajouter un "truc qui s'affiche" (comprenez par là, un title) quand on passe la souris sur une case disponible à la location pour afficher le prix, sauf que, oui encore, pourquoi faire simple quand on peut tout compliquer? Le prix en semaine est différent du week-end (Ve --> Di inclus). J'ai réussi à faire la distinction des deux prix mais j'ai quand même une erreur (sinon je ne serais pas ici en train de vous raconter ma vie...).

Tout fonctionne bien sauf pour la première semaine de chaque mois, en effet, pour cette première semaine, le prix du week-end reste le même qu'en semaine au lieu d'avoir sa bonne valeur...

Ne pouvant pas faire des promos à chaque début du mois, je suis obligé de trouver une solution à ce problème incompréhensible (du moins, pour moi...)

De plus, j'ai fais quelques tests et il semblerait que mon code skip 3 tours de boucle à chaque chargement du nouveau mois...

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
   var ajd = new Date();
   var ajdJour = ajd.getDate();
   var ajdMois = ajd.getMonth();
   var ajdAnnee = ajd.getFullYear();
   var jour;
   var mois;
   var annee;
 
   var stringMonth = function(m)
   {
       switch(parseInt(m))
       {
           case 0:  return 'January';
           case 1:  return 'February';
           case 2:  return 'March';
           case 3:  return 'April';
           case 4:  return 'May';
           case 5:  return 'June';
           case 6:  return 'July';
           case 7:  return 'August';
           case 8:  return 'September';
           case 9:  return 'October';
           case 10: return 'November';
           case 11: return 'December';
           default: return '#ERROR#';
       }
   }
 
   var stringMois = function(month)
   {
       switch(month)
       {
           case 'January': return 'Janvier';
           case 'February': return 'Février';
           case 'March': return 'Mars';
           case 'April': return 'Avril';
           case 'May': return 'Mai';
           case 'June': return 'Juin';
           case 'July': return 'Juillet';
           case 'August': return 'Août';
           case 'September': return 'Septembre';
           case 'October': return 'Octobre';
           case 'November': return 'Novembre';
           case 'December': return 'Décembre';
       }
   }
 
   var setUpCalendar = function(monthToShow)
   {
       if (typeof monthToShow == 'string')
          monthToShow = new Date(monthToShow);
       if (typeof monthToShow == 'object')
          monthToShow = monthToShow;
       else
          monthToShow = new Date();
 
       // Vars
       var m = monthToShow.getMonth();
       var y = monthToShow.getFullYear();
       var numDays = new Date(y, m + 1, 0).getDate();
       var fom = new Date(y, m, 1).getDay();
       var lom = new Date(y, m + 1, 0).getDay();
       var current = m == new Date().getMonth() &&
                     y == new Date().getFullYear();
 
       var curDate = new Date().toISOString().substr(0,10);
 
       // Correct for Sundays
       if (fom == 0)
          fom = 7;
       if (lom == 0)
          lom = 7;
 
       // Correct the # of rows, say if 6
       if ((fom == 7 && numDays > 29) || (fom == 6 && numDays == 31))
          $('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('tbody');
       // or only 4 are needed
       if (fom == 1 && numDays == 28)
          $('tbody tr:last-child').remove();
 
       // Set title
       var month = stringMonth(m);
       mois = stringMois(month);
       annee = y;
       $('table > caption').html(month+' '+y);
 
       // Add starting space and remove extra cells
       if (fom != 1)
       {
          $('tbody > tr:first-child > td').eq(0).attr('colspan', fom - 1);
          $('tbody > tr:first-child').children().slice(9 - fom).remove();
       }
 
       // Add ending space and remove extra cells
       if (lom != 7)
       {
          $('tbody > tr:last-child > td').eq(lom).attr('colspan', 7 - lom);
          $('tbody > tr:last-child').children().slice(lom + 1).remove();
       }
 
       // Add dates in correct cells
       var $cells = $('tbody td');
       // If we have spaces, remove them
       if ($cells.eq(0).attr('colspan'))
       {
          $cells = $cells.slice(1);
       }
       if ($cells.eq($cells.length-1).attr('colspan'))
       {
          $cells = $cells.slice(0, $cells.length-1);
       }
       $cells.each(function(i, elem)
       {
           var dateSAMJ = annee + '-' + ((m+1).toString().length == 1 ? '0'+(m+1).toString() : (m+1).toString()) + '-' + ((i+1).toString().length == 1 ? '0'+(i+1).toString() : (i+1).toString());
           if (arrayB[dateSAMJ] != undefined)
           {
              $(elem).attr('class',arrayB[dateSAMJ]);
           }
           else
           {
               var $This = $(this);
               var col = $This.parent().children().index($(this));
               var title = $This.closest("table").find("th").eq(col).text();
 
               if (curDate < dateSAMJ)
               {
                  $(elem).attr('class','free');
                  $(elem).attr('title', '200€');
               }
               if(this.className == 'free' && (title == 'Ve' || title == 'Sa' || title == 'Di'))
               {
                  $(elem).attr('title', '250€');
               }
           }
 
           $(elem).html(i+1);
       });
 
       $cells.each(function(elem)
       {
          if(m <= ajdMois || y <= ajdAnnee)
          {
             if(m == ajdMois && y == ajdAnnee)
             {
                if(elem < (ajdJour))
                {
                   $(this).attr('class','booked');
                }
             }
             if(y < ajdAnnee)
             {
                $(this).attr('class','booked');
             }
 
             if(m < ajdMois && y == ajdAnnee)
             {
                $(this).attr('class','booked');
             }
          }
       });
 
       // Add shading to today's date
       if(current)
          $cells.eq(new Date().getDate()-1).attr('id', 'today');
 
       var prevM = monthToShow.getMonth()-1;
       if(prevM == -1)
          prevM = '11';
       $('#prev a').html('&laquo; '+stringMonth(prevM));
       var nextM = (monthToShow.getMonth()+1) % 12;
       $('#next a').html(stringMonth(nextM)+' &raquo;');
   }
 
   var resetCalendar = function()
   {
      $('tbody').empty();
      $('tbody').html('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
   }
 
   $('#prev a').click(function()
   {
      var showing = new Date('01 '+$('table > caption').html());
      var prevM = showing.getMonth();
      var prevY = showing.getFullYear();
      if(prevM == 0){
         prevM = '12';
         prevY--;
      }
      resetCalendar();
      setUpCalendar(new Date(prevM+'/01/'+prevY));
   });
   $('#next a').click(function()
   {
      var showing = new Date('01 '+$('table > caption').html());
      var nextM = showing.getMonth()+2;
      var nextY = showing.getFullYear();
      if(nextM == 13)
      {
         nextM = '01';
         nextY++;
      }
      resetCalendar();
      setUpCalendar(new Date(nextM+'/01/'+nextY));
   });
 
   $(document).on("click", ".free", function()
   {
       document.getElementById("dateRes").value = this.innerHTML + ' ' + mois + ' ' + annee;
       document.getElementById("prix").value = $(this).attr('title');;
   });
 
   setUpCalendar();
</script>

Et plus précisemment, voici où se situe la gestion du prix du week-end (dans le 'else' ) :

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
$cells.each(function(i, elem)
{
   var dateSAMJ = annee + '-' + ((m+1).toString().length == 1 ? '0'+(m+1).toString() : (m+1).toString()) + '-' + ((i+1).toString().length == 1 ? '0'+(i+1).toString() : (i+1).toString());
   if (arrayB[dateSAMJ] != undefined)
   {
       $(elem).attr('class',arrayB[dateSAMJ]);
   }
   else
   {
       var $This = $(this);
       var col = $This.parent().children().index($(this));
       var title = $This.closest("table").find("th").eq(col).text();
 
       if (curDate < dateSAMJ)
       {
           $(elem).attr('class','free');
           $(elem).attr('title', '200€');
       }
       if(this.className == 'free' && (title == 'Ve' || title == 'Sa' || title == 'Di'))
       {
           $(elem).attr('title', '250€');
       }
   }
 
   $(elem).html(i+1);
});

Merci d'avance!

[badaze]

En fait tu t'embêtes pour rien.

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
$cells.each(function(i, elem)
{
  var dateSAMJ = annee + '-' + ((m+1).toString().length == 1 ? '0'+(m+1).toString() : (m+1).toString()) + '-' + ((i+1).toString().length == 1 ? '0'+(i+1).toString() : (i+1).toString());
  if (arrayB[dateSAMJ] != undefined) 
  {
    $(elem).attr('class',arrayB[dateSAMJ]);
  }
  else 
  {
    if (curDate <= dateSAMJ) 
    {
  var dayNum = new Date(y, m, i+1).getDay();
 
  $(elem).attr('class','free'); 
  $(elem).attr('title','200€');
 
  if (dayNum == 0 || dayNum == 6)
  {
   $(elem).attr('title','250€');
  }
    }
  }  $(elem).html(i+1);
});

Je viens de me rendre compte que je n'ai pas mis le vendredi dans le weekend => dayNum = 5.

[djesty]

Mon ange gardien du Javascript m'a encore sauvé!

Je pense que je vais renommer mon calendrier à ton nom pour tout ce que tu as fait!

Ca marche nickel!