<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> function get_mois(annee, mois, bloquer_a_date_actuelle, emplacement, bouton)
{
var today = new Date();
var date_a_traiter = today;
if (annee != null && mois != null)
{
if (! bloquer_a_date_actuelle)
{
if (annee != today.getFullYear() || mois != today.getMonth())
{
date_a_traiter = new Date(annee, mois, 1);
}
}
else
{
if (annee < today.getFullYear() || mois < today.getMonth())
{
date_a_traiter = new Date(annee, mois, 1);
}
}
}
var current_year = date_a_traiter.getFullYear();
var current_month = date_a_traiter.getMonth();
var debut_mois = new Date(current_year, current_month, 1);
var premier_jour_mois = debut_mois.getDay();
var fin_mois = new Date(current_year, current_month + 1, 0);
var derniere_date_mois = fin_mois.getDate();
var mon_code = "";
mon_code = "\<table\>" +
"\<tr class=\"deplace\"\>" +
"\<td\>\<a id=\"annee_precedente\" href=\"\" class=\"survol\" title=\"Année précédente\"\>\<\<\</a\>\</td\>" +
"\<td\>\<a id=\"mois_precedent\" href=\"\" class=\"survol\" title=\"Mois précédent\"\>\<\</a\>\</td\>" +
"\<td\>\<span id=\"mois_annee\"\>\</span\>\</td\>" +
"\<td\>\<a id=\"mois_suivant\" href=\"\" class=\"survol\" title=\"Mois suivant\"\>\>\</a\>\</td\>" +
"\<td\>\<a id=\"annee_suivante\" href=\"\" class=\"survol\" title=\"Année suivante\"\>\>\>\</a\>\</td\>" +
"\<td\>\<a id=\"fermer_calendrier\" href=\"javascript: cacher_calendrier('" + emplacement + "', '" + bouton + "');\" class=\"survol\" title=\"Fermer le calendrier\"\>x</a\>\</td\>" +
"\</tr\>" +
"\</table\>";
mon_code = mon_code + "\<table\>\<tr class=\"titre\"\>\<td\>Lu\</td\>\<td\>Ma\</td\>\<td\>Me\</td\>\<td\>Je\</td\>\<td\>Ve\</td\>\<td\>Sa\</td\>\<td\>Di\</td\>\</tr\>";
for (var i = 1 ; i <= derniere_date_mois ; i++)
{
var ma_date = new Date(current_year, current_month, i);
var style_today = " onclick=\"javascript: alert('" + i + "/" + current_month + "/" + current_year + "');\"";
if (i == date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
{
if (date_a_traiter == today)
{
style_today = style_today + " class=\"today_we\"";
}
else
{
style_today = style_today + " class=\"not_today_we\"";
}
}
else if (i == date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
{
if (date_a_traiter == today)
{
style_today = style_today + " class=\"today_not_we\"";
}
else
{
style_today = style_today + " class=\"not_today_not_we\"";
}
}
else if (i != date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
{
style_today = style_today + " class=\"not_today_not_we\"";
}
else if (i != date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
{
style_today = style_today + " class=\"not_today_we\"";
}
if (i == 1)
{
switch (ma_date.getDay())
{
case 1:
mon_code = mon_code + "\
<tr\
>\
<td" + style_today + "\>1\
</td\>";
break;
case 2:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>";
break;
case 3:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>";
break;
case 4:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>";
break;
case 5:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>";
break;
case 6:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>";
break;
case 0:
mon_code = mon_code + "\
<tr\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td" + style_today + "\>1\
</td\>\
</tr\>";
break;
}
}
else if (i == derniere_date_mois)
{
switch (ma_date.getDay())
{
case 1:
mon_code = mon_code + "\
<tr\>\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 2:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 3:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 4:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 5:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 6:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
<td\> \
</td\>\
</tr\>";
break;
case 0:
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
</tr\>\
</tr\>";
break;
}
}
else
{
if (ma_date.getDay() == 0)
{
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>\
</tr\>";
}
else if (ma_date.getDay() == 1)
{
mon_code = mon_code + "\
<tr\>\
<td" + style_today + "\>" + i + "\
</td\>";
}
else
{
mon_code = mon_code + "\
<td" + style_today + "\>" + i + "\
</td\>";
}
}
}
mon_code = mon_code + "\</table\>";
document.getElementById(emplacement).innerHTML = mon_code;
document.getElementById("mois_annee").innerHTML = get_select_month(current_month, current_year, bloquer_a_date_actuelle, emplacement) + " " + get_select_year(current_year, current_month, bloquer_a_date_actuelle, emplacement);
var annee_precedente = new Date(current_year - 1, current_month, 1);
var annee_suivante = new Date(current_year + 1, current_month, 1);
var mois_precedent = new Date(current_year, current_month - 1, 1);
var mois_suivant = new Date(current_year, current_month + 1, 1);
document.getElementById("annee_precedente").setAttribute("href", "javascript: get_mois(" + annee_precedente.getFullYear() + ", " + annee_precedente.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
document.getElementById("mois_precedent").setAttribute("href", "javascript: get_mois(" + mois_precedent.getFullYear() + ", " + mois_precedent.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
if (bloquer_a_date_actuelle)
{
if (current_year >= today.getFullYear() && current_month >= today.getMonth())
{
document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
document.getElementById("mois_suivant").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
}
else if (current_year >= today.getFullYear() && current_month < today.getMonth())
{
document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
}
else
{
document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
}
}
else
{
document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
}
}
function get_nom_mois(numero)
{
var nom_mois = "";
switch (numero)
{
case 0:
nom_mois = "Janvier";
break;
case 1:
nom_mois = "Février";
break;
case 2:
nom_mois = "Mars";
break;
case 3:
nom_mois = "Avril";
break;
case 4:
nom_mois = "Mai";
break;
case 5:
nom_mois = "Juin";
break;
case 6:
nom_mois = "Juillet";
break;
case 7:
nom_mois = "Août";
break;
case 8:
nom_mois = "Septembre";
break;
case 9:
nom_mois = "Octobre";
break;
case 10:
nom_mois = "Novembre";
break;
case 11:
nom_mois = "Décembre";
break;
}
return nom_mois;
}
function get_select_month(mois, annee, bloquer_a_date_actuelle, emplacement)
{
var today = new Date();
var select = "\
<select name=\"mois\" onchange=\"javascript: get_mois(" + annee + ", this.value, " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
if (annee == today.getFullYear() && bloquer_a_date_actuelle == true)
{
for (var i = 0 ; i <= today.getMonth() ; i++)
{
if (i != mois)
{
select = select + "\<option value=\"" + i + "\"\>" + get_nom_mois(i) + "\</option\>";
}
else
{
select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\</option\>";
}
}
}
else
{
for (var i = 0 ; i <= 11 ; i++)
{
if (i != mois)
{
select = select + "\
<option value=\
"" + i +
"\"\
>" + get_nom_mois(i) + "\
</option\>";
}
else
{
select = select + "\
<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\
</option\>";
}
}
}
select = select + "\</select\>";
return select;
}
function get_select_year(annee, mois, bloquer_a_date_actuelle, emplacement)
{
var today = new Date();
var select = "\
<select name=\"annee\" onchange=\"javascript: get_mois(this.value, " + mois + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
if (bloquer_a_date_actuelle && today.getFullYear() - annee <= 10)
{
for (var i = today.getFullYear() ; i > today.getFullYear() - 20 ; i-- )
{
if (i == annee)
{
select = select + "\
<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\
</option\>";
}
else
{
select = select + "\
<option value=\"" + i + "\"\>" + i + "\
</option\>";
}
}
}
else
{
for (var i = annee + 9 ; i > annee - 10 ; i-- )
{
if (i == annee)
{
select = select + "\
<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\
</option\>";
}
else
{
select = select + "\
<option value=\"" + i + "\"\>" + i + "\
</option\>";
}
}
}
select = select + "\</select\>";
return select;
}
function afficher_calendrier(calendrier, bouton_calendrier)
{
document.getElementById(calendrier).setAttribute("style", "display: block;");
document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: cacher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
}
function cacher_calendrier(calendrier, bouton_calendrier)
{
document.getElementById(calendrier).setAttribute("style", "display: none;");
document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: afficher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
}
</script>
body
{
background-color: black;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
}
div.calendrier
{
border: 1px solid grey;
width: 250px;
display: none;
}
td.not_today_not_we, td.today_not_we, td.not_today_we, td.today_we
{
text-align: right;
border: 1px solid transparent;
}
td.not_today_not_we:hover, td.today_not_we:hover, td.not_today_we:hover, td.today_we:hover
{
cursor: pointer;
border: 1px solid white;
}
td.not_today_not_we, td.today_not_we
{
background-color: black;
}
td.not_today_we, td.today_we
{
color: grey;
}
td.today_we, td.today_not_we
{
color: red;
}
tr.titre
{
text-align: center;
color: white;
background-color: grey;
}
table
{
width: 100%;
}
tr.deplace
{
text-align: center;
}
tr.deplace span
{
border: 1px solid transparent;
padding-left: 2px;
padding-right: 2px;
font-size: 10px;
margin: 0px;
color: white;
}
tr.deplace a.survol
{
border: 1px solid transparent;
padding-left: 2px;
padding-right: 2px;
font-size: 10px;
margin: 0px;
color: white;
text-decoration: none;
}
a#fermer_calendrier
{
color: red;
}
tr.deplace a.survol:hover
{
cursor: pointer;
border: 1px solid white;
}
select, option
{
background-color: black;
color: white;
font-family: sans-serif;
font-weight: bold;
font-variant: small-caps;
font-size: 10px;
margin: 0px;
border: 1px solid transparent;
}
option:hover
{
background-color: black;
border: 1px solid white;
}
</style>
</head>
<body onload="javascript: get_mois(null, null, true, 'calendrier', 'bouton_calendrier');"> <input type="button" name="afficher_calendrier" value="Calendrier" onclick="javascript: afficher_calendrier('calendrier', 'bouton_calendrier');" id="bouton_calendrier"/> <div class="calendrier" id="calendrier"></div> </body>
</html>
