[JavaScript] [SRC] Calendrier developpez V2 ( plus mieux mieux )

[jamdinhe]

très complet comme calendrier, moi qui galérais pour en trouver un !!

alors, qu'il m'aurais fallut juste de passer par là

a bientot, très bonne continuation a tout ceux qui veulent aider

AminE

[dark_vidor]

j'ai personnellement développé une version beaucoup plus simple :

voici le script :

Code :

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
//Variables globales
var calendar = "calendrier";
var color_onMouseOver = "#D7E6FF";
var color_default = "#FFFFFF";
var cache;
var element;
 
//Vide le cache
function ob_clean()
{
	cache = "";
}
 
//Envoie le cache
function ob_flush()
{
	document.getElementById(calendar).style.display = '';
	document.getElementById(calendar).innerHTML = cache;
}
 
//Donne le format à la date
function format_date( day, month, year )
{
	mm = '0'+month;
	mm = mm.substr(mm.length - 2);
 
	dd = '0'+day;
	dd = dd.substr(dd.length - 2);
 
	// YYYY-MM-DD
	return year + '-' + mm + '-' + dd;
}
 
//Permet de colorier sur le hover les <td> avec des dates
function colorswap( object, color )
{
	object.style.backgroundColor = color;
}
 
//Affiche dans l'input la date
function set_input( day, month, year )
{
	document.getElementById(calendar).style.display = 'none';
 
	if (typeof(element.value) != 'undefined')
	{
		element.value = format_date( day, month, year );
	}
	else if (typeof(element.innerHTML) != 'undefined')
	{
		element.innerHTML = format_date( day, month, year );
	}
	else
	{
		alert ( format_date( day, month, year ) );
	}
}
 
//Retourne la case <td> avec la date + les appels de fonctions
function new_day( day, month, year )
{
	return '    <td onClick="javascript:set_input('+day+', '+month+', '+year+');" onMouseOver="javascript:colorswap(this, \''+color_onMouseOver+'\');" onMouseOut="javascript:colorswap(this, \''+color_default+'\');" class="day">'+day+'</td>';
}
 
