Comment rendre mon calendrier dynamique

Résolu
leeyoo -  
 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 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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.

    0
    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
      0
  2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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....

    0
    1. leeyoo
       
      Mon question avant l'affichage d'infobulle.... c'est comment rendre mon calendrier "DYNAMQUE" mon code est juste en HTML !!!
      0
    2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      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....
      0
    3. leeyoo
       
      jordane45
      je peux le faire avec un code javascript ???
      si oui tu peut me donner un exemple svp
      0
  3. DesTunK Messages postés 392 Statut Membre 157
     
    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 :)
    0
    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.
      0
    2. DesTunK Messages postés 392 Statut Membre 157
       
      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!
      0
    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
      0
    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'
     });
    })
      0
  4. prosthetiks Messages postés 1309 Statut Membre 431
     
    Tu peux mettre à jour ton calendrier à la main une fois par jour.
    C'est du dynamique artisanal, et ça, c'est la classe.
    0

Discussions similaires

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

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

13 réponses