agregando un evento de clic a fullcalendar

Question

¿Cómo puedo agregar un evento de clic en un evento y pasar el día y la hora del evento como una variable de url a otra página? Cuando un usuario hace clic en un evento, quiero pasar la fecha y la hora del evento a otra página para su procesamiento.

Answer 1

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

    } 
}); 

Mire aquí para más información: http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Answer 2

Hay un parámetro de URL en el objeto de evento. Esto solo creará una etiqueta <a>. Puede construir esto en la parte posterior usted mismo para pasar cualquier argumento que necesite sobre la url. El método javascript de @ durilai también funcionaría.

Answer 3

De acuerdo, parece que respondí mi propia pregunta. La función Javascript escape() hace el truco.

Answer 4

Así es como yo llamo el diálogo y lo pueblan:

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

de devolución de llamada para hacer clic en la fecha de cuadrícula:

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

de devolución de llamada para hacer clic en evento:

eventClick: function(event) { 
... 
} 

puede probar esta demo del mundo real: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

Answer 6

Sé que esta es una publicación anterior pero estaba buscando algo similar esta mañana. Siento que mi solución fue mucho más simple después de revisar algunas de las otras soluciones. One thing is that I use font awesome in the anchor tag.

Quería mostrar un evento en mi calendario cuando el usuario hizo clic en el evento. Así codifiqué una etiqueta separada de este 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> 

Me resulta más fácil de usar nombres de clase en mi jQuery Desde que estoy usando asp.net.

A continuación se muestra el jquery de mi aplicación de calendario completo.

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

Debe tener su propia identificación de calendario de Google y las claves de la API.

espero que esto ayuda cuando se necesita una pantalla emergente sencilla