Bonjour,

Je voudrais mettre en place un calendrier (enfin 2 )
Comme sur cette page :
Sur la droite, Aller le Retour le

Il s'agit de pouvoir réserver sur une période à choisie.
Donc une date de début de réservation avec heure et une date de fin de réservation avec heure.
Je voudrais que le calendrier commence à la date du jour (le mois mais que les premiers jours ne soient pas cliquables) et se termine un an plus tard.

Il faut que je puisse récupérer les données pour calculer le nombre d'heures de réservation et en déterminer le tarif.
De plus, il faut que les données s'enregistrent dans la base de données.

Merci de m'aider, je pense que le code doit être en javascript pour le calcul qui se fait côté client.

Je te conseille de faire ce genre de calcul du coté serveur pour éviter des problèmes de sécurité

En fait, je pense qu'il faut le faire du côté client pour que celui-ci puisse modifier les dates et obtenir instantanément le tarif

Pour la création du calendrier quelqu'un peut-il m'aider ?

Personne ne fera le calendrier à ta place en tous cas. Et pour t'aider, il faudrait déjà que tu aies commencé quelque chose...

Fais quelques recherches. Des calendriers en JS y en a des tonnes de disponible sur le net

Il y notamment celui-la pour les amateurs de jQuery

Non, je ne veux pas utiliser jQuery.

J'ai trouvé un code impeccable, je vous donne la première partie :

<script type="text/javascript">
// Régler la date initiale.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Obtenez élément par ID.
function ds_getel(id) {
	return document.getElementById(id);
}

// Obtenez le gauche et le haut de l'élément.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Sortie de l'élément
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Le contrôle de sortie
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Élément de texte...

var ds_monthnames = [
'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
];

var ds_daynames = [
'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam', 'Dim'
];

// Modèle de calendrier
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Définir la largeur en CSS, XHTML 1.0 Strict n'a pas la propriété de largeur pour elle.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Définir la largeur de la ligne par jour.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// Celui-ci attire l'agenda ...
function ds_draw_calendar(m, y) {
	// Commencez par nettoyer le tampon de sortie.
	ds_ob_clean();
	// On y va, faire l'en-tête
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Faire un objet date.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 0;
	// Début de la première semaine
	ds_echo (ds_template_new_week());
	// Si le lundi n'est pas le premier jour du mois, faire une cellule vide ...
	if (first_day != 1) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 1; i < days; i ++) {
		// Aujourd'hui, c'est lundi, faire une nouvelle semaine.
		// Si ce lundi est le premier jour du mois,
		// nous avons fait une nouvelle ligne.
		if (j == 0 && !first_loop) {
			// Nouvelle semaine!
			ds_echo (ds_template_new_week());
		}
		// Faire une rangée de ce jour-là!
		ds_echo (ds_template_day(i, m, y));
		// Ce n'est pas la première boucle plus ...
		first_loop = 0;
		// Qu'est-ce que le lendemain?
		j ++;
		j %= 7;
	}
	// Faire le pied de page
	ds_echo (ds_template_main_below());
	// Et nous allons afficher ..
	ds_ob_flush();
	// Faire défiler la vue.
	ds_ce.scrollIntoView();
}</script>

Il faut que je le modifie pour obtenir ce que je veux mais c'est pas gagné

J'ai tenté de changer l'ordre des jours mais ça ne fonctionne pas
J'ai changé l'ordre des jours ligne 58 et j'ai modifié plusieurs autres lignes sans y arriver (126,130,139)
Le numéro ne correspond pas au bon jour
Je voudrais aussi changer la couleur du jour pour le mettre en évidence.
Je pense que cette première partie du code suffit

Si tu dois beaucoup modifié ce code c'est qu'il ne doit pas être si impeccable que ça. Cherches-en plus approprié

Il est bien seulement, je dois mettre les jours en français en commençant par le lundi et non pas le dimanche, je veux colorer le jour.

Je veux aussi que les jours précédents le jour actuel ne soient pas cliquables.

Ce calendrier permet d'aller plusieurs années en arrière et en avant, je voudrais qu'il ne puisse aller qu'une année en avant.
On est le 13/03/2011, il faut qu'il aille au maximum jusqu'au 13/03/2012.

Voir cet échange au cours duquel j'ai déjà proposé les modifications à opérer pour les semaines ...

Quant aux liens sur les jours, il doit être possible de construire une fonction analogue à ds_template_day(d, m, y) en supprimant les liens. Il ne restera plus alors dans ds_draw_calendar(m, y) qu'à appeler celle-ci (ligne 139) au lieu de la précédente avant la date d'ouverture de la page.

Enfin, les couleurs gagneraient effectivement à être modifiées pour éviter la quincaillerie proposée (voir les color, background-color et autres styles commentés dans la page proposée).

