jQuery Girl
  1. jQuery Girl
  3. jQuery UI Datepicker: comment append des événements cliquables à des dates particulières?
Intereting Posts
À l’aide de Bootstrap & jQuery, comment faire en sorte que la classe de conteneur passe à une taille inférieure uniquement lorsque la barre latérale est BOTH activée et se chevauche? Bouton bascule Jquery UI (case à cocher) clic / glissement bug jQuery autocomplete (devbridge) lookupFilter pour rechercher plusieurs atsortingbuts Ne pas obtenir une valeur variable? JQuery: déplacer automatiquement une barre de défilement vers un emplacement spécifique après un temps déterminé Appeler div à l’intérieur d’une fonction le changement de variable ne met à jour que lorsque mon curseur jquery est en pause, pas lors de l’exécution Intégrer le plugin jQuery à la firebase database Comment transformer un mot clé sur un site en liens avec jQuery Comment obtenir des données jQuery ajax dans la fonction compet? modèle d’access en javascript asp .net mvc razor Bootstrap .popover () ‘show’ & ‘destroy’ ne fonctionnent pas correctement Remplir une grande table à partir de données JSON Comment obtenir du texte de parent div uniquement à l’aide de Jsoup sous Android HTML5 / CSS3 – Comment créer un fond rotatif «sans fin» – Panorama à 360 degrés

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

Je souhaite mettre en évidence les dates sur jquery datepicker où des événements sont associé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 (s) événement (s) avec leur URL dans un petit conseil contextuel, soit pour aller à la page de l’événement?

Existe-t-il déjà des plugins ou des ressources (comme des tutoriels) pour m’aider à atteindre ce but?

Merci.

PS: Je n’utilise pas le sélecteur de date pour choisir une date, mais uniquement pour accéder aux événements associés à une date.

PS2: Je vais l’utiliser sur un site multilingue (en anglais et en fr), c’est pourquoi j’ai pensé à Datepicker

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

Il y a quelques étapes à suivre:

  1. Initialiser le sélecteur de date en ligne. Attachez le widget datepicker à un

    afin qu’il apparaisse toujours et que vous n’ayez pas à l’attacher à une input : 

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

  2. beforeShowDay événement beforeShowDay pour mettre en surbrillance des dates avec des événements spécifiques. Définissez également vos événements dans un tableau que vous pouvez renseigner et envoyer au client:

    Tableau d’é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 paraître un peu complexe, mais tout ce que vous faites est de mettre en surbrillance les dates dans le sélecteur de date qui ont des entrées dans le tableau d’ events défini ci-dessus.

  3. Définissez un onSelect événement onSelect où vous pouvez indiquer au sélectionneur 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. Une fois que nous avons trouvé cet événement, vous pouvez prendre l’action de votre choix (afficher une info-bulle, par exemple).

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

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 d’ 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 atsortingbutes ;) } }); 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") }]);