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>


A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
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
Réponse 2 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
leeyoo
 
Mon question avant l'affichage d'infobulle.... c'est comment rendre mon calendrier "DYNAMQUE" mon code est juste en HTML !!!
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
leeyoo
 
jordane45
je peux le faire avec un code javascript ???
si oui tu peut me donner un exemple svp
0
Réponse 3 / 4
DesTunK Messages postés 361 Date d'inscription   Statut Membre Dernière intervention   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
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
DesTunK Messages postés 361 Date d'inscription   Statut Membre Dernière intervention   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
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
DesTunK Messages postés 361 Date d'inscription   Statut Membre Dernière intervention   157
 
Sinon, en code sale, il y a ça : https://www.mathieuweb.fr/calendrier/calendrier-sur-son-site.php
0
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
Réponse 4 / 4
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   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

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

13 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses