Pregunta ¿Activa externamente el método 'dayClick' de FullCalendar?


Estoy usando FullCalendar de Arshaw y estoy buscando simular que un usuario haga clic en una celda una vez que la página se haya cargado. Estoy tratando de hacer esto para poder ir a una URL como /Calendar/AddEvent y el calendario automáticamente abrirá un diálogo con mi formulario agregar evento en.

Tome la siguiente configuración: (Violín aquí)

HTML 

<div>
    <div id="calendar" data-year="2013" data-month="04" ></div>
</div>

jQuery

$('#calendar').fullCalendar({
        firstDay: 1,
        selectable: true,
        dayClick: function (start, allDay, jsEvent, view) {
                    alert('You clicked me!');
        }
    });

Por defecto, la celda de hoy tiene la clase .fc-today que he tratado de aprovechar haciendo lo siguiente:

$('.fc-today').trigger('click');

Sin embargo, esto no parece funcionar. De todos modos, podría hacer algo como

$('#calendar').fullCalendar('dayClick', date)

Cualquier ayuda es apreciada.


7
2018-04-04 16:12


origen


Respuestas:


Me encontré con este problema en mi caso de uso también, y esto es lo que encontré que funciona para mí, después de buscar en el código fuente completo del calendario. Necesita crear manualmente un mousedown y mouseup evento (técnicamente el mouseup es opcional, pero puede usarlo para restablecer el estado de "clic" de la td), que contiene las coordenadas de la posición X e Y del elemento que desea "hacer clic". También es importante el which parámetro, que debe configurarse para 1 de modo que pasa el isPrimaryMouseButton comprobar.

Con esto en mente, el código se vería así (nota que cambié el $('#click') usar un mousedown evento para que solo se ejecute una vez):

$('#click').on('mousedown', function () { 
    var today = $('td.fc-today');
    var down = new $.Event("mousedown");
    var up = new $.Event("mouseup");
    down.which = up.which = 1;
    down.pageX = up.pageX = today.offset().left;
    down.pageY = up.pageY = today.offset().top;
    today.trigger(down);
    today.trigger(up); //this is optional if you just want the dayClick event, but running this allows you to reset the 'clicked' state of the <td>
});

Aquí hay un violín que funciona: http://jsfiddle.net/vyxte25r/


4
2017-12-10 03:16



Puedes usar jquery trigger evento en div dentro td con fc-today clase:

 $('td.fc-today div').trigger('click');

0
2018-04-05 07:15



La modificación de la respuesta de Kevin me funcionó un poco. Necesitaba hacer que el evento dayClick fuera accesible por teclado. Agregar el detector de eventos a cada celda utilizando el método dayRender nos permite manejar fácilmente el evento dayClick para cada día. Así es como lo logré:

dayRender: function(date, cell) {
  // Allow keyboard to access and interact with calendar days
  $(cell).attr("tabindex", "0").on("keydown", function(e) {
    if (e.which === 32 || e.which === 13) {
      var day = $(this);
      var down = new $.Event("mousedown");
      var up = new $.Event("mouseup");
      var eventParams = { which: 1, pageX: day.offset().left, pageY: day.offset().top };

      day.trigger($.extend(true, {}, down, eventParams));
      day.trigger($.extend(true, {}, up, eventParams));
    }
  });
}

Documentación relevante: https://fullcalendar.io/docs/display/dayRender/


0
2018-04-20 21:15