Transformer JQuery datepicker en calendrier? [Résolu]

[mino26tz]

Bonjour,

Je voulais savoir si quelqu'un a réussi à transformer la (charmante) datepicker UI en un calendrier. Je suis suis sur que ça existe une astuce pour passer un tableau de données d’événements par exemple à ce widget. Si quelqu'un connaît une piste je suis preneur. Je veux utiliser le datepicker en calendrier, car la taille original du datepicker est parfait pour mon placement et l'apparence de ce widget est paramétrable.

Merci d'avance

[SpaceFrog]

ben sinon y'a le calendrier datepicker de developpez ...

[mino26tz]

Envoyé par SpaceFrog

ben sinon y'a le calendrier datepicker de developpez ...

Je le trouve pas c'est dans quel séction?

[SpaceFrog]

http://dmouronval.developpez.com/calendrier/


sinon suffit sur le load de faire un show du uicalendar

Trouver le css display none et le mettre à block et fixer aussi sa position

[mino26tz]

Sympa le datepicker de developpez . Mais moi je veux afficher ça en calendrier, donc à partir des événements récupéré par un tableau(json ou autre), je les affiches sur mle calendrier.

[SpaceFrog]

c'est ce que je te disais plus haut ...
trouver le css display none pour le mettre à block
trouver le css de positionnement...

[mino26tz]

Oui mais ça pour afficher le datepicker, c'est ok, j'ai déja réussi à l'afficher. Mais comment lui envoyer les évenement à afficher. par exemple je lui envoi un tableau json avec une liste d'events, et lui il les affiches sur le calendrier, aprés c à moi de faire en sorte qu'au survol par exemple un box s'affiche avec la déscription de l'event). Donc mon problème c'est plutot comment envoyer des données au calendrier, pas comment l'afficher.
Merci

[SpaceFrog]

Haaa je comprends mieux ta demande ...
tu veux en fait tranformer le datepicker en agenda ...

Il me semble que dans la discussion sur le calendrier developpez il doit y avoir un ou deux post sur la modification des styles des cases de date ...

pour le datepicker ui regarde comment on le set à la date du jour, ça te donnera des idées

[danielhagnoul]

http://www.developpez.net/forums/d11...w/#post6393638

[mino26tz]

Envoyé par SpaceFrog

Haaa je comprends mieux ta demande ...
tu veux en fait tranformer le datepicker en agenda ...

Il me semble que dans la discussion sur le calendrier developpez il doit y avoir un ou deux post sur la modification des styles des cases de date ...

pour le datepicker ui regarde comment on le set à la date du jour, ça te donnera des idées

Ok merci SpaceFrog je regarderai de plus prés.

[mino26tz]

Envoyé par danielhagnoul

http://www.developpez.net/forums/d11...w/#post6393638

Salut Daniel,

Merci, là tu m'a ouvert les portes des paradis. lool. Je vous tiens au courant dés que je commence à mettre ça en oeuvre.

[mino26tz]

Encore une fois merci danielhagnoul, tu m'as mis sur la bonne route. J'ai modifiéé ton datepicker pour que satisfaire à mes besoins. J'ai aleger le code en enlevant pas mal de fonctions qui me serviront pas. Mainent au premier affichage du calendrier j'ai mes date qui sont en couleur rouge. Et mainent je veux que à hover de la souris sur l'une date qui contient un concert, on affiche un layer(ça je menocupe). J'ai besoin que quelq'un me guide pour savoir comment par exemple faire un alert(du contenu du concert).

Code :

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
 
(function($){
    var nomJours = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
 
    var nomMois = ["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
 
    var concerts = [[16, 11, 2011, "contenu Concert1"],[17, 11, 2011, "contenu Concert2"],[18, 11, 2011, "contenu Concert3"]];
 
    setDays = function(day, month, year) {
        var result = [true, '', ''];    //par défaut, on affiche la date
        var concertsLength = 0;
        if (concerts != null) { 
 
            ConcertsLength = concerts.length;
            for (concert in concerts) {
                if ((day == concerts[concert][0]) && (month == concerts[concert][1]) && (year == concerts[concert][2])) {
 
                    result = [true, 'concert', concerts[concert][0]];
                }
            }
        }
 
        return result;
    }
 
    selectedDay = function(day, month, year) {
 
        //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();
 
        $("#affiche").html("<p>Vous avez sélectionné le " +
            nomJours[jourSemaine] + " " + day + " " + nomMois[month] + " " + year + "</p>");
 
    }
 
    $(document).ready(function(){
 
        jQuery('#mycarousel').jcarousel({
            wrap: 'circular',
            auto: 1
        });
 
 
        $("#calendar").datepicker({
            numberOfMonths: 1,
            stepMonths: 1,
            showButtonPanel: true,
            currentText: "Aujourd'hui",
            nextText: "Suivant",
            prevText: "Précédent",
            minDate: new Date(2011,12 - 1,15), //du 1 juillet 2009
            maxDate: new Date(2012,12-1,31), //au 31 décembre 2009
            beforeShowDay: function(date) {
                return setDays(date.getDate(), date.getMonth(), date.getFullYear());		
            /*
            * Si parmi les dates à colorer il y a des samedis ou des dimanches alors
            * mettez en commentaire tout ce qui précède et remplacez-le par :
            * return setDays(date.getDate(), date.getMonth(), date.getFullYear());
            */
            },
            onSelect: function(dateText) {
                //le format de dateText est donné par l'option dateFormat
                //transforme la date donnée au format texte (08082009) en day (8), month (7), year (2009)
                selectedDay(
                    parseInt(dateText.slice(0,2),10),
                    parseInt(dateText.slice(3,5),10)-1,
                    parseInt(dateText.slice(6),10)
                    );
            }
 
        });
 
 
    });	//fin document ready
 
    $(window).load(function(){
 
        $("#calendar").mouseover();
    });
})(jQuery);

et le code css:

Code :

1
2
.ui-datepicker-calendar td.concert > a{color: #FF0000;}
.ui-datepicker-calendar td.concert{background-color:#FFFFFF;}

Merci d'avance.

[danielhagnoul]

Bonsoir

Très simple !

Code :

1
2
3
$("#calendar").on("click", "td.concert > a", function(event){
	console.log( this ); // parseInt($(this).text(), 10) pour le jour
});

[mino26tz]

Envoyé par danielhagnoul

Bonsoir

Très simple !

Code :

Ok, j'ai pigé mais le probléme que moi je veux afficher le contenu (la déscription du concert) on cliquant ou en hover pars c pas un probléme. laors que la j peux récupérer que le jour, si j peux récupérer le mois et l'année aussii. comme ça j vérifiria dans mon array d concert et j'affiche le contenu.


Merci d'avance.

[mino26tz]

c'est réglé !! Merci pour votre aide