Calendrier complet Rester sur la page

Je tente d'implémenter un calendrier via le calendrier complet. Je suis capable de faire tout ce dont j'ai besoin, sauf que j'essaye de charger une boîte de dialogue JQuery après qu'un utilisateur clique sur un événement. Je sais que retourner false dans la section "eventclick" le fera rester sur la page, mais ajouter n'importe quelle sorte de fonction semble nier cela. Je dois pouvoir charger la boîte de dialogue sans que cela ne m'amène à la page Google Agenda. Voici mon code:Calendrier complet Rester sur la page

<html> 
<link rel='stylesheet' href='fullcalendar-2.0.2/fullcalendar.css' /> 
<script src='fullcalendar-2.0.2/lib/jquery-1.10.2.js'></script> 
<script src='fullcalendar-2.0.2/lib/jquery-ui.custom.min.js'></script> 
<script src='fullcalendar-2.0.2/lib/moment.min.js'></script> 
<script src='fullcalendar-2.0.2/fullcalendar.js'></script> 
<script src='fullcalendar-2.0.2/gcal.js'></script> 

<div id='calendar' style="width:75%;height:75%"></div> 

<script> 


$(document).ready(function() { 



    $('#calendar').fullCalendar({ 
     events: 'https://www.google.com/calendar/feeds/myFeed', 

      eventClick: function(calEvent, jsEvent, view) {  
     var temp= loadDialog(calEvent.description,calEvent.location,calEvent.title); 
     return false; 
     } 

    }); 
}); 
</script> 


<script> 

$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: { 
     effect: "blind", 
     duration: 500 
     }, 
     hide: { 
     effect: "explode", 
     duration: 1000 
     } 
    }); 


    }); 

function loadDialog(description,location,title) 
{ 

$("#className").val(title); 
$("#location").val(location); 
$("#description").val(description); 
$("#dialog").dialog("open"); 
} 
return false; 
</script> 


<div id="dialog" title="Class Information"> 
    <h2 id="className"></h2></br> 
    <h1 id="location"></h1></br> 
    <div id="description"></div> 
</div> 

</html>

Merci comme toujours!

Source

2014-09-02 abronco33

Bien l'événement est toujours lié. Même si votre code a fonctionné, le href vous amène à une autre page. Alors, débarrassez-vous du lien. Voici comment je le fais:

$('#calendar').fullCalendar({ 
    events: 'https://www.google.com/calendar/feeds/myFeed', 
    eventRender: function (calEvent, element) { 
     element.attr('href', 'javascript:void(0);'); 
     element.attr('onclick', 'loadDialog("' + calEvent.description + '","' + calEvent.location + '","' + calEvent.title + '");'); 
    } 
});

Vous aurez également besoin de changer les .val( dans votre loadDialog-.html(. val est pour les éléments de formulaire.

Source

2014-09-03 23:51:35 MikeSmithDev

Parfait. Je vous remercie! – abronco33

Calendrier complet Rester sur la page

Répondre

Questions connexes