Sujet Précédent Sujet Suivant

Comment rendre mon calendrier dynamique

Résolu/Fermé
leeyoo - Modifié par leeyoo le 10/06/2015 à 11:12
 leeyoo - 10 juin 2015 à 15:36
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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 juin 2015 à 11:23
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
10 juin 2015 à 11:57
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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 juin 2015 à 12:01
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
10 juin 2015 à 12:11
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 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 juin 2015 à 12:21
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
10 juin 2015 à 13:32
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 360 Date d'inscription dimanche 27 janvier 2013 Statut Membre Dernière intervention 24 février 2016 157
10 juin 2015 à 12:22
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
10 juin 2015 à 13:30
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 360 Date d'inscription dimanche 27 janvier 2013 Statut Membre Dernière intervention 24 février 2016 157
10 juin 2015 à 13:37
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
10 juin 2015 à 13:47
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 360 Date d'inscription dimanche 27 janvier 2013 Statut Membre Dernière intervention 24 février 2016 157
10 juin 2015 à 14:14
Sinon, en code sale, il y a ça : https://www.mathieuweb.fr/calendrier/calendrier-sur-son-site.php
0
leeyoo
Modifié par leeyoo le 10/06/2015 à 15:18
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 dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
10 juin 2015 à 13:41
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
rendre un texte flou plus net
lulubidon -
m00kka -

3 réponses
Tableau croisé dynamique : différence entre deux colonnes
jds2016 -
sal -

6 réponses