Affichage d'un planning (agenda)

**bonano** · 19/04/2007, 10h02

Bonjour;

Je travaille sur une application de planification des travaux en j2ee ( jsp servlets). pour le moment j'ai arrivé à palanifier des travaux pour chaque equipe et mes données sont la base dans une table travail ( id, date, heure, duree,....)comme un rendez vous. Maintenant je doit afficher la claendrier des travaux palinifié pour une equipe avec possibilté de glisser/deplacer, modifier en double clickant sur des travaux....S'il ya qlq1 qui a deja travailler sur des aplication de ce genre en java (jsp + ajax/javascript). JE veux faire qlqc qui ressemble à ça mais en jsp : http://www.dhtmlgoodies.com/scripts/...k-planner.html, cette exemple est pas mal, mais c'est php en plus les js sont un peu compliqués.

Merci pour votre avis et conseils.

**SpaceFrog** · 19/04/2007, 10h04

j'ai une base de calendrier qui pourrait te servir tout en javascript si ça t'intéresse...

je suis parti du calendrier proposé par microsoftt en popup que j'ai modifié pour le coller dasn un div sur la page ...

**bonano** · 19/04/2007, 10h21

Envoyé par SpaceFrog

j'ai une base de calendrier qui pourrait te servir tout en javascript si ça t'intéresse...

je suis parti du calendrier proposé par microsoftt en popup que j'ai modifié pour le coller dasn un div sur la page ...

Oui si ça vas m'aider, ya pas de souci, merci

Tu me le passe si ça te gene pas biensure.

**SpaceFrog** · 19/04/2007, 10h29

Bon en voici un petit résumé...

Il suffit de l'adapter pour affichage sur la page sur le onload, mais tous les éléments nécessaires sont là..
création et population des cases en fonction des dates
coloration conditionnelle des cases passage au mois suivant précédent
etc ...

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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Réservation</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" media="screen" type="text/css" title="Essaireservation" href="essaireservation.css" />
 
<script type='text/javascript'>
function show_calendar(str_target, str_datetime) {
   var arr_months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
   var week_days = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];
   var n_weekstart = 1; // day week starts from (normally 0 or 1)
 
// Si la date est invalide : Initialisation avec la date du jour
var test_date = /^(\d+)\/(\d+)\/(\d+)$/;
if (!test_date.exec(str_datetime)) { 	var d = new Date();
											var str_datetime = d.getDate()+ "/" +(d.getMonth() + 1) + "/"+  d.getFullYear();
										 }
 
 
   var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
 
/* JOUR MOIS ET ANNEE PRESENTE*/
   var this_Day = new Date().getDate()
   var this_Month = new Date().getMonth()
	var this_Year = new Date().getFullYear()
 
/* MOIS PRECEDENT */
   var dt_prev_month = new Date(dt_datetime);
   dt_prev_month.setMonth(dt_datetime.getMonth()-1);
   var dt_next_month = new Date(dt_datetime);
   dt_next_month.setMonth(dt_datetime.getMonth()+1);
 
/* ANNEE PRECEDENTE */   
   var dt_prev_year = new Date(dt_datetime);
   dt_prev_year.setFullYear(dt_datetime.getFullYear()-1);
   var dt_next_year = new Date(dt_datetime);
   dt_next_year.setFullYear(dt_datetime.getFullYear()+1);
 
/* PREMIER JOUR DU MOIS */
   var dt_firstday = new Date(dt_datetime);
   dt_firstday.setDate(1);
   dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
 
/* DERNIER JOUR DU MOIS    */
   var dt_lastday = new Date(dt_next_month);
   dt_lastday.setDate(0);
 
