Comment afficher des évenements(dates) sur jquery calendar ?

**Kijer** · 10/02/2009, 00h59

Bonjour,

J'utilise le calendar de jquery UI, mais aucun tuto, exemple n'explique comment ou tout simplement si il est possible de rajouter des dates qui colorie les cases avec un lien personnalisé par événements et si possible une bulle (tooltip) ?

Merci

**CedricRog** · 06/04/2009, 11h47

Salut Kijer,
C'est exactement ce que j'essaie de faire actuellement !
As tu trouvé une solution, un tuto, quelque chose expliquant comment faire cela simplement ?
ça serait super.
Quelqu'un d'autres à des infos à ce sujet ?

Bonne journée à tous

**danielhagnoul** · 06/04/2009, 18h16

Bonjour.

Ayant trouvé votre question intéressante, depuis 12 h, je me coltine avec les dates !

Je n'arrive pas à imposer un style à une date particulière

et même

, mais pour le reste ça va.

Il me semble que le code, 2 fichiers, est trop long pour figurer ici.

Edit du 7 août 2009
Nouvelle version, voir : http://danielhagnoul.developpez.com/...atepicker.html

**danielhagnoul** · 06/04/2009, 20h47

Bonsoir.

Le changement de style marche bien pour background-color ou border mais pas pour color ?

Voir ma page de test.

La doc. : http://jqueryui.com/demos/datepicker/

**danielhagnoul** · 06/04/2009, 22h57

Bonsoir.

Je viens de terminer la version finale de ma page de test - plusieurs améliorations pour la manipulation des dates.

Edit du 7 août 2009
Nouvelle version, voir : http://danielhagnoul.developpez.com/...atepicker.html

**CedricRog** · 14/05/2009, 10h12

Super danielhagnoul.
Je n'avais pas pu me remettre sur ce projet depuis longtemps.
Je regarde ça tout de suite.

**CedricRog** · 14/05/2009, 10h24

ha ben, je crois que le lien marche pas !

danielhagnoul, tu as encore cette page de test ?
Je serais vraiment intéressé de jeter un oeil dessus.
Merci

**danielhagnoul** · 14/05/2009, 21h04

Bonsoir.

Désolé pour le lien, je ne pouvais plus squatter www.jmcu.net plus longtemps et je n'ai pas trouvé d'hébergeur vraiment gratuit avec une place libre. À signaler que ma demande à developpez.com n'a même pas reçu une réponse, fut-elle négative !

Voici l'équivalent en zip :

**rambc** · 15/05/2009, 11h28

Envoyé par danielhagnoul

Voici l'équivalent en zip :

Génial !

Exactement ce dont j'ais besoin.

Je m'excuse mais je n'ai pas encore regradé le code et je voudrais savoir si le message associé à une date peut être un contenu HTML de type div.

Envoyé par danielhagnoul

À signaler que ma demande à developpez.com n'a même pas reçu une réponse, fut-elle négative !

Fais un mini-tuto sur le sujet en commentant ton code, je suis sûr que cela intéressera le site.

**Bovino** · 15/05/2009, 11h53

Envoyé par rambc

Fais un mini-tuto sur le sujet en commentant ton code, je suis sûr que cela intéressera le site.

Excellente idée !!!

**Kerod** · 15/05/2009, 13h26

Envoyé par danielhagnoul

À signaler que ma demande à developpez.com n'a même pas reçu une réponse, fut-elle négative !

Mais quelle demande ?

**danielhagnoul** · 15/05/2009, 22h27

Bonsoir Kerod.

Message :
à hebergement@redaction-developpez.com
date 17 avril 2009 02:02
objet Demande
envoyée par gmail.com

Le texte du message est trop personnel pour être reproduit ici.

**danielhagnoul** · 15/05/2009, 23h00

Bonsoir rambc.

Le contenu peut être le texte contenu dans une div - voir exemple ci-dessous.

Attention : si le texte est trop long, comme dans l'exemple ci-dessous, IE8 ne l'affiche pas en entier !

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Test datepicker</title>
    <link rel="stylesheet" type="text/css" href="humanity/jquery-ui-1.7.1.custom.css" media="all" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
            text-align:center;
        }
        div#affiche {
            width:100%;
            height:40px;
            margin:12px auto;
        }
        div#datepicker {
            width:80%;
            margin:12px auto;
        }
        /*
        .ui-datepicker-current-day {
            background-color:#00FF99;
        }
        .ui-datepicker-today {
            background-color:#FF9933;
        }
        .ui-widget-content {
            color:#0000FF;
            background-color:#FFFFCC;
        }
        */
        .important {
            background-color:#FF0000; /*avec color rien ne va plus !*/
        }
        .conge {
            background-color:#0000FF;
        }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="datepicker-fr.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var vacances = [[19, 4, 2009, 'conge'], [21, 4, 2009, 'conge']];
            var reunions = [[8, 5, 2009, 'important'], [12, 5, 2009, 'important']];
 
            function setDays(day, month, year) {
                var result = [true, '', ''];
 
                if (vacances != null) {
                    for (i = 0; i < vacances.length; i++) {
                        if ((day == vacances[i][0]) && (month == vacances[i][1] - 1) && (year == vacances[i][2])) {
                            result = [false, vacances[i][3], "On est en vacances !"];
                        }
                    }
                }
 
                if (reunions != null) {
                    for (i = 0; i < reunions.length; i++) {
                        if ((day == reunions[i][0]) && (month == reunions[i][1] - 1) && (year == reunions[i][2])) {
                            result = [true, reunions[i][3], $("#longMessage").text()];
                        }
                    }
                }
 
                return result;
            }
 
            function selectedDay(day, month, year) {
                $("#affiche").html("<p>L'utilisateur a choisi le " + day + "/" + (month + 1) + "/" + year + " !</p>");
            }
 
            $("#datepicker").datepicker({
                numberOfMonths: 3,
                //showButtonPanel: true,
                //currentText: "Aujourd'hui",
                minDate: new Date(2009,3-1,15), //du 15 mars 2009
                maxDate: new Date(2009,5-1,16), //au 16 mai 2009
                //defaultDate: new Date(2009,4-1,2), //2 avril 2009
                //showOtherMonths: true,
                beforeShowDay: function(date) {
                    var day = date.getDate(); //entre 1 et 31
                    var month = date.getMonth(); // entre 0 et 11
                    var year = date.getFullYear(); // 4 chiffres
 
                    /*
                    If you don't want the weekends to appear at all, simply:
                    
                    th.ui-datepicker-week-end, td.ui-datepicker-week-end {
                        display: none;
                    }
                    */
                    var noWeekend = $.datepicker.noWeekends(date); //samedi et dimanche !
 
                    if (noWeekend[0]) {
                        return setDays(day, month, year);
                    } else {
                        return noWeekend;
                    }
                },
                onSelect: function(dateText) {
                    var yearTexte = dateText.slice(6);
                    var monthTexte = dateText.slice(3,5); // de 01 à 12 texte !
                    var dayTexte = dateText.slice(0,2); // de 01 à 31 texte !
 
                    dayTexte = dayTexte.replace(/0(?=\d)/g, "");                    
                    monthTexte = monthTexte.replace(/0(?=\d)/g, "");
 
                    var year = parseInt(yearTexte);
                    var month = parseInt(monthTexte) - 1;
                    var day = parseInt(dayTexte);
 
                    selectedDay(day, month, year);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche"></div>
        <div id="datepicker"></div>
        <div id="longMessage" style="display:none;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
            </p>
            <p>
                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
            </p>
        </div>
    </div>
</body>
</html>

Edit du 7 août 2009
Nouvelle version, voir : http://danielhagnoul.developpez.com/...atepicker.html

**danielhagnoul** · 16/05/2009, 00h21

Envoyé par rambc

Fais un mini-tuto sur le sujet en commentant ton code, je suis sûr que cela intéressera le site.

Écrire un mini-tuto ? Je ne m'en sens pas capable sans aide, il y a trop longtemps (plus de 20 ans) que je n'ai plus rédigé quelque rapport que ce soit et mon orthographe et ma grammaire sont bien trop déplorables, je dois écrire et peaufiner chaque intervention avant de l'envoyer sur le forum, sans l'aide d'Antidote je suis perdu !

Par contre si notre grand rédacteur en chef, j'ai nommé Monsieur Bovino

, acceptait d'utiliser mon code pour rédiger un tutoriel, qu'il signerait, je collaborerais avec lui avec plaisir.

**rambc** · 16/05/2009, 11h17

Envoyé par danielhagnoul

Le contenu peut être le texte contenu dans une div - voir exemple ci-dessous.

Merci c'est génial. Encore bravo et merci.

Une dernière question: j'aurais voulu par exemple mettre tous les lundis et les mercedis en gras dans le calendrier. Comment faire ?

A PROPOS DU MINI-TUTO :

Envoyé par danielhagnoul

Écrire un mini-tuto ? Je ne m'en sens pas capable sans aide, il y a trop longtemps (plus de 20 ans) que je n'ai plus rédigé quelque rapport que ce soit et mon orthographe et ma grammaire sont bien trop déplorables, je dois écrire et peaufiner chaque intervention avant de l'envoyer sur le forum, sans l'aide d'Antidote je suis perdu !.

Je ne pense pas que tu ais des tonnes de chose à écrire. Pour les erreurs, on peut s'arranger. Je peux si tu le souhaites corriger ce que tu auras tapé. Le tout c'est de ne pas être pressé.

**danielhagnoul** · 16/05/2009, 17h24

Bonsoir.

Voici une version avec le lundi et le mercredi mis en évidence, il suffit d'utiliser getDay(). [Et avec samedi et dimanche !]

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Test datepicker</title>
    <link rel="stylesheet" type="text/css" href="humanity/jquery-ui-1.7.1.custom.css" media="all" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
            text-align:center;
        }
        div#affiche {
            width:100%;
            height:40px;
            margin:12px auto;
        }
        div#datepicker {
            width:80%;
            margin:12px auto;
        }
 
        /* Différentes possibilités pour modifier le style par défaut */
        /*
        .ui-datepicker-current-day {
            background-color:#00FF99;
        }
        .ui-datepicker-today {
            background-color:#FF9933;
        }
        .ui-widget-content {
            color:#0000FF;
            background-color:#FFFFCC;
        }
        */
 
        /* Aujourd'hui */
        /*
        .ui-state-highlight, .ui-widget-content .ui-state-highlight {
            background-color:#FFE45C;
            border:1px solid #FED22F;
            color:#363636;
        }
        */
 
        /* La date sélectionnée */
        /*
        .ui-state-active, .ui-widget-content .ui-state-active {
            background-color:#FFFFFF;
            border:1px solid #FBD850;
            color:#EB8F00;
            font-weight:bold;
            outline-color:-moz-use-text-color;
            outline-style:none;
            outline-width:medium;
        }
        */
 
        /* Couleur de la date */
        .ui-state-default, .ui-widget-content .ui-state-default {
            color:#333333;
        }
 
        .important {
            background-color:#FF0000;
            /* pour modifier le td, ce qui provoque un effet de bordure autour de la date choisie */
            /* je ne sais pas comment modifier le lien <a> contenu dans ce td */
            /* je n'ai rien trouvé sur internet sur ce point */
        }
        .conge {
            background-color:#0000FF;
        }
        .lundiMercredi {
            background-color:#00CCCC;
        }
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="datepicker-fr.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){            
            var vacances = [[19, 4, 2009, 'conge'], [21, 4, 2009, 'conge']];
            var reunions = [[8, 5, 2009, 'important'], [12, 5, 2009, 'important']];
 
            function setDays(day, month, year) {
                var result = [true, '', ''];
 
                //getDay() retourne un entier correspondant au jour de la semaine
                // 0 (dimanche), 1 (lundi), 2 (mardi), 3 (mercredi), 4 (jeudi), 5 (vendredi), 6 (samedi)
                var jourSemaine = new Date(year, month, day).getDay();
 
                if ((jourSemaine == 1) || (jourSemaine == 3)) {
                    result = [true, 'lundiMercredi', ''];
                }
 
                if (vacances != null) {
                    for (i = 0; i < vacances.length; i++) {
                        if ((day == vacances[i][0]) && (month == vacances[i][1] - 1) && (year == vacances[i][2])) {
                            result = [false, vacances[i][3], "On est en vacances !"];
                        }
                    }
                }
 
                if (reunions != null) {
                    for (i = 0; i < reunions.length; i++) {
                        if ((day == reunions[i][0]) && (month == reunions[i][1] - 1) && (year == reunions[i][2])) {
                            result = [true, reunions[i][3], $("#longMessage").text()];
                        }
                    }
                }
 
                return result;
            }
 
            function selectedDay(day, month, year) {
                $("#affiche").html("<p>L'utilisateur a choisi le " + day + "/" + (month + 1) + "/" + year + " !</p>");
            }
 
            $("#datepicker").datepicker({
                numberOfMonths: 3,
                //showButtonPanel: true,
                //currentText: "Aujourd'hui",
                minDate: new Date(2009,3-1,15), //du 15 mars 2009
                maxDate: new Date(2009,5-1,28), //au 16 mai 2009
                //defaultDate: new Date(2009,4-1,2), //2 avril 2009
                //showOtherMonths: true,
                beforeShowDay: function(date) {
                    var day = date.getDate(); //entre 1 et 31
                    var month = date.getMonth(); // entre 0 et 11
                    var year = date.getFullYear(); // 4 chiffres
 
                    /*
                    If you don't want the weekends to appear at all, simply:
                    
                    th.ui-datepicker-week-end, td.ui-datepicker-week-end {
                        display: none;
                    }
                    */
                    //var noWeekend = $.datepicker.noWeekends(date); //samedi et dimanche non sélectionable !
                    var noWeekend = [true, '', '']; // on garde le samedi et le dimanche !
 
                    if (noWeekend[0]) {
                        return setDays(day, month, year);
                    } else {
                        return noWeekend;
                    }
                },
                onSelect: function(dateText) {
                    var yearTexte = dateText.slice(6);
                    var monthTexte = dateText.slice(3,5); // de 01 à 12 texte !
                    var dayTexte = dateText.slice(0,2); // de 01 à 31 texte !
 
                    dayTexte = dayTexte.replace(/0(?=\d)/g, "");                    
                    monthTexte = monthTexte.replace(/0(?=\d)/g, "");
 
                    var year = parseInt(yearTexte);
                    var month = parseInt(monthTexte) - 1;
                    var day = parseInt(dayTexte);
 
                    selectedDay(day, month, year);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="affiche"></div>
        <div id="datepicker"></div>
        <div id="longMessage" style="display:none;">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
            </p>
            <p>
                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
            </p>
        </div>
    </div>
</body>
</html>

Edit du 7 août 2009
Nouvelle version, voir : http://danielhagnoul.developpez.com/...atepicker.html

**rambc** · 17/05/2009, 13h27

Très bien. Cela ne marche pas avec Safari mais bon cela ne me gêne pas car mon site est tourné vers l'utilisation de FireFox, lequel ne me pose jamais trop de problème.

Pour finir, j'aurais une dernière question mais c'est plus du Javascript. Comment transformer ton script en un module importable ? Si c'est trop compliqué à faire ce n'est pas grave je ferais avec ton code si-dessus.

**danielhagnoul** · 17/05/2009, 23h15

Bonsoir.

, bref pas maintenant non !

Je viens de finir un problème sur le forum javascript qui m'a pris toutes mes heures de loisir de ce beau dimanche, j'ai gagné un long repos.

Dans le futur, qui sait ?