ajouter un événement click à fullcalendar

Question

Comment puis-je ajouter un événement click sur un événement et passer le jour et l'heure de l'événement en tant que variable URL à une autre page? Lorsqu'un utilisateur clique sur un événement, je souhaite transmettre la date et l'heure de l'événement à une autre page pour traitement.

Answer 1

$('#calendar').fullCalendar({ 
    eventClick: function(calEvent, jsEvent, view) { 
     window.location = "http://www.domain.com?start=" + calEvent.start; 

    } 
}); 

Regardez ici pour plus d'informations: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Answer 2

Il y a un paramètre d'URL sur l'objet de l'événement. Cela créera simplement un < un tag >. Vous pouvez construire vous-même dans le back-end pour passer les arguments dont vous avez besoin sur l'url. La méthode javascript de @ durilai fonctionnerait aussi bien.

Answer 3

Bon, on dirait que j'ai répondu à ma propre question. La fonction Javascript escape() fait l'affaire.

Answer 4

Voilà comment j'appelle le dialogue et le remplir:

$('#calendar').fullCalendar({ 
    dayClick: function (date, allDay, jsEvent, view) { 
     $("#dialog").dialog('open'); 
    }, 
}); 

$("#dialog").dialog({ 
    autoOpen: false, 
    height: 350, 
    width: 700, 
    modal: true, 
    buttons: { 
     'Create event': function() { 
      $(this).dialog('close'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    }, 

    close: function() { 
    } 

}); 

Answer 5

rappel pour avoir cliqué sur la grille Date:

dayClick: function(date, allDay, jsEvent, view) { 
... 
} 

rappel pour l'événement en cliquant sur:

eventClick: function(event) { 
... 
} 

Vous pouvez essayer cette démo du monde réel: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

Answer 6

Je sais que c'est un post plus ancien mais je cherchais quelque chose de similaire ce matin. Je pense que ma solution était beaucoup plus simple après avoir examiné certaines des autres solutions. Je voulais afficher un événement sur mon calendrier lorsque l'utilisateur a cliqué sur l'événement. One thing is that I use font awesome in the anchor tag.

Donc, je codé une étiquette séparée comme ceci:

<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;"> 
    <a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br /> 
    Event: <span id="eventTitle" class="eventTitle"></span><br /> 
    Start: <span id="startTime" class="startTime"></span><br /> 
    End: <span id="endTime" class="endTime"></span><br /><br /> 
</div> 

Je trouve plus facile d'utiliser des noms de classe dans mon jquery depuis que je suis en utilisant asp.net.

Voici la jquery pour mon application fullcalendar.

<script> 

    $(document).ready(function() { 

     $('#calendar').fullCalendar({ 
      googleCalendarApiKey: 'APIKEY', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      events: { 
       googleCalendarId: '@group.calendar.google.com' 
      }, 
      eventClick: function (calEvent, jsEvent, view) { 
       var stime = calEvent.start.format('MM/DD/YYYY, h:mm a'); 
       var etime = calEvent.end.format('MM/DD/YYYY, h:mm a'); 
       var eTitle = calEvent.title; 
       var xpos = jsEvent.pageX; 
       var ypos = jsEvent.pageY; 
       $(".eventTitle").html(eTitle); 
       $(".startTime").html(stime); 
       $(".endTime").html(etime); 
       $(".eventContent").css('display', 'block'); 
       $(".eventContent").css('left', '25%'); 
       $(".eventContent").css('top', '30%'); 
       return false; 
      } 
     }); 
     $(".eventContent").click(function() { 
      $(".eventContent").css('display', 'none'); 
     }); 
    }); 

</script> 

Vous devez disposer de votre propre identifiant google calendar et de vos clés api.

J'espère que cette aide lorsque vous avez besoin d'un simple affichage de pop-up