Créer un calendrier en personnalisant des dates

**cool2505** · 17/10/2013, 21h02

Bonjour
Je souhaite ajouter a un site un calendrier avec lequel je puisse personnalisé des dates c'est a dire pouvoir affecter une couleur a un jour précis avec si possible une info bulle...
Pour le moment j'ai trouver le code d'un calendrier simple en javascript:
http://www.supportduweb.com/ftp/ybou...alendrier.html

dont voici le code

code html:index.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calendrier javascript</title>
    <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calendrier.css" />
    <script type="text/javascript" src="calendrier.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        calendrier();
    </script>
    </body>
</html>

code js: calendrier.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
function setStyle(id,style,value)
{
    id.style[style] = value;
}
function opacite(el,opacity)
{
    setStyle(el,"filter:","alpha(opacity="+opacity+")");
    setStyle(el,"-moz-opacity",opacity/100);
    setStyle(el,"-khtml-opacity",opacity/100);
    setStyle(el,"opacity",opacity/100);
}
function calendrier()
{
    var date = new Date();
    var jour = date.getDate();
    var moi = date.getMonth();
    var annee = date.getYear();
    if(annee<=200)
    {
        annee += 1900;
    }
    mois = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
    jours_dans_moi = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    if(annee%4 == 0 && annee!=1900)
    {
        jours_dans_moi[1]=29;
    }
    total = jours_dans_moi[moi];
    var date_aujourdui = jour+' '+mois[moi]+' '+annee;
    dep_j = date;
    dep_j.setDate(1);
    if(dep_j.getDate()==2)
    {
        dep_j=setDate(0);
    }
    dep_j = dep_j.getDay();
    document.write('<table class="cal_calendrier" onload="opacite(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_aujourdui+'</th></tr>');
    document.write('<tr class="cal_j_semaines"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>');
    sem = 0;
    for(i=1;i<=dep_j;i++)
    {
        document.write('<td class="cal_jours_av_ap">'+(jours_dans_moi[moi-1]-dep_j+i)+'</td>');
        sem++;
    }
    for(i=1;i<=total;i++)
    {
        if(sem==0)
        {
            document.write('<tr>');
        }
        if(jour==i)
        {
            document.write('<td class="cal_aujourdhui">'+i+'</td>');
        }
        else
        {
            document.write('<td>'+i+'</td>');
        }
        sem++;
        if(sem==7)
        {
            document.write('</tr>');
            sem=0;
        }
    }
    for(i=1;sem!=0;i++)
    {
        document.write('<td class="cal_jours_av_ap">'+i+'</td>');
        sem++;
        if(sem==7)
        {
            document.write('</tr>');
            sem=0;
        }
    }
    document.write('</tbody></table>');
    opacite(document.getElementById('cal_body'),70);
    return true;
}

code css: calendrier.css

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.cal_calendrier
{
    border:1px solid black;
    padding:1px;
    background-color:white;
    width:250px;
    margin:auto;
    height:200px;
}
.cal_calendrier th
{
    border:1px solid black;
    background-color:#ffffff;
}
.cal_calendrier td
{
    border:1px solid black;
    background-color:#ffffff;
    text-align:center;
}
.cal_aujourdhui
{
    color:#ff0000;
}
.cal_jours_av_ap
{
    color:#5a779e;
}

je souhaite personnaliser par exemple le 25 et le 31 octobre en le mettant de couleur rouge avec une info bulle :"c' est la que ca se passe." sur les deux dates.

je pense rajouter une div pour le jour evenement avec le code css:

Code css :

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

1
2
3
4
.cal_evenement
{
    color:#ff0000;
}

mais pour le reste en js je suis completement perdu....

HELP!!!!!

**SylvainPV** · 18/10/2013, 14h44

Ce plugin utilise document.write et crée plein de variables globales inutiles. C'est suffisant pour moi pour le jeter à la poubelle. Attention à bien sélectionner les codes que vous piochez sur le Net, vous n'imaginez pas le nombre de bouses que l'on peut y trouver.

Choisis plutôt une librairie parmi celles-ci : http://jster.net/search?q=calendar ; là au moins il y a un écrémage et une communauté pour le support.

Créer un calendrier en personnalisant des dates

JavaScript

Vue hybride

Discussions similaires

Partager

Partager