// Get the left and the top of the element.
function GET_left(el)
{
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el)
	{
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
 
function GET_top(el)
{
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el)
	{
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}
 
//Créer le calendrier
function draw_calendar( month, year )
{
	//Avant tout on vide le cache et on affiche
	ob_clean();
 
	//On définit la variable date
	var date = new Date();
	date.setMonth(month - 1); //Janvier correspond au mois 0 et Décembre au mois 11
	date.setFullYear(year);
	date.setDate(1);
 
	//On définit le premier jour du mois
	var first_day = date.getDay(); //0 correspond au dimanche et 6 correspond au samedi
 
 
	//On définit le nombre de jours dans le mois (28,29,30,31 jours)
	if ( month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
	{
		var days = 31;
	}
	else if (month == 4 || month == 6 || month == 9 || month == 11)
	{
		var days = 30;
	}
	else
	{
		var days = (year % 4 == 0) ? 29 : 28;
	}
 
	//On définit le dernier jour du mois
	date.setDate(days);
	var last_day = date.getDay();
 
	//On définit le tableau mois
	var array_month = new Array(12);
	array_month[0] = "January";
	array_month[1] = "February";
	array_month[2] = "March";
	array_month[3] = "April";
	array_month[4] = "May";
	array_month[5] = "June";
	array_month[6] = "July";
	array_month[7] = "August";
	array_month[8] = "September";
	array_month[9] = "October";
	array_month[10] = "November";
	array_month[11] = "December";
 
	//On définit pour les liens précédent et suivant
	before_month = month - 1;
	before_year = year;
	if ( before_month < 1 )
	{
		before_month = 12; 
		before_year = before_year - 1;
	}
 
	after_month = month + 1;
	after_year = year;	
	if ( after_month > 12 )
	{
		after_month = 1; 
		after_year = after_year + 1;
	}
 
 
	cache += '<table border="0" cellspacing="0" cellpadding="0" class="calendar">';
	cache += '  <tr>';
	cache += '    <td><a href="javascript:draw_calendar('+before_month+','+before_year+')">&lt;</a></td>';
	cache += '    <td colspan="5">'+array_month[date.getMonth()]+' '+year+'</td>'
	cache += '    <td><a href="javascript:draw_calendar('+after_month+','+after_year+')">&gt;</a></td>'
	cache += '  </tr>';
	cache += '  <tr>';
	cache += '    <td>D</td>';
	cache += '    <td>L</td>';
	cache += '    <td>M</td>';
	cache += '    <td>M</td>';
	cache += '    <td>J</td>';
	cache += '    <td>V</td>';
	cache += '    <td>S</td>';
	cache += '  </tr>';
 
	cache += '  <tr>';
	var i = 0;
	var day = 1;
 
	//Première ligne	
	for ( i = 0 ; i < first_day ; i++ )
	{
		cache += '    <td>&nbsp;</td>';
	}	
	for ( i = first_day ; i <= 6 ; i++ )
	{
		cache += new_day( day, month, year );
		day++;
	}
	cache += '  </tr>';
 
	//La suite des lignes
	while ( day <= days )
	{
		cache += '  <tr>';
		for ( i = 0 ; i <= 6 ; i++ )
		{
			if ( day <= days )
			{
				cache += new_day( day, month, year );
			}
			else 
			{
				cache += '    <td>&nbsp;</td>';
			}
			day++;
		}
		cache += '  </tr>';
	}
 
	cache += '</table>';
 
	ob_flush();
}
 
function show_calendar( el )
{
	element = el;
 
	var curent_date = new Date();
	curent_month = curent_date.getMonth() + 1;
	curent_year = curent_date.getFullYear();
 
	draw_calendar( curent_month, curent_year );
 
	left = GET_left(el);
	top = GET_top(el) + el.offsetHeight;
	document.getElementById(calendar).style.left = left + 'px';
	document.getElementById(calendar).style.top = top + 'px';
 
	document.getElementById(calendar).scrollIntoView();
}

la feuille de style et l'appel dans le <head>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css">
.calendar{
	background-color: #FFFFFF;
	border: 1px solid #000000;
}
.calendar td{
	font-family: "Trebuchet MS";
	font-size: 12px;
	width: 20px;
	text-align: center;
}
.day{
	cursor: pointer;
}
</style>
<script language="JavaScript" src="inc/calendar.js"></script>

et le champs :

Code :

1
2
3
  Date : 
  <input onClick="javascript:show_calendar(this);" name="date_debut" readonly="readonly" style="cursor: text">
<div id="calendrier" style="position: absolute; z-index: 32767;"></div>

Testé sous FF3 sous IE fonctionne pas

Qu'en pensez vous ?

[le_chomeur]

Effectivement beaucoup plus simple ;-)

[Bovino]

Bon pour ma part, j'en ai profité pour faire une petite mise à jour.
J'ai rajouté la possibilité de choisir un mois complet.
Pour cela, il faut insérer deux input (un pour la date de début, un pour la date de fin).
Il faut donner à chacun d'eux un id qui fini par 'Debut' et 'Fin' (dans l'exemple proposé, ce sera dateDebut et dateFin.
Si vous cliquez sur le nom du mois, les deux champs se remplissent avec le premier et le dernier jour du mois.
Exemple en ligne : sur cette page.


EDIT :
Pour une raison que seule la psychiatrie pourrait expliquer, je n'avais pas pensé à faire la même chose pour les années, c'est rectifié

[le_chomeur]

j'ai bien vu la démo mais pas compris l'utilisation finale ^^

[Bovino]

Ben en fait, je m'en étais servi pour permettre de filtrer des commandes sur une période donnée par exemple...

[kimjoa]

très jolie résultat , bravo le chômeur !!
juste un reproche, rien de méchant , pourquoi mettre dans ton prototype des fonction comme $, ou getPosition . Le mieux serait de le mettre dans un objet a part, comme ça pour tes futur projet tu les as direct sous la main...
Sinon tu a 4 fonction qui font presque la même chose, les SlideTo... , pourrait pas en faire qu'une seule? j'ai pas regardé en détail , mais bravo !!a++

[le_chomeur]

Salut Kimoa , merci pour le compliment, pour les méthodes $ sur le prototype de mon objet , c'est justement un choix pour éviter d'interférer avec d'autre librairie et rendre le script totalement non intrusif

Pour les méthodes de slide chaud il y a effectivement moyen d'optimiser ^^

[ra_hasina]

Bonjour,

Je recherche une source javascript pour uin calendrier qui affiche 2 mois successives. Si vous pouvez m'aider, j'en suis très ravi.

Merci.

[le_chomeur]

2 mois visible à l'écran ?
l'utilité ??

[nicoaix]

Bonjour,
Voici 2 améliorations qui serait à mon avis très utiles:
1) Gestion des heures pour chaque date. Cela permettra de préciser une date et une heure particulière.
2) Gestion du drag and drop sur le calendrier.

[Federico_muy_bien]

Salut !
Tout d'abord bravo à vous deux pour ce travail magnifique !!
J'ai juste un probléme et je me perds dans toutes les lignes de code.
Je voudrais que le calendrier soit affiché au chargement de la page car je le lance dans une pop-up.
Que dois je changer ?
Merci d'avance !


edit : Je suis confus je viens de trouver. C'etait pourtant simple !! Je cherchais trop compliqué. Je mets la reponse pour ceux qui chercheraient :

<body onload="new calendar(input2)">

où input2 est le nom de l'input où va apparaitre le calendrier

Merci ! pour ce calendrier !!
Et une derniere question si jamais quelqu'un passe par ici ...
comment faire pour que dans la version de Bovino les mois et jours ne s'affichent pas 1,2 ou 3 mais 01, 02 ou 03 ?
Merci.

[Bovino]

Il suffit de remplacer cette fonction modifiée :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
	calendar.prototype.fillField = function(){
		this.dayCurrent = this.dayCurrent<10?'0'+this.dayCurrent:this.dayCurrent;
		this.monthCurrent++;
		this.monthCurrent = this.monthCurrent<10?'0'+this.monthCurrent:this.monthCurrent;
		this.element.value = this.dayCurrent+"/"+ ((this.monthCurrent == 13) ? '01':this.monthCurrent)+"/"+this.yearCurrent;
		//On détruit le calendrier;
		while (this.calendar.childNodes.length>0) {
			this.calendar.removeChild(this.calendar.firstChild);
		}
		document.body.removeChild(this.calendar);
		this.element.calendarActive = false;
		calendarDestruct = false;
	}

[Federico_muy_bien]

Merci !! et il est vraiment magnifique le calendrier !!

[le_chomeur]

Merci ^^
et encore merci a bovino pour les améliorations

ps : il y aura pt une v3 beaucoup plus souple....

[Immobilis]

Salut,

Oui, il est très beau ce calendrier. Un détail important, on dirait qu'il ne tient pas compte de la culture du navigateur. J'ai placé la culture en-US en premier dans ma liste de langue et les dates restent au format fr-FR. J'ai loupé un truc?

Un plus serait d'avoir un liste déroulante des mois, ou les initiales en en-tête. Ainisi, cela ferait mois de clic pour avancer de 6 mois.

Ce serait aussi pratique de pouvoir sélectionner les jours des mois avant et après quand ils apparaissent. En gardant une teinte différente entre le mois en cours et les autres (comme c'est le cas maintenant) ce serait tout à fait lisible.

Autre détail, ne faudrait-il pas qu'il tienne compte des bords de la fenetre? Si la textbox est un peu trop près du bord droit le calendrier disparait.

Beau travail en tous les cas.

A+

[le_chomeur]

Effectivement , merci pour ces remarque très pertinente

- Non effectivement le calendrier ne tiens pas compte de la culture du navigateur

par choix j'ai indiqué comment changer la langue ( via le script et les tableaux de nom.

Pour le reste , j'ai fais le choix dès le début de réaliser un calendrier "kikoo lool" ;-) c'est a dire un design sympa , des effets jolie , un truc tape a l'oeil quoi ^^

Effectivement sur le long terme on me remonte quelques soucis d'utilisation ( le fait de devoir clické 6 fois pour les mois , et pire pour les années...

D'ou une prochaine v3 qui sera surement plus légère ( si si ) avec les améliorations souhaitées.

Merci a tous pour vos encouragements et commentaires et un merci tout particulier a bovino pour les améliorations qu'il a apporté au calendrier.

Si quelqu'un avec des talents de designer passait par la qu'il me contacte pour réaliser la v3

[Immobilis]

Un autre détail, il se charge sur l'action de l'utlisateur. Du coup il met un peut longtemps à se charger la première fois (j'ai essayé par hasard sur une connexion un peu moins rapide). Il faudrait le pré-charger en accrochant l'evenement onload de la page.

A+

[terjos]

Salut !
bravo SUPER ce calendrier !!
Je connais rien en javascript mais je l’ai testé et j’ai voulu changer le format des dates (2/5/2009 >> 02/05/09) .En cherchant un peux j’ai changer les "getFullYear" en" getYear" mais sans résultat, pouvez-vous m’aider merci.
PS : pour ce qu’il le souhait un nouveau skins ci joint.

[le_chomeur]

Immobilis : je prend bien note :-)

terjos : bizare j'étais certain que ce soucis avait été résolut, il faut modifier le code pour vérifier si le jours ou le mois est inférieur a 10 et ajouter un 0 devant ...

pas grand chose mais il faut mettre les mains dans le cambouis ...

j'attaque la nouvelle version ce soir

Toujours pas de contributeur pour le design ???

CHANGELOG :

- Code complètement revue
- Ajout des heures ;-)
- Fonction user friendly => Minimum de click pour choisir une date.
- Customisation purement en css , sans se soucier du code ...
- format de date ( en fr autre ... )

et c'est déja pas mal :-/ , gnarf j'ai du boulot