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

Question

Je veux mettre en évidence les dates sur le datepicker de jquery où il y a des événements attaché à elle (je ne parle pas de js événement, mais de véritables événements de la vie :D).

1. Comment passer la date de l'événement dans le calendrier?
2. Comment le rendre cliquable, que ce soit pour afficher l'événement(s) avec leur url dans une petite popup pointe, que ce soit pour aller à la page de l'événement?

Sont déjà disponibles plugins ou des ressources (comme les tutoriels) pour m'aider à atteindre s'il vous plaît?

Merci.

PS: je ne suis pas en utilisant le datepicker pour choisir une date, que pour accéder à des événements attachés à une date

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

Answer 1

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

Il ya quelques étapes que vous aurez à prendre:

1. Initialiser le datepicker en ligne. Fixez le composant à un <div> , de sorte qu'il sera toujours apparaître et vous n'aurez pas à le joindre à un input:

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

2. Appuyez sur dans la beforeShowDay événement pour mettre en surbrillance les dates d'événements spécifiques. Aussi, définir vos événements dans un tableau que vous pouvez remplir et envoyer au client:

   Les événements de tableau:

   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 paraître un peu complexe, mais tout ce qu'il fait est en surbrillance des dates dans le datepicker qui ont des entrées dans l' events tableau ci-dessus définies.

3. Définir un onSelect gestionnaire d'événement où vous pouvez dire à la datepicker que faire quand une journée 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, il semble que beaucoup de code, mais tout ce qui se passe, c'est que nous trouvons de l'événement associé à la date cliqué. Après, nous constatons que l'événement, vous pouvez prendre toute action que vous voulez (afficher une info-bulle, par exemple)

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

Answer 2

en plus de la solution Andrew Whitaker , il existe un autre moyen de le faire (en fait c'est un bidouillage 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)

Remarque : veuillez d'abord lire la solution Andrew Whitaker et voir les modifications 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")
    }]);