aggiunta di un evento click a fullcalendar

Question

Come posso aggiungere un evento click su un evento e passare il giorno e l'ora dell'evento come una variabile url su un'altra pagina? Quando un utente fa clic su un evento, voglio passare la data e l'ora dell'evento in un'altra pagina per l'elaborazione.

Answer 1

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

    } 
}); 

Guardate qui per ulteriori informazioni: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Answer 2

C'è un parametro URL sull'oggetto evento. Questo creerà solo un tag <a>. Potresti costruirlo nel back end per passare qualsiasi argomento di cui hai bisogno sull'URL. Anche il metodo javascript di @ durilai funzionerebbe.

Answer 3

Ok, sembra che abbia risposto alla mia stessa domanda. La funzione Javascript escape() fa il trucco.

Answer 4

Ecco come io chiamo la finestra di dialogo e popolarlo:

$('#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

callback per cliccando data grid:

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

callback per l'evento cliccando:

eventClick: function(event) { 
... 
} 

si può provare questo demo del mondo reale: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

Answer 6

So che questo è un post più vecchio ma stavo cercando qualcosa di simile stamattina. Sento che la mia soluzione è stata molto più semplice dopo aver esaminato alcune delle altre soluzioni. One thing is that I use font awesome in the anchor tag.

Volevo visualizzare un evento sul mio calendario quando l'utente ha fatto clic sull'evento. Così ho codificato un tag separato in questo modo:

<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> 

trovo più facile da usare i nomi delle classi nel mio jQuery dal momento che sto usando asp.net.

Di seguito è riportato il jquery per la mia app 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> 

È necessario disporre del proprio ID calendario di Google e delle chiavi API.

Spero che questo aiuta quando hai bisogno di una semplice visualizzazione di popup