Comment rendre mon calendrier dynamique

Résolu/Fermé
Signaler
-
 leeyoo -
Bonjour,
comment rendre mon calendrier dynamique avec un info bulle en cliquant sur le jour qui va afficher le nombre d"événement avec ce code
c urgent svp !!!
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; z-index: 1;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">MAI</span> <span class="ui-datepicker-year">2015</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">D</span></th><th><span title="Monday">L</span></th><th><span title="Tuesday">M</span></th><th><span title="Wednesday">M</span></th><th><span title="Thursday">J</span></th><th><span title="Friday">V</span></th><th class="ui-datepicker-week-end"><span title="Saturday">S</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">1</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">2</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">3</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">4</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a  class="ui-state-default" href="#">5</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">6</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">7</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">8</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">9</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">10</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">11</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">12</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">13</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">14</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">15</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">16</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">17</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">18</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">19</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">20</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">21</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">22</a></td><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">23</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">24</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">25</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">26</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">27</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">28</a></td><td class=" " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">29</a></td><td class=" ui-datepicker-week-end ui-datepicker-days-cell-over  ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default ui-state-highlight" href="#">30</a></td></tr><tr><td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="4" data-year="2015"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td></tr></tbody></table></div>


4 réponses

Messages postés
34203
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2021
3 852
Bonjour,
L'urgence n'est "que" pour toi..... cela n'apporte rien de le préciser... et au contraire.. à tendance à freiner les personnes qui pourraient éventuellement t'aider !

De plus.. quelle est la question exactement ??
- Comment créer une INFO-BULLE ?
=> Pour cela.. tu pourrais t'insprier de ça :
http://jsfiddle.net/A44EB/
// tt étant l' ID de l'élément html sur lequel tu veux cliquer pour faire apparaitre
// le tooltip.
$('#tt').click(function() {
    $('#tt').tooltip({ items: "#tt", content: "Displaying on click"});
    $('#tt').tooltip("open");
});


Bien sûr.. tu peux remplacer le "content" par ce que tu veux... voir même utiliser de l'AJAX pour aller chercher les infos en BDD par exemple.

Merci beaucoup jordane45 !!
Mon question c'est de rendre mon calendrier dynamique c'est a dire passer les mois et les jours car mon code ci-dessus est juste un affichage simple d'un calendrier statique...!
j'espère bien que tu comprend mon idée
Messages postés
34203
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2021
3 852
c'est a dire passer les mois et les jour

??? .... que veux tu dire par "passer" ?

Sachant que ta question initiale est :
avec un info bulle en cliquant sur le jour qui va afficher le nombre d"événement

Hors... les informations que je t'ai donné... devraient convenir pour réaliser ceci....



Mon question avant l'affichage d'infobulle.... c'est comment rendre mon calendrier "DYNAMQUE" mon code est juste en HTML !!!
Messages postés
34203
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 novembre 2021
3 852
Pour faire du "dynamique" .. il te faudra autre chose que tu html ...
du PHP par exemple pour pouvoir relier ton calendrier à une base de données....
jordane45
je peux le faire avec un code javascript ???
si oui tu peut me donner un exemple svp
Messages postés
360
Date d'inscription
dimanche 27 janvier 2013
Statut
Membre
Dernière intervention
24 février 2016
158
Un truc dans ce genre là ?

https://jqueryui.com/datepicker/#icon-trigger

Après, si tu veux en savoir plus, à toi de faire des recherches :)
Mercii bien, je suis entrain de l'essayer..
Mais je suis débutante en developpement

c'est vraiment un peu difficile pour moi
Messages postés
360
Date d'inscription
dimanche 27 janvier 2013
Statut
Membre
Dernière intervention
24 février 2016
158
j'ai teste ce code la mais comment faire pour afficher directement le calendrier sans cliquer sur l'input http://jsfiddle.net/A44EB/651/

$(function() {
     $( "#datepicker" ).datepicker({
          showOn: 'both'
     });
    })
Messages postés
360
Date d'inscription
dimanche 27 janvier 2013
Statut
Membre
Dernière intervention
24 février 2016
158
>
Messages postés
360
Date d'inscription
dimanche 27 janvier 2013
Statut
Membre
Dernière intervention
24 février 2016

Super :D Merci beaucoup :)
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
430
Tu peux mettre à jour ton calendrier à la main une fois par jour.
C'est du dynamique artisanal, et ça, c'est la classe.