Merci pour la modification des jours de la semaine
Pour les liens, je vais tenter de m'en sortir avec tes infos
Pour les couleurs, en fait je veux mettre le numéro du jour d'aujourd'hui en évidence (par exemple en rouge)

Bon alors j'ai essayé de faire quelque chose et du coup mon calendrier ne s'affiche plus

La fonction :

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Les jours cliquables.
}

function ds_template_day_not(d, m, y) {
	return '<td class="ds_cell">' + d + '</td>';
	// Les jours non cliquables.
}

Dans le ds_draw_calendar (m, y) :

if (j <= today_day - 1) {
		// On affiche les jours non cliquables jusqu'à hier compris
		ds_echo (ds_template_day_not(i, m, y));
		first_loop = 0;
		// Qu'est-ce que le lendemain?
		j ++;
		j %= 7;
		}
		else if (j >= today_day) {
		// On affiche les jours cliquables à partir d'aujourd'hui
		ds_echo (ds_template_day(i, m, y));
		first_loop = 0;
		// Qu'est-ce que le lendemain?
		j ++;
		j %= 7;
	}

La variable du jour d'aujourd'hui que j'ai mis au début du code :

var today_day = ds_i_date.getDay();

J'ai aussi essayé de colorer le jour :

// Colorer le jour
	var today_day = ds_i_date.getDay();
	if (j == today_day) {
	 + 'style="color:#FF0000;"';
    }

Pouvez-vous m'aider

Le test doit être opéré sur le quantième du mois et non sur le jour de la semaine. D'où la nécessité d'utiliser getDate() au lieu de getDay() pour la définition (reconnaissons que cela prête à confusion) et de comparer à i et non à j pour le dessin du calendrier :

// Quantième du mois
var today_day = ds_i_date.getDate();

// Boucle sur les jours dans ds_draw_calendar(m, y)
	var j = first_day;
	// Si l'on commence à 1 il faut aller à l'égalité pour days !!!
	for (i = 0; i <= days; i ++) {
		// Nouvelle semaine si premier jour de la semaine ou première ligne
		if (j == 0 && !first_loop) {
			ds_echo (ds_template_new_week());
		}
// Modification
		// Jour non cliquable avant aujourd'hui cliquable après
		// La fonction ds_template_day_not n'a besoin que d'un argument !

		if (i<today_day) ds_echo (ds_template_day_not(i));
		else ds_echo (ds_template_day(i, m, y));


		// Ce n'est plus la première ligne.
		first_loop = 0;
		// Prochain jour de la semaine  
		j ++;
		j %= 7;
	}

// modifications de style à opérer avec des classes à définir ou redefinr

// Les jours non cliquables avec un seul argument et un style différent ds_cell_no.
function ds_template_day_not(d) {
	return '<td class="ds_cell_no">' + d + '</td>';
}
// Les jours cliquables avec une classe différente pour aujourd'hui ds_cell_td
function ds_template_day(d, m, y) {var c='class="ds_cell"';
	if (d==today_day) c='class="ds_cell_td"'
return '<td  '+c+' onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	
}

Mais encore une fois, ce code est inutilement lourd et gagnerait à être allégé.

Merci, voilà le code avec quelques modifs :

var j = first_day;
	for (i = 0; i < days; i ++) {
		// Nouvelle semaine si premier jour de la semaine ou première ligne
		if (j == 0 && !first_loop) {
			// Nouvelle semaine!
			ds_echo (ds_template_new_week());
		}
		// Jour non cliquable avant aujourd'hui cliquable après
		// La fonction ds_template_day_not n'a besoin que d'un argument !
		if (i + 1<today_day) ds_echo (ds_template_day_not(i + 1));
		else ds_echo (ds_template_day(i + 1, m, y));
		// Ce n'est plus la première ligne.
		first_loop = 0;
		// Prochain jour de la semaine  
		j ++;
		j %= 7;
	}

Par contre ça marche bien pour le mois de mars mais pas pour les précédents ni pour les suivants
En fait tous les mois les seuls jours cliquables sont ceux après le 14 et avant le 14 ils ne sont pas cliquables.
Moi je veux que les jours et les mois et les années avant le 14/03/2011 (date du jour) ne soient pas cliquables et les jours, mois et années suivant le soient

Effectivement, il faut remplacer today_day par une limite today_lim (une variable globale définie initialement hors des fonctions par un var today_lim;), dépendante du mois et de l'année (calcul à faire au début de ds_draw_calendar(m, y)) à partir de laquelle les jours deviennent cliquables.

Pour ne pas multiplier les tests cette limite (calculée à partir de m et y à comparer à ds_c_month et ds_c_year) serait égale à l'actuel to_day pour le mois en cours mais à 32 pour les mois et années précédents (aux jours jamais cliquables) ou -1 pour les suivants (aux jours toujours cliquables).

Cette limite (globale donc disponible dans toutes les fonctions appelées après son évaluation) pourrait également régir les styles.

J'ai tenté un bout de code :

// Limite aujourd'hui
var today_lim = today_day(m, y);
today_lim.ds_c_month;
today_lim.ds_c_year;

// Limite avant aujourd'hui
var today_lim = 32;
today_lim.ds_c_month - 1;
today_lim.ds_c_year;

// Limite après aujourd'hui
var today_lim = -1;
today_lim.ds_c_month + 1;
today_lim.ds_c_year;

Je ne l'ai pas testé car je ne sais pas vraiment comment l'intégrer à l'ancien code
Est-ce qu'il me suffit de remplacer today_day par today_lim dans le if ?

Il ne s'agit pas de créer un objet avec des propriétés, mais simplement une variable (deux en fait puisqu'il convient de retenir le quantième) :

// Au début du script avec des var devant toutes les variables globales
var ds_i_date = new Date();
var ds_c_month = ds_i_date.getMonth() + 1;
var ds_c_year = ds_i_date.getFullYear();
// Nouvelle ligne pour le quantième (du type des précédentes) et nouvelle variable
var ds_c_qtm = ds_i_date.getDate();
var today_lim;


// Au début de la fonction draw_calendar(m, y)
function ds_draw_calendar(m, y) {var i;// Variable locale (interne à cette fonction) ne risquant pas de perturber le fonctionnement du programme principal
   today_lim=32; // pour éviter trop de test
   if (y==ds_c_year && m==ds_c_month) today_lim=ds_c_qtm; 
   if ((ds_c_year==y && ds_c_month<m) || ds_c_year<y) today_lim=-1;
// Vérification pour la mise au point
   alert("année "+y+", mois "+m+" limite "+today_lim);

// la suite avec today_lim au lieu de today_day pour le test

C'est le même résultat

Je remets le code tel qu'il est maintenant au cas où j'ai fait une erreur :

// Au début du script avec des var devant toutes les variables globales
var ds_i_date = new Date();
var ds_c_month = ds_i_date.getMonth() + 1;
var ds_c_year = ds_i_date.getFullYear();
// Nouvelle ligne pour le quantième (du type des précédentes) et nouvelle variable
var ds_c_qtm = ds_i_date.getDate();
var today_lim;

// Obtenez élément par ID.
function ds_getel(id) {
	return document.getElementById(id);
}

// Obtenez le gauche et le haut de l'élément.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Sortie de l'élément
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Le contrôle de sortie
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Élément de texte...

var ds_monthnames = [
'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
];

var ds_daynames = [
'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam'
];

// Modèle de calendrier
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Définir la largeur en CSS, XHTML 1.0 Strict n'a pas la propriété de largeur pour elle.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Les jours cliquables.
}

function ds_template_day_not(d, m, y) {
	return '<td class="ds_cell">' + d + '</td>';
	// Les jours non cliquables.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// Au début de la fonction draw_calendar(m, y)
function ds_draw_calendar(m, y) {var i;// Variable locale (interne à cette fonction) ne risquant pas de perturber le fonctionnement du programme principal
   today_lim=32; // pour éviter trop de test
   if (y==ds_c_year && m==ds_c_month) today_lim=ds_c_qtm; 
   if ((ds_c_year==y && ds_c_month<m) || ds_c_year<y) today_lim=-1;
// Vérification pour la mise au point
   alert("année "+y+", mois "+m+" limite "+today_lim);

	// Commencez par nettoyer le tampon de sortie.
	ds_ob_clean();
	// On y va, faire l'en-tête
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y)); //Le mois et l'année.
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[(i+1)%7])); //Le nom des jours.
	}
	// Faire un objet date.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = (ds_dc_date.getDay()+6)%7;
	var first_loop = 0;
	// Début de la première semaine
	ds_echo (ds_template_new_week());
	// Si le lundi n'est pas le premier jour du mois, faire une cellule vide ...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Nouvelle semaine si premier jour de la semaine ou première ligne
		if (j == 0 && !first_loop) {
			// Nouvelle semaine!
			ds_echo (ds_template_new_week());
		}
		// Jour non cliquable avant aujourd'hui cliquable après
		// La fonction ds_template_day_not n'a besoin que d'un argument !
		if (i + 1<today_lim) ds_echo (ds_template_day_not(i + 1));
		else ds_echo (ds_template_day(i + 1, m, y));
		// Ce n'est plus la première ligne.
		first_loop = 0;
		// Prochain jour de la semaine  
		j ++;
		j %= 7;
	}

	// Faire le pied de page
	ds_echo (ds_template_main_below());
	// Et nous allons afficher ..
	ds_ob_flush();
	// Faire défiler la vue.
	ds_ce.scrollIntoView();
}

Par contre la limite inscrite dans l'alert fonctionne bien.