/* TITRE DU CALENDRIER */
   var title_calendar=(str_target=='dd')?'DATE D\'ARRIVEE':'DATE DE DEPART';
 
   // html generation (feel free to tune it for your particular application)
   // ENTETE CALENDRIER
   var StringYear=dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear().toString().length)
   var str_buffer = new String (
      "<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
      "<tr>\n<td bgcolor=\"#4682B4\">"+
      "<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
 
   //ENTETE TABLEAU
   "<tr>\n   <td bgcolor=\"blue\" style='text-align:center;color:white;font-family:verdana;font-weight:bold;font-size:11px;' colspan=\"6\">"+title_calendar+"<\/td>\n"+
   "<td bgcolor=\"blue\" style=\"text-align:center;color:navy;font-family:verdana;font-weight:bold;font-size:10px;background-color:silver;border:outset 2px white;cursor:pointer;\" onclick=\"document.getElementById('DivCalendar').style.display='none';\">X<\/td>\n "+
   "<\/tr>\n"+
 
 
 
// Ligne Année précédente / suivante
      "<tr>\n   <td bgcolor=\"blue\"><a href=\"javascript:show_calendar('"+str_target+"', '"+ 
      dt2dtstr(dt_prev_year)+"');\">"+
      "<img src=\"Images/prev.ico\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"Année précédente\"></a></td>\n"+
      "   <td align=\"center\" bgcolor=\"blue\" colspan=\"5\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
      +" 20"+StringYear+"</font></td>\n"+
      "   <td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
      "<img src=\"Images/next.ico\" width=\"16\" height=\"16\" border=\"0\""+
 
      " alt=\"Année suivante\"></a></td>\n</tr>\n"+
 
// Ligne Mois précédent / suivant
      "<tr>\n   <td bgcolor=\"#4682B4\"><a href=\"javascript:show_calendar('"+
      str_target+"', '"+ dt2dtstr(dt_prev_month)+"'); \">"+
      "<img src=\"Images/prev.ico\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"MP\" title=\""+dt_prev_month+"\"></a></td>\n"+
      "   <td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
      +arr_months[dt_datetime.getMonth()]+" 20"+StringYear+"</font></td>\n"+
      "   <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:show_calendar('"
      +str_target+"', '"+dt2dtstr(dt_next_month)+"');  \">"+
      "<img src=\"Images/next.ico\" width=\"16\" height=\"16\" border=\"0\""+
      " alt=\"MS\"  title=\""+dt_next_month+"\" ></a></td>\n</tr>\n"
 
   ); //end newstring
 
   var dt_current_day = new Date(dt_firstday);
 
   // print weekdays titles
   str_buffer += "<tr>\n";
   for (var n=0; n<7; n++)
      str_buffer += "   <td bgcolor=\"#87CEFA\">"+
      "<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
      week_days[(n_weekstart+n)%7]+"</font></td>\n";
 
 
   // print calendar table
   str_buffer += "</tr>\n";
   while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
      dt_current_day.getMonth() == dt_firstday.getMonth()) {
 
      // print row header
      str_buffer += "<tr>\n";
      for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
            if (dt_current_day.getDate() == this_Day &&  dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear()==this_Year ){
 
              // case aujourd'hui
               str_buffer += "   <td bgcolor=\"#FFB6C1\" align=\"right\">";}
 
            else {
            		if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6){
	               	// case de weekend 
   		            	str_buffer += "   <td bgcolor=\"#DBEAF5\" align=\"right\">";
   		            	}
		          else{
       	        	// jour ouvres du mois
          		     	str_buffer += "   <td bgcolor=\"white\" align=\"right\">";
						}
				  }
 
 
if( dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear() == this_Year ){
// mois en cours et jours précédents grisés
           if ((dt_current_day.getDate() >= dt_datetime.getDate()) && (dt_current_day.getMonth() == dt_datetime.getMonth())){
                // jours du mois en cours actifs
               str_buffer += "<a style=\"cursor:pointer;\" onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none'; \">"+
               "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
 
           else {
               // jours des mois précédents et suivants en gris
               str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
 
}
else {
if( (dt_current_day.getMonth() > this_Month && dt_current_day.getFullYear() ==this_Year ) || dt_current_day.getFullYear() >this_Year ){ 
// mois futurs
           if ( dt_current_day.getMonth() == dt_datetime.getMonth()){
 
               // jours du mois en cours actifs
               str_buffer += "<a style='cursor:pointer;' onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none';\">"+
               "<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
 
           else {
               // jours des mois précédents et suivants en gris
               str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
 
}
 
// mois précédents ...  
else{		if( (dt_current_day.getMonth() < this_Month && dt_current_day.getFullYear() == this_Year) || ( dt_current_day.getFullYear() < this_Year)){              
               str_buffer += "<a><font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
				}
	}
}         
 
               str_buffer += dt_current_day.getDate()+"</font></a></td>\n"; 
 
 
            dt_current_day.setDate(dt_current_day.getDate()+1);
      }
 
 
      // print row footer
      str_buffer += "</tr>\n";
   }
 
   // print calendar footer
   str_buffer +=  "</tr>\n</td>\n</table>\n" ;
 
 
 
   fenCalendrier=document.getElementById('DivCalendar');
   fenCalendrier.innerHTML=str_buffer;
   fenCalendrier.style.top=document.getElementById(str_target).offsetTop+"px";
   fenCalendrier.style.left=Number(document.getElementById(str_target).offsetLeft)+Number(document.getElementById(str_target).offsetWidth)+200+"px";
   fenCalendrier.style.display="block"
 
 
 
 
 
 
 
}
// datetime parsing and formatting routines. modify them if you wish other datetime format
function str2dt (str_datetime) {
   var re_date = /^(\d+)\/(\d+)\/(\d+)$/;
   if (!re_date.exec(str_datetime))
      return alert("Invalid Datetime format: "+ str_datetime);
   return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
 
 
 
/***********************************
* Formatage de date pour affichage *
***********************************/
 
function dt2dtstr (dt_datetime) {
   var FormatedDate=""
 
   FormatedDate+=(dt_datetime.getDate().toString().length==1)?"0"+dt_datetime.getDate().toString():dt_datetime.getDate().toString();
   FormatedDate+="/";
   FormatedDate+=((dt_datetime.getMonth()+1).toString().length==1)?"0"+(dt_datetime.getMonth()+1).toString():(dt_datetime.getMonth()+1).toString();
   FormatedDate+="/";
   FormatedDate+="20"+dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear()).toString()
   return FormatedDate;
}
 
function dt2tmstr (dt_datetime) {
   return (new String (dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}
 
 
 
/*************************
* comparaison des dates  *
*************************/
function comparedate(){
 
var maintenant=new Date()
maintenant=dt2dtstr(maintenant).split('\/').reverse().join('')
 
 
 
if(document.getElementById('da').value.length<1){
                                             alert("Entrez une date d\'arrivee");
                                             return false;
                                             }
 
var date_arrivee=document.getElementById('da').value.split('\/').reverse().join('');
if(date_arrivee<maintenant){
                             alert('vous ne pourrez pas arriver avant aujourd\'hui');
                             return false;
                             }
 
if(document.getElementById('da').value.length<1){
                                                 alert("Entrez une date de départ");
                                                 return false;
                                                 }
 
var date_depart=document.getElementById('dd').value.split('\/').reverse().join('');
if(date_arrivee>date_depart){
                             alert("Vous devez arriver avant de repartir!");
                             return false;
                             }
 
 
else {     
      return true;}
 
}
('votre nom')
</script>
</head>
 
<body>
 
 
<div id="DivCalendar" style=" width:200px;height:235px; z-index:200; display:none;position:absolute; Top:1px;left:1px;"></div>
<input type='text' name='arrivee' id='arrivee' onclick="show_calendar('arrivee',10)"  onfocus="show_calendar('arrivee',10)" style='text-align:right'readonly /><br />
<input type='text' name='depart' id='depart' onclick="show_calendar('depart',10)" onfocus="show_calendar('depart',10)" style='text-align:right'readonly /><br />
 
</body>
</html>

**E.Bzz** · 19/04/2007, 10h58

J'ai pris aussi, merci donc

... mais ... mais ... mais, je rêve ou il est généré via innerHTML

Je plaisante : nickel !

Par contre, des erreurs avec IE6 (pas avec Firefox) en laissant tout tel quel.
(au clic sur la croix, sur une date)
C'est dû aux adaptations à faire pour le onload ?

**SpaceFrog** · 19/04/2007, 11h04

oui

c'est bien en partie de l'innerHTML pour deux raisons principalement:

le script original de microsoft est intégralement en innerHTML, et pour répondre dans l'urgence à la détresse d'une developpeuse je n'ai pas eu le temps de basculer en DOM
il est cross-browser comme ça alors j'ai pas vraiment cherché plus loin ...

Promis quand j'aurais un peu plus de temps je le passerait intégralement en DOM et css

**E.Bzz** · 19/04/2007, 11h16

Envoyé par SpaceFrog

Promis quand j'aurais un peu plus de temps je le passerait intégralement en DOM et css

Pas urgent, me concernant

Et pour les erreurs, c'est une adaptation nécessaire (pour IE6, donc), que j'ai loupée ?

**SpaceFrog** · 19/04/2007, 11h20

dequels erreurs parles tu ?
j'ai du coller la mauvaise version

arf non en fait je vois ...

Code :

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

document.getElementById('selpays').style.visibility='visible'

faut virer tout ça

j'aais en fait un select sur la page qui me posait des soucis de recouvrement donc je le rendais invisible à chaque fois ...
mais j'ai oublié de virer sa réactivation pour l'extrait ...
je le modifie dasn le code ci dessus ...

**E.Bzz** · 19/04/2007, 11h32

Bien vu : ce n'était que ça !
Merci.

Par contre, bizarre que FF ait pas gueuler aussi : l'objet n'existait pas pour lui non plus

**SpaceFrog** · 19/04/2007, 11h34

Bien vu : ce n'était que ça !

J'ai assez bidouillé autour de ce code pour commencer à le connaitre par coeur ...

il n'est d'ailleurs pas du tout rationalisé, il y a des variables redondantes... il mériterait un bon coup de nettoyage ...
mais là j'ai pas trop le temps...
l'essentiel est qu'il soit fonctionnel ...

**bonano** · 19/04/2007, 14h31

Merci pour vous , Mais ça répond pas à ce que je veux. je veux en fait un truc qui ressemble à ça ( à peu prés) mais en java et pas de php car je maitrise pas le php et je vai perdre de temps pour l'adapter en jsp/servlet.: http://www.dhtmlgoodies.com/scripts/...k-planner.html

Merci.

**SpaceFrog** · 19/04/2007, 14h36

si tu veux du java => direction le forum java ...
ici c'est javascript ...

rien à voir

Affichage d'un planning (agenda)

JavaScript

Discussions similaires

Partager

Partager