web-dev-qa-db-fra.com

jQuery UI Datepicker: comment ajouter des événements cliquables à des dates particulières?

Je veux mettre en surbrillance les dates sur jquery datepicker où il y a des événements attachés (je ne parle pas d'événement js, mais d'événements réels: D).

  1. Comment passer les dates de l'événement au calendrier?
  2. Comment le rendre cliquable, soit pour afficher le ou les événements avec leur URL dans une petite info-bulle, soit pour aller à la page de l'événement?

Y a-t-il déjà des plugins ou des ressources disponibles (comme des tutoriels) pour m'aider à y parvenir s'il vous plaît?

Merci.

PS: je n'utilise pas le sélecteur de date pour choisir une date, seulement pour accéder aux événements attachés à une date

PS2: je vais l'utiliser sur un site multilingue (fr et anglais), c'est pourquoi j'ai pensé à datepicker

jqueryjquery-uijquery-pluginsdatepickerjquery-ui-datepicker
37
sf_tristanb

C'est certainement possible, et à mon avis, pas trop d'abus du widget datepicker. Il existe une option pour initialiser le widget en ligne, qui peut être utilisé pour exactement le scénario que vous décrivez ci-dessus.

Vous devrez suivre quelques étapes:

  1. Initialisez le sélecteur de date en ligne. Attachez le widget datepicker à un <div> pour qu'il apparaisse toujours et que vous n'ayez pas à le joindre à un input:

    $("div").datepicker({...});

  2. Appuyez sur l'événement beforeShowDay pour mettre en évidence des dates avec des événements spécifiques. Définissez également vos événements dans un tableau que vous pouvez remplir et envoyer au client:

    Tableau des événements: 

    var events = [ 
    { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") }
];

    Gestionnaire d'événements: 

    beforeShowDay: function(date) {
    var result = [true, '', null];
    var matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
    });

    if (matching.length) {
        result = [true, 'highlight', null];
    }
    return result;
},

    Cela peut sembler un peu complexe, mais tout ce qu'il fait, c'est mettre en évidence les dates dans le sélecteur de dates qui ont des entrées dans le tableau events défini ci-dessus.

  3. Définissez un gestionnaire d'événements onSelect dans lequel vous pouvez indiquer au sélecteur de date ce qu'il doit faire lorsqu'un jour est cliqué:

    onSelect: function(dateText) {
    var date,
        selectedDate = new Date(dateText),
        i = 0,
        event = null;

    /* Determine if the user clicked an event: */
    while (i < events.length && !event) {
        date = events[i].Date;

        if (selectedDate.valueOf() === date.valueOf()) {
            event = events[i];
        }
        i++;
    }
    if (event) {
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
        alert(event.Title);
    }
}

    Encore une fois, cela ressemble à beaucoup de code, mais tout ce qui se passe, c'est que nous trouvons l'événement associé à la date cliquée. Après avoir trouvé cet événement, vous pouvez effectuer l'action que vous souhaitez (afficher une info-bulle, par exemple)

Voici un exemple de travail complet: http://jsfiddle.net/Zrz9t/1151/ . Assurez-vous de naviguer jusqu'à février/mars pour voir les événements.

65
Andrew Whitaker

en plus de la solution Andrew Whitaker il y a une autre façon de le faire (en fait c'est un hack mais en fait c'est peut-être parfait pour quelqu'un d'autre parce que peut-être le titre ou la date n'est pas toujours un bon identifiant)

Note: veuillez lire Andrew Whitaker solution d'abord et voir les changements ici

// date picker
$("div").datepicker({
    // hook handler
    beforeShowDay: function(tdate) {
        var mydata = $(this).data("mydata");
        var enabled = false;
        var classes = "";
        var title = date;
        $.each(mydata, function() {
            if (this.date.valueOf() === tdate.valueOf()){
                enabled = true;
                classes = "highlight";
                title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;)
            }
        });        
        return [enabled,classes,title];
    },
    // event handler
    onSelect: function() {
        var id = $(this).find(".ui-datepicker-current-day").attr("data-id");
        mydata = $(this).data("mydata"),
        selectedData = null;        
        /* search for data id */
        $.each(mydata,function(){
            if (this.id == id){
                selectedData = this;
            }
        });
        if (selectedData) {
            /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
            alert(selectedData);
        }
    }
}).data("mydata",
    // your data
    [{
        id:1,
        title: "Five K for charity", 
        date: new Date("02/13/2011")
    }, 
    {
        id:2,
        title: "Dinner", 
        date: new Date("02/25/2011")
    }, 
    {
        id:3,
        title: "Meeting with manager", 
        date: new Date("03/01/2011")
    }]);
4
Fareed Alnamrouti