Tags: calendrier

Sort by: Date / Title /

  1. 2 years ago by benoitbalon
    La fonction Javascript qui fait tout est get_mois(...) . Elle prend 5 paramètres : - l'année par défaut à l'ouverture - le mois par défaut à l'ouverture - si le calendrier doit être bloqué au dernier mois et à la dernière année écoulés, c'est à dire jusqu'à aujourd'hui mais pas au-delà (bloqué = true) - l'attribut id correspondant à la balise (idéalement un div) où le calendrier doit être construit - l'id du bouton qui permet d'afficher et cacher le calendrier
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3.  
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    5.         <head>
    6.                 <script language="javascript">
    7.                         function get_mois(annee, mois, bloquer_a_date_actuelle, emplacement, bouton)
    8.                         {
    9.                                 var today = new Date();
    10.                                 var date_a_traiter = today;
    11.                                
    12.                                 if (annee != null && mois != null)
    13.                                 {
    14.                                         if (! bloquer_a_date_actuelle)
    15.                                         {
    16.                                                 if (annee != today.getFullYear() || mois != today.getMonth())
    17.                                                 {
    18.                                                         date_a_traiter = new Date(annee, mois, 1);
    19.                                                 }
    20.                                         }
    21.                                         else
    22.                                         {
    23.                                                 if (annee < today.getFullYear() || mois < today.getMonth())
    24.                                                 {
    25.                                                         date_a_traiter = new Date(annee, mois, 1);
    26.                                                 }
    27.                                         }
    28.                                 }
    29.                                
    30.                                 var current_year = date_a_traiter.getFullYear();
    31.                                 var current_month = date_a_traiter.getMonth();
    32.                                
    33.                                 var debut_mois = new Date(current_year, current_month, 1);
    34.                                 var premier_jour_mois = debut_mois.getDay();
    35.                                
    36.                                 var fin_mois = new Date(current_year, current_month + 1, 0);
    37.                                 var derniere_date_mois = fin_mois.getDate();
    38.                                
    39.                                 var mon_code = "";
    40.                                 mon_code = "\<table\>" +
    41.                                                                 "\<tr class=\"deplace\"\>" +
    42.                                                                         "\<td\>\<a id=\"annee_precedente\" href=\"\" class=\"survol\" title=\"Ann&eacute;e pr&eacute;c&eacute;dente\"\>\<\<\</a\>\</td\>" +
    43.                                                                         "\<td\>\<a id=\"mois_precedent\" href=\"\" class=\"survol\" title=\"Mois pr&eacute;c&eacute;dent\"\>\<\</a\>\</td\>" +
    44.                                                                         "\<td\>\<span id=\"mois_annee\"\>\</span\>\</td\>" +
    45.                                                                         "\<td\>\<a id=\"mois_suivant\" href=\"\" class=\"survol\" title=\"Mois suivant\"\>\>\</a\>\</td\>" +
    46.                                                                         "\<td\>\<a id=\"annee_suivante\" href=\"\" class=\"survol\" title=\"Ann&eacute;e suivante\"\>\>\>\</a\>\</td\>" +
    47.                                                                         "\<td\>\<a id=\"fermer_calendrier\" href=\"javascript: cacher_calendrier('" + emplacement + "', '" + bouton + "');\" class=\"survol\" title=\"Fermer le calendrier\"\>x</a\>\</td\>" +
    48.                                                                 "\</tr\>" +
    49.                                                         "\</table\>";
    50.                                 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\>";
    51.                                
    52.                                 for (var i = 1 ; i <= derniere_date_mois ; i++)
    53.                                 {
    54.                                         var ma_date = new Date(current_year, current_month, i);
    55.                                        
    56.                                         var style_today = " onclick=\"javascript: alert('" + i + "/" + current_month + "/" + current_year + "');\"";
    57.                                         if (i == date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
    58.                                         {
    59.                                                 if (date_a_traiter == today)
    60.                                                 {
    61.                                                         style_today = style_today + " class=\"today_we\"";
    62.                                                 }
    63.                                                 else
    64.                                                 {
    65.                                                         style_today = style_today + " class=\"not_today_we\"";
    66.                                                 }
    67.                                         }
    68.                                         else if (i == date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
    69.                                         {
    70.                                                 if (date_a_traiter == today)
    71.                                                 {
    72.                                                         style_today = style_today + " class=\"today_not_we\"";
    73.                                                 }
    74.                                                 else
    75.                                                 {
    76.                                                         style_today = style_today + " class=\"not_today_not_we\"";
    77.                                                 }
    78.                                         }
    79.                                         else if (i != date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
    80.                                         {
    81.                                                 style_today = style_today + " class=\"not_today_not_we\"";
    82.                                         }
    83.                                         else if (i != date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
    84.                                         {
    85.                                                 style_today = style_today + " class=\"not_today_we\"";
    86.                                         }
    87.                                        
    88.                                         if (i == 1)
    89.                                         {
    90.                                                 switch (ma_date.getDay())
    91.                                                 {
    92.                                                         case 1:
    93.                                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>1\</td\>";
    94.                                                                         break;
    95.                                                         case 2:
    96.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    97.                                                                         break;
    98.                                                         case 3:
    99.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    100.                                                                         break;
    101.                                                         case 4:
    102.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    103.                                                                         break;
    104.                                                         case 5:
    105.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    106.                                                                         break;
    107.                                                         case 6:
    108.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    109.                                                                         break;
    110.                                                         case 0:
    111.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>\</tr\>";
    112.                                                                         break;
    113.                                                 }
    114.                                         }
    115.                                         else if (i == derniere_date_mois)
    116.                                         {
    117.                                                 switch (ma_date.getDay())
    118.                                                 {
    119.                                                         case 1:
    120.                                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    121.                                                                         break;
    122.                                                         case 2:
    123.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    124.                                                                         break;
    125.                                                         case 3:
    126.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    127.                                                                         break;
    128.                                                         case 4:
    129.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    130.                                                                         break;
    131.                                                         case 5:
    132.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    133.                                                                         break;
    134.                                                         case 6:
    135.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\</tr\>";
    136.                                                                         break;
    137.                                                         case 0:
    138.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\</tr\>\</tr\>";
    139.                                                                         break;
    140.                                                 }
    141.                                         }
    142.                                         else
    143.                                         {
    144.                                                 if (ma_date.getDay() == 0)
    145.                                                 {
    146.                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\</tr\>";
    147.                                                 }
    148.                                                 else if (ma_date.getDay() == 1)
    149.                                                 {
    150.                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>" + i + "\</td\>";
    151.                                                 }
    152.                                                 else
    153.                                                 {
    154.                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>";
    155.                                                 }
    156.                                         }
    157.                                 }
    158.                                
    159.                                 mon_code = mon_code + "\</table\>";
    160.                                 document.getElementById(emplacement).innerHTML = mon_code;
    161.                                 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);
    162.                                
    163.                                 var annee_precedente = new Date(current_year - 1, current_month, 1);
    164.                                 var annee_suivante = new Date(current_year + 1, current_month, 1);
    165.                                 var mois_precedent = new Date(current_year, current_month - 1, 1);
    166.                                 var mois_suivant = new Date(current_year, current_month + 1, 1);
    167.                                 document.getElementById("annee_precedente").setAttribute("href", "javascript: get_mois(" + annee_precedente.getFullYear() + ", " + annee_precedente.getMonth()  + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    168.                                 document.getElementById("mois_precedent").setAttribute("href", "javascript: get_mois(" + mois_precedent.getFullYear() + ", " + mois_precedent.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    169.                                 if (bloquer_a_date_actuelle)
    170.                                 {
    171.                                         if (current_year >= today.getFullYear() && current_month >= today.getMonth())
    172.                                         {
    173.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    174.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    175.                                         }
    176.                                         else if (current_year >= today.getFullYear() && current_month < today.getMonth())
    177.                                         {
    178.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    179.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    180.                                         }
    181.                                         else
    182.                                         {
    183.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    184.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    185.                                         }
    186.                                 }
    187.                                 else
    188.                                 {
    189.                                         document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    190.                                         document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    191.                                 }
    192.                         }
    193.                        
    194.                         function get_nom_mois(numero)
    195.                         {
    196.                                 var nom_mois = "";
    197.                                
    198.                                 switch (numero)
    199.                                 {
    200.                                         case 0:
    201.                                                         nom_mois = "Janvier";
    202.                                                         break;
    203.                                         case 1:
    204.                                                         nom_mois = "F&eacute;vrier";
    205.                                                         break;
    206.                                         case 2:
    207.                                                         nom_mois = "Mars";
    208.                                                         break;
    209.                                         case 3:
    210.                                                         nom_mois = "Avril";
    211.                                                         break;
    212.                                         case 4:
    213.                                                         nom_mois = "Mai";
    214.                                                         break;
    215.                                         case 5:
    216.                                                         nom_mois = "Juin";
    217.                                                         break;
    218.                                         case 6:
    219.                                                         nom_mois = "Juillet";
    220.                                                         break;
    221.                                         case 7:
    222.                                                         nom_mois = "Ao&ucirc;t";
    223.                                                         break;
    224.                                         case 8:
    225.                                                         nom_mois = "Septembre";
    226.                                                         break;
    227.                                         case 9:
    228.                                                         nom_mois = "Octobre";
    229.                                                         break;
    230.                                         case 10:
    231.                                                         nom_mois = "Novembre";
    232.                                                         break;
    233.                                         case 11:
    234.                                                         nom_mois = "D&eacute;cembre";
    235.                                                         break;
    236.                                 }
    237.                                
    238.                                 return nom_mois;
    239.                         }
    240.                        
    241.                         function get_select_month(mois, annee, bloquer_a_date_actuelle, emplacement)
    242.                         {
    243.                                 var today = new Date();
    244.                                
    245.                                 var select = "\<select name=\"mois\" onchange=\"javascript: get_mois(" + annee + ", this.value, " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
    246.                                
    247.                                 if (annee == today.getFullYear() && bloquer_a_date_actuelle == true)
    248.                                 {
    249.                                         for (var i = 0 ; i <= today.getMonth() ; i++)
    250.                                         {
    251.                                                 if (i != mois)
    252.                                                 {
    253.                                                         select = select + "\<option value=\"" + i + "\"\>" + get_nom_mois(i) + "\</option\>";
    254.                                                 }
    255.                                                 else
    256.                                                 {
    257.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\</option\>";
    258.                                                 }
    259.                                         }
    260.                                 }
    261.                                 else
    262.                                 {
    263.                                         for (var i = 0 ; i <= 11 ; i++)
    264.                                         {
    265.                                                 if (i != mois)
    266.                                                 {
    267.                                                         select = select + "\<option value=\"" + i + "\"\>" + get_nom_mois(i) + "\</option\>";
    268.                                                 }
    269.                                                 else
    270.                                                 {
    271.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\</option\>";
    272.                                                 }
    273.                                         }
    274.                                 }
    275.                                
    276.                                 select = select + "\</select\>";
    277.                                
    278.                                 return select;
    279.                         }
    280.                        
    281.                         function get_select_year(annee, mois, bloquer_a_date_actuelle, emplacement)
    282.                         {
    283.                                 var today = new Date();
    284.                                
    285.                                 var select = "\<select name=\"annee\" onchange=\"javascript: get_mois(this.value, " + mois + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
    286.                                
    287.                                 if (bloquer_a_date_actuelle && today.getFullYear() - annee <= 10)
    288.                                 {
    289.                                         for (var i = today.getFullYear() ; i > today.getFullYear() - 20 ; i-- )
    290.                                         {
    291.                                                 if (i == annee)
    292.                                                 {
    293.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\</option\>";
    294.                                                 }
    295.                                                 else
    296.                                                 {
    297.                                                         select = select + "\<option value=\"" + i + "\"\>" + i + "\</option\>";
    298.                                                 }
    299.                                         }
    300.                                 }
    301.                                 else
    302.                                 {
    303.                                         for (var i = annee + 9 ; i > annee - 10 ; i-- )
    304.                                         {
    305.                                                 if (i == annee)
    306.                                                 {
    307.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\</option\>";
    308.                                                 }
    309.                                                 else
    310.                                                 {
    311.                                                         select = select + "\<option value=\"" + i + "\"\>" + i + "\</option\>";
    312.                                                 }
    313.                                         }
    314.                                 }
    315.                                
    316.                                 select = select + "\</select\>";
    317.                                
    318.                                 return select;
    319.                         }
    320.                        
    321.                         function afficher_calendrier(calendrier, bouton_calendrier)
    322.                         {
    323.                                 document.getElementById(calendrier).setAttribute("style", "display: block;");
    324.                                 document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: cacher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
    325.                         }
    326.                        
    327.                         function cacher_calendrier(calendrier, bouton_calendrier)
    328.                         {
    329.                                 document.getElementById(calendrier).setAttribute("style", "display: none;");
    330.                                 document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: afficher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
    331.                         }
    332.                 </script>
    333.                 <style type="text/css">
    334.                         body
    335.                         {
    336.                                 background-color: black;
    337.                                 color: white;
    338.                                 font-family: sans-serif;
    339.                                 font-weight: bold;
    340.                                 font-size: 12px;
    341.                         }
    342.                        
    343.                         div.calendrier
    344.                         {
    345.                                 border: 1px solid grey;
    346.                                 width: 250px;
    347.                                 display: none;
    348.                         }
    349.                        
    350.                         td.not_today_not_we, td.today_not_we, td.not_today_we, td.today_we
    351.                         {
    352.                                 text-align: right;
    353.                                 border: 1px solid transparent;
    354.                         }
    355.                        
    356.                         td.not_today_not_we:hover, td.today_not_we:hover, td.not_today_we:hover, td.today_we:hover
    357.                         {
    358.                                 cursor: pointer;
    359.                                 border: 1px solid white;
    360.                         }
    361.                        
    362.                         td.not_today_not_we, td.today_not_we
    363.                         {
    364.                                 background-color: black;
    365.                         }
    366.                        
    367.                         td.not_today_we, td.today_we
    368.                         {
    369.                                 color: grey;
    370.                         }
    371.                        
    372.                         td.today_we, td.today_not_we
    373.                         {
    374.                                 color: red;
    375.                         }
    376.                        
    377.                         tr.titre
    378.                         {
    379.                                 text-align: center;
    380.                                 color: white;
    381.                                 background-color: grey;
    382.                         }
    383.                        
    384.                         table
    385.                         {
    386.                                 width: 100%;
    387.                         }
    388.                        
    389.                         tr.deplace
    390.                         {
    391.                                 text-align: center;
    392.                         }
    393.                        
    394.                         tr.deplace span
    395.                         {
    396.                                 border: 1px solid transparent;
    397.                                 padding-left: 2px;
    398.                                 padding-right: 2px;
    399.                                 font-size: 10px;
    400.                                 margin: 0px;
    401.                                 color: white;
    402.                         }
    403.                        
    404.                         tr.deplace a.survol
    405.                         {
    406.                                 border: 1px solid transparent;
    407.                                 padding-left: 2px;
    408.                                 padding-right: 2px;
    409.                                 font-size: 10px;
    410.                                 margin: 0px;
    411.                                 color: white;
    412.                                 text-decoration: none;
    413.                         }
    414.                        
    415.                         a#fermer_calendrier
    416.                         {
    417.                                 color: red;
    418.                         }
    419.                        
    420.                         tr.deplace a.survol:hover
    421.                         {
    422.                                 cursor: pointer;
    423.                                 border: 1px solid white;
    424.                         }
    425.                        
    426.                         select, option
    427.                         {
    428.                                 background-color: black;
    429.                                 color: white;
    430.                                 font-family: sans-serif;
    431.                                 font-weight: bold;
    432.                                 font-variant: small-caps;
    433.                                 font-size: 10px;
    434.                                 margin: 0px;
    435.                                 border: 1px solid transparent;
    436.                         }
    437.                        
    438.                         option:hover
    439.                         {
    440.                                 background-color: black;
    441.                                 border: 1px solid white;
    442.                         }
    443.                 </style>
    444.         </head>
    445.         <body onload="javascript: get_mois(null, null, true, 'calendrier', 'bouton_calendrier');">
    446.                 <input type="button" name="afficher_calendrier" value="Calendrier" onclick="javascript: afficher_calendrier('calendrier', 'bouton_calendrier');" id="bouton_calendrier"/>
    447.                 <div class="calendrier" id="calendrier"></div>
    448.         </body>
    449. </html>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/713"></script>
  2. 2 years ago by benoitbalon
    Copier-coller ce code dans un fichier avec une extension ".css". Il devra être appelé par le fichier XSL.
    1. body
    2. {
    3.         background-color: transparent;
    4.         margin: 0px;
    5. }
    6.  
    7. div.titrejour1, div.titrejour2, div.titrejour3, div.titrejour4, div.titrejour5, div.titrejour6, div.titrejour7
    8. {
    9.         width: 40px;
    10.         height: 40px;
    11.         float: left;
    12.         text-align: right;
    13.         background-color: transparent;
    14. }
    15.  
    16. div.vide,
    17. div.jour1, div.jour2, div.jour3, div.jour4, div.jour5, div.jour6, div.jour7
    18. {
    19.         width: 25px;
    20.         height: 40px;
    21.         float: left;
    22.         text-align: right;
    23.         background-color: transparent;
    24.         padding-right: 15px;
    25. }
    26.  
    27. div.jour6, div.jour7
    28. {
    29.         background-color: #DFBBF4;
    30. }
    31.  
    32. div.titrejour1, div.titrejour2, div.titrejour3, div.titrejour4, div.titrejour5, div.titrejour6, div.titrejour7
    33. {
    34.         font-weight: bold;
    35.         text-align: center;
    36.         background-color: #6F1BA0;
    37.         color: white;
    38.         text-transform: uppercase;
    39. }
    40.  
    41. div.mois
    42. {
    43.         width: 280px;
    44.         height: 320px;
    45.         margin: 10px;
    46.         border: 3px solid #6F1BA0;
    47.         -moz-border-radius-bottomleft: 30px;
    48.         -moz-border-radius-topright: 30px;
    49.         -moz-border-radius-bottomright: 30px;
    50.         -moz-border-radius-topleft: 30px;
    51.         float: left;
    52. }
    53.  
    54. div.titremois
    55. {
    56.         text-align: center;
    57.         font-weight: bold;
    58.         height: 30px;
    59.         padding-top: 10px;
    60.         font-size: 20px;
    61.         color: #6F1BA0;
    62.         text-transform: uppercase;
    63. }
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/684"></script>
  3. 2 years ago by benoitbalon
    Copier-coller ce code dans un fichier avec une extension ".xsl" (modifier la langue et l'année au besoin). Le fichier devra être appelé dans le fichier XML contenant les données calendaires, celui-ci étant le fichier à ouvrir avec le navigateur Internet.
    1. <?xml version="1.0" encoding="ISO-8859-1"?>
    2.  
    3. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    4.  
    5.         <xsl:template match="/">
    6.                 <html>
    7.                         <head>
    8.                                 <title>Calendrier</title>
    9.                                 <style type='text/css' media='all'>@import 'calendrier.css';</style>
    10.                         </head>
    11.  
    12.                         <body xml:lang="fr">
    13.                                 <xsl:apply-templates>
    14.                                         <xsl:with-param name="langue">fr</xsl:with-param>
    15.                                         <xsl:with-param name="annee">2008</xsl:with-param>
    16.                                 </xsl:apply-templates>
    17.                         </body>
    18.                 </html>
    19.         </xsl:template >
    20.  
    21.         <xsl:template name="noms_mois" match="/calendrier/noms_mois">
    22.                 <xsl:param name="langue"/>
    23.                 <xsl:param name="num"/>
    24.                 <xsl:for-each select="/calendrier/noms_mois/nom[@numero = $num and @lang = $langue]">
    25.                         <div class="titremois"><xsl:value-of select="text()"/></div>
    26.                 </xsl:for-each>
    27.         </xsl:template >
    28.  
    29.         <xsl:template name="noms_jours" match="/calendrier/noms_jours">
    30.                 <xsl:param name="langue"/>
    31.                 <xsl:for-each select="/calendrier/noms_jours/nom[@lang = $langue]">
    32.                         <div class="titrejour{@numero}"><xsl:value-of select="substring(text(), 1, 2)"/></div>
    33.                 </xsl:for-each>
    34.         </xsl:template >
    35.        
    36.         <xsl:template name="principal" match="calendrier">
    37.                 <xsl:param name="langue"/>
    38.                 <xsl:param name="annee"/>
    39.                 <xsl:for-each select="./annee[@numero = $annee]">
    40.                         <div class="annee">
    41.                                 <xsl:for-each select="./mois">
    42.                                         <div class="mois">
    43.                                                 <xsl:call-template name="noms_mois">
    44.                                                         <xsl:with-param name="num"><xsl:value-of select="@numero"/></xsl:with-param>
    45.                                                         <xsl:with-param name="langue"><xsl:value-of select="$langue"/></xsl:with-param>
    46.                                                 </xsl:call-template>
    47.                                                 <div class="jours">
    48.                                                         <xsl:call-template name="noms_jours">
    49.                                                                 <xsl:with-param name="langue"><xsl:value-of select="$langue"/></xsl:with-param>
    50.                                                         </xsl:call-template>
    51.                                                 </div>
    52.                                                 <div class="numeros">
    53.                                                         <xsl:for-each select="./jour">
    54.                                                                 <xsl:if test="@nom=1 and @numero=1">
    55.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    56.                                                                 </xsl:if>
    57.                                                                 <xsl:if test="@nom=2 and @numero=1">
    58.                                                                         <div class="vide">&#160;</div>
    59.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    60.                                                                 </xsl:if>
    61.                                                                 <xsl:if test="@nom=3 and @numero=1">
    62.                                                                         <div class="vide">&#160;</div>
    63.                                                                         <div class="vide">&#160;</div>
    64.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    65.                                                                 </xsl:if>
    66.                                                                 <xsl:if test="@nom=4 and @numero=1">
    67.                                                                         <div class="vide">&#160;</div>
    68.                                                                         <div class="vide">&#160;</div>
    69.                                                                         <div class="vide">&#160;</div>
    70.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    71.                                                                 </xsl:if>
    72.                                                                 <xsl:if test="@nom=5 and @numero=1">
    73.                                                                         <div class="vide">&#160;</div>
    74.                                                                         <div class="vide">&#160;</div>
    75.                                                                         <div class="vide">&#160;</div>
    76.                                                                         <div class="vide">&#160;</div>
    77.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    78.                                                                 </xsl:if>
    79.                                                                 <xsl:if test="@nom=6 and @numero=1">
    80.                                                                         <div class="vide">&#160;</div>
    81.                                                                         <div class="vide">&#160;</div>
    82.                                                                         <div class="vide">&#160;</div>
    83.                                                                         <div class="vide">&#160;</div>
    84.                                                                         <div class="vide">&#160;</div>
    85.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    86.                                                                 </xsl:if>
    87.                                                                 <xsl:if test="@nom=7 and @numero=1">
    88.                                                                         <div class="vide">&#160;</div>
    89.                                                                         <div class="vide">&#160;</div>
    90.                                                                         <div class="vide">&#160;</div>
    91.                                                                         <div class="vide">&#160;</div>
    92.                                                                         <div class="vide">&#160;</div>
    93.                                                                         <div class="vide">&#160;</div>
    94.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    95.                                                                 </xsl:if>
    96.                                                                 <xsl:if test="@numero!=1">
    97.                                                                         <div class="jour{@nom}"><xsl:value-of select="@numero"/></div>
    98.                                                                 </xsl:if>
    99.                                                         </xsl:for-each>
    100.                                                 </div>
    101.                                         </div>
    102.                                 </xsl:for-each>
    103.                         </div>
    104.                 </xsl:for-each>
    105.  
    106.         </xsl:template >
    107. </xsl:stylesheet>
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/683"></script>
  4. sponsorised links
  5. 2 years ago by benoitbalon
    Copier ce code dans un fichier Shell/Bash, et exécuter le script en mettant en argument la liste des années voulues. Ne pas oublier d'exporter la sortie vers fichier XML ex : $~ : ./generer_calendrier.sh 2008 2009 2010 > calendrier.xml
    1. #!/bin/sh
    2.  
    3. annee="$1"
    4. true=1
    5. false=0
    6.  
    7. # permet de lancer la commande cal pour un mois et une annee precis, et de traiter le decoupage des semaines
    8. get_month ()
    9. {
    10.         annee="$1"
    11.         mois="$2"
    12.         numligne="0"
    13.        
    14.         # execution de cal, et lecture de la sortie ligne par ligne
    15.         cal -m $mois $annee | while read ligne
    16.         do
    17.                 numligne=$((numligne + 1))
    18.                
    19.                 # on ne tient pas compte des lignes vides retournees par cal
    20.                 if test "`echo $ligne | tr -d ' '`" != ""
    21.                 then
    22.                        
    23.                         # on ne tient pas compte de la premiere ligne (mois et annee en cours) et de la deuxieme ligne (noms des jours)
    24.                         if test "$numligne" -gt 2
    25.                         then
    26.                                
    27.                                 # on tient compte de la premiere semaine du mois, afin de connaitre la position du premier jour
    28.                                 if test "$numligne" -lt 4
    29.                                 then
    30.                                         set_days $true $ligne
    31.                                 else
    32.                                         set_days $false $ligne
    33.                                 fi
    34.                                
    35.                         fi
    36.                        
    37.                 fi
    38.                
    39.         done
    40. }
    41.  
    42. # permet de decouper une semaine (une ligne retournee par cal) en jours
    43. set_days ()
    44. {
    45.         nb_jours=`expr $# - 1`
    46.         is_first_line=$1
    47.        
    48.         # on identifie le nombre de jours du mois en cours compris dans la semaine que l'on traite
    49.         case $nb_jours in
    50.                 1) # cette semaine ne comprend qu'un jour du mois en cours, le premier ou le dernier jour du mois
    51.                         if test "$is_first_line" = "$true"
    52.                         then
    53.                                 set_day 7 $2
    54.                         else
    55.                                 set_day 1 $2
    56.                         fi
    57.                         ;;
    58.                 2) # cette semaine comprend deux jours du mois en cours, les deux premiers ou les deux derniers
    59.                         if test "$is_first_line" = "$true"
    60.                         then
    61.                                 set_day 6 $2
    62.                                 set_day 7 $3
    63.                         else
    64.                                 set_day 1 $2
    65.                                 set_day 2 $3
    66.                         fi
    67.                         ;;
    68.                 3) # cette semaine comprend trois jours du mois en cours, les trois premiers ou les trois derniers
    69.                         if test "$is_first_line" = "$true"
    70.                         then
    71.                                 set_day 5 $2
    72.                                 set_day 6 $3
    73.                                 set_day 7 $4
    74.                         else
    75.                                 set_day 1 $2
    76.                                 set_day 2 $3
    77.                                 set_day 3 $4
    78.                         fi
    79.                         ;;
    80.                 4) # cette semaine comprend quatre jours du mois en cours, les quatre premiers ou les quatre derniers
    81.                         if test "$is_first_line" = "$true"
    82.                         then
    83.                                 set_day 4 $2
    84.                                 set_day 5 $3
    85.                                 set_day 6 $4
    86.                                 set_day 7 $5
    87.                         else
    88.                                 set_day 1 $2
    89.                                 set_day 2 $3
    90.                                 set_day 3 $4
    91.                                 set_day 4 $5
    92.                         fi
    93.                         ;;
    94.                 5) # cette semaine comprend cinq jours du mois en cours, les cinq premiers ou les cinq derniers
    95.                         if test "$is_first_line" = "$true"
    96.                         then
    97.                                 set_day 3 $2
    98.                                 set_day 4 $3
    99.                                 set_day 5 $4
    100.                                 set_day 6 $5
    101.                                 set_day 7 $6
    102.                         else
    103.                                 set_day 1 $2
    104.                                 set_day 2 $3
    105.                                 set_day 3 $4
    106.                                 set_day 4 $5
    107.                                 set_day 5 $6
    108.                         fi
    109.                         ;;
    110.                 6) # cette semaine comprend six jours du mois en cours, les six premiers ou les six derniers
    111.                         if test "$is_first_line" = "$true"
    112.                         then
    113.                                 set_day 2 $2
    114.                                 set_day 3 $3
    115.                                 set_day 4 $4
    116.                                 set_day 5 $5
    117.                                 set_day 6 $6
    118.                                 set_day 7 $7
    119.                         else
    120.                                 set_day 1 $2
    121.                                 set_day 2 $3
    122.                                 set_day 3 $4
    123.                                 set_day 4 $5
    124.                                 set_day 5 $6
    125.                                 set_day 6 $7
    126.                         fi
    127.                         ;;
    128.                 7) # cette semaine est pleine, donc on sait que le premier numero correspondra au lundi
    129.                         set_day 1 $2
    130.                         set_day 2 $3
    131.                         set_day 3 $4
    132.                         set_day 4 $5
    133.                         set_day 5 $6
    134.                         set_day 6 $7
    135.                         set_day 7 $8
    136.                         ;;
    137.                 *)
    138.                         echo "Un probleme a du survenir..."
    139.                         exit 1
    140.                         ;;
    141.         esac
    142. }
    143.  
    144. # permet de recopier en sortie la correspondance entre le jour et son numero dans le mois
    145. set_day ()
    146. {
    147.         echo "          <jour nom=\"$1\" numero=\"$2\"/>"
    148. }
    149.  
    150. # lance le traitement pour le calendrier d'une annee, mois par mois
    151. make_calendrier ()
    152. {
    153.         echo "<annee numero=\"$annee\">"
    154.        
    155.         echo "     <mois numero=\"1\">"
    156.         get_month $annee 1
    157.         echo "     </mois>"
    158.        
    159.         echo "     <mois numero=\"2\">"
    160.         get_month $annee 2
    161.         echo "     </mois>"
    162.        
    163.         echo "     <mois numero=\"3\">"
    164.         get_month $annee 3
    165.         echo "     </mois>"
    166.        
    167.         echo "     <mois numero=\"4\">"
    168.         get_month $annee 4
    169.         echo "     </mois>"
    170.        
    171.         echo "     <mois numero=\"5\">"
    172.         get_month $annee 5
    173.         echo "     </mois>"
    174.        
    175.         echo "     <mois numero=\"6\">"
    176.         get_month $annee 6
    177.         echo "     </mois>"
    178.        
    179.         echo "     <mois numero=\"7\">"
    180.         get_month $annee 7
    181.         echo "     </mois>"
    182.        
    183.         echo "     <mois numero=\"8\">"
    184.         get_month $annee 8
    185.         echo "     </mois>"
    186.        
    187.         echo "     <mois numero=\"9\">"
    188.         get_month $annee 9
    189.         echo "     </mois>"
    190.        
    191.         echo "     <mois numero=\"10\">"
    192.         get_month $annee 10
    193.         echo "     </mois>"
    194.        
    195.         echo "     <mois numero=\"11\">"
    196.         get_month $annee 11
    197.         echo "     </mois>"
    198.        
    199.         echo "     <mois numero=\"12\">"
    200.         get_month $annee 12
    201.         echo "     </mois>"
    202.  
    203.         echo "</annee>"
    204. }
    205.  
    206. echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"
    207. echo "<!--?xml-stylesheet href=\"calendrier.xsl\" type=\"text/xsl\"?-->"
    208. echo "<calendrier>"
    209. echo "<noms_jours>"
    210. echo "  <nom numero=\"1\" lang=\"fr\">lundi</nom>"
    211. echo "  <nom numero=\"2\" lang=\"fr\">mardi</nom>"
    212. echo "  <nom numero=\"3\" lang=\"fr\">mercredi</nom>"
    213. echo "  <nom numero=\"4\" lang=\"fr\">jeudi</nom>"
    214. echo "  <nom numero=\"5\" lang=\"fr\">vendredi</nom>"
    215. echo "  <nom numero=\"6\" lang=\"fr\">samedi</nom>"
    216. echo "  <nom numero=\"7\" lang=\"fr\">dimanche</nom>"
    217. echo "  <nom numero=\"1\" lang=\"it\">luned&#236;</nom>"
    218. echo "  <nom numero=\"2\" lang=\"it\">marted&#236;</nom>"
    219. echo "  <nom numero=\"3\" lang=\"it\">mercoled&#236;</nom>"
    220. echo "  <nom numero=\"4\" lang=\"it\">gioved&#236;</nom>"
    221. echo "  <nom numero=\"5\" lang=\"it\">venerd&#236;</nom>"
    222. echo "  <nom numero=\"6\" lang=\"it\">sabato</nom>"
    223. echo "  <nom numero=\"7\" lang=\"it\">domenica</nom>"
    224. echo "  <nom numero=\"1\" lang=\"en\">monday</nom>"
    225. echo "  <nom numero=\"2\" lang=\"en\">tuesday</nom>"
    226. echo "  <nom numero=\"3\" lang=\"en\">wednesday</nom>"
    227. echo "  <nom numero=\"4\" lang=\"en\">thursday</nom>"
    228. echo "  <nom numero=\"5\" lang=\"en\">friday</nom>"
    229. echo "  <nom numero=\"6\" lang=\"en\">saturday</nom>"
    230. echo "  <nom numero=\"7\" lang=\"en\">sunday</nom>"
    231. echo "  <nom numero=\"1\" lang=\"de\">montag</nom>"
    232. echo "  <nom numero=\"2\" lang=\"de\">dienstag</nom>"
    233. echo "  <nom numero=\"3\" lang=\"de\">mittwoch</nom>"
    234. echo "  <nom numero=\"4\" lang=\"de\">donnerstag</nom>"
    235. echo "  <nom numero=\"5\" lang=\"de\">freitag</nom>"
    236. echo "  <nom numero=\"6\" lang=\"de\">samstag</nom>"
    237. echo "  <nom numero=\"7\" lang=\"de\">sonntag</nom>"
    238. echo "  <nom numero=\"1\" lang=\"es\">lunes</nom>"
    239. echo "  <nom numero=\"2\" lang=\"es\">martes</nom>"
    240. echo "  <nom numero=\"3\" lang=\"es\">mi&#233;rcoles</nom>"
    241. echo "  <nom numero=\"4\" lang=\"es\">jueves</nom>"
    242. echo "  <nom numero=\"5\" lang=\"es\">viernes</nom>"
    243. echo "  <nom numero=\"6\" lang=\"es\">s&#225;bado</nom>"
    244. echo "  <nom numero=\"7\" lang=\"es\">domingo</nom>"
    245. echo "</noms_jours>"
    246. echo "<noms_mois>"
    247. echo "  <nom numero=\"1\" lang=\"fr\">janvier</nom>"
    248. echo "  <nom numero=\"2\" lang=\"fr\">f&#233;vrier</nom>"
    249. echo "  <nom numero=\"3\" lang=\"fr\">mars</nom>"
    250. echo "  <nom numero=\"4\" lang=\"fr\">avril</nom>"
    251. echo "  <nom numero=\"5\" lang=\"fr\">mai</nom>"
    252. echo "  <nom numero=\"6\" lang=\"fr\">juin</nom>"
    253. echo "  <nom numero=\"7\" lang=\"fr\">juillet</nom>"
    254. echo "  <nom numero=\"8\" lang=\"fr\">ao&#251;t</nom>"
    255. echo "  <nom numero=\"9\" lang=\"fr\">septembre</nom>"
    256. echo "  <nom numero=\"10\" lang=\"fr\">octobre</nom>"
    257. echo "  <nom numero=\"11\" lang=\"fr\">novembre</nom>"
    258. echo "  <nom numero=\"12\" lang=\"fr\">d&#233;cembre</nom>"
    259. echo "  <nom numero=\"1\" lang=\"en\">january</nom>"
    260. echo "  <nom numero=\"2\" lang=\"en\">february</nom>"
    261. echo "  <nom numero=\"3\" lang=\"en\">march</nom>"
    262. echo "  <nom numero=\"4\" lang=\"en\">april</nom>"
    263. echo "  <nom numero=\"5\" lang=\"en\">may</nom>"
    264. echo "  <nom numero=\"6\" lang=\"en\">june</nom>"
    265. echo "  <nom numero=\"7\" lang=\"en\">july</nom>"
    266. echo "  <nom numero=\"8\" lang=\"en\">august</nom>"
    267. echo "  <nom numero=\"9\" lang=\"en\">september</nom>"
    268. echo "  <nom numero=\"10\" lang=\"en\">october</nom>"
    269. echo "  <nom numero=\"11\" lang=\"en\">november</nom>"
    270. echo "  <nom numero=\"12\" lang=\"en\">december</nom>"
    271. echo "  <nom numero=\"1\" lang=\"es\">enero</nom>"
    272. echo "  <nom numero=\"2\" lang=\"es\">febrero</nom>"
    273. echo "  <nom numero=\"3\" lang=\"es\">marzo</nom>"
    274. echo "  <nom numero=\"4\" lang=\"es\">abril</nom>"
    275. echo "  <nom numero=\"5\" lang=\"es\">mayo</nom>"
    276. echo "  <nom numero=\"6\" lang=\"es\">junio</nom>"
    277. echo "  <nom numero=\"7\" lang=\"es\">julio</nom>"
    278. echo "  <nom numero=\"8\" lang=\"es\">agosto</nom>"
    279. echo "  <nom numero=\"9\" lang=\"es\">septiembre</nom>"
    280. echo "  <nom numero=\"10\" lang=\"es\">octubre</nom>"
    281. echo "  <nom numero=\"11\" lang=\"es\">noviembre</nom>"
    282. echo "  <nom numero=\"12\" lang=\"es\">diciembre</nom>"
    283. echo "  <nom numero=\"1\" lang=\"de\">januar</nom>"
    284. echo "  <nom numero=\"2\" lang=\"de\">februar</nom>"
    285. echo "  <nom numero=\"3\" lang=\"de\">m&#228;rz</nom>"
    286. echo "  <nom numero=\"4\" lang=\"de\">april</nom>"
    287. echo "  <nom numero=\"5\" lang=\"de\">mai</nom>"
    288. echo "  <nom numero=\"6\" lang=\"de\">juni</nom>"
    289. echo "  <nom numero=\"7\" lang=\"de\">juli</nom>"
    290. echo "  <nom numero=\"8\" lang=\"de\">august</nom>"
    291. echo "  <nom numero=\"9\" lang=\"de\">september</nom>"
    292. echo "  <nom numero=\"10\" lang=\"de\">oktober</nom>"
    293. echo "  <nom numero=\"11\" lang=\"de\">november</nom>"
    294. echo "  <nom numero=\"12\" lang=\"de\">dezember</nom>"
    295. echo "  <nom numero=\"1\" lang=\"it\">gennaio</nom>"
    296. echo "  <nom numero=\"2\" lang=\"it\">febbraio</nom>"
    297. echo "  <nom numero=\"3\" lang=\"it\">marzo</nom>"
    298. echo "  <nom numero=\"4\" lang=\"it\">aprile</nom>"
    299. echo "  <nom numero=\"5\" lang=\"it\">maggio</nom>"
    300. echo "  <nom numero=\"6\" lang=\"it\">giugno</nom>"
    301. echo "  <nom numero=\"7\" lang=\"it\">luglio</nom>"
    302. echo "  <nom numero=\"8\" lang=\"it\">agosto</nom>"
    303. echo "  <nom numero=\"9\" lang=\"it\">settembre</nom>"
    304. echo "  <nom numero=\"10\" lang=\"it\">ottobre</nom>"
    305. echo "  <nom numero=\"11\" lang=\"it\">novembre</nom>"
    306. echo "  <nom numero=\"12\" lang=\"it\">dicembre</nom>"
    307. echo "</noms_mois>"
    308.  
    309. # lance le traitement du calendrier de chaque annee passee en parametre du script
    310. for annee in $@
    311. do
    312.         make_calendrier $annee
    313. done
    314.  
    315. echo "</calendrier>"
    316.  
    317. exit 0
    Paste this in your website: <script type="text/javascript" src="http://www.posteet.com/embed/680"></script>

First / Previous / Next / Last / Page 1 of 1 (4 posteets)