Comment rendre mon calendrier dynamique

Résolu
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

  1.  jordane45 Modérateur
    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.

    1. leeyoo
      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
  2. jordane45 Modérateur
    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....

    1. leeyoo
      Mon question avant l'affichage d'infobulle.... c'est comment rendre mon calendrier "DYNAMQUE" mon code est juste en HTML !!!
    2. jordane45 Modérateur
      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....
    3. leeyoo
      jordane45
      je peux le faire avec un code javascript ???
      si oui tu peut me donner un exemple svp
  3. DesTunK
    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 :)
    1. leeyoo
      Salut DesTunK,
      mon problème c'est d'afficher un calendrier sans cliquer sur l'input........
      ce n'est pas pour un formulaire... pour l'afficher dans la page d'accueil de mon site.
    2. DesTunK
      ALors enlève le déclenchement du bouton et met le directement sur ta page.
      Tu as tout ce dont tu as besoin dans ce code!
    3. leeyoo
      Mercii bien, je suis entrain de l'essayer..
      Mais je suis débutante en developpement

      c'est vraiment un peu difficile pour moi
    5. leeyoo
      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'
     });
    })
  4. prosthetiks
    Tu peux mettre à jour ton calendrier à la main une fois par jour.
    C'est du dynamique artisanal, et ça, c'est la classe.

    Discussions similaires

    Mettre une image à l'arrière plan et la rendre transparente
    Sss97

    2 réponses
    Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport
    Utilisateur anonyme

    13 réponses
    IP dynamique sous freebox
    Camille

    29 réponses