1

Buenas necesito por javascript o jquery saber si se ha pulsado o hecho clic en el botón de día semana o mes de fullcalendar.

ya el fullcalendar funciona se crea dinamicamente desde javascript agrega eventos etc. en el hay en este momento tres botones vease en el siguiente fragmento;

header: {
         left: 'agendaDay,agendaWeek,month',
         center: 'title',
         right: ''
        }, 

en si necesito que cuando se de clic ya sea en los botones :agendaDay, agendaWeek o en month saber que se da clic porque full calendar agrega clases y no id y no se como tomar estos valores. por ejemplo con los botones siguiente y atras se puede hacer esto:

en el html :

<button id='next'><span  class='fc-text-arrow'><strong >›</strong></span></button>

en javascript:

$('#prev').on('click', function() {
        $('#CalendarioWeb').fullCalendar('prev')
        actualizarComboBoxFechas(moment().day())   
    })

Pero con los botones de día semana y mes no sirve, en la documentación no sale nada "según lo que he leído" y por javascript intente esto:

document.getElementsByClassName("fc-agendaDay-button").id="btnDia";

para intentar asignar id al boton del dia se agrega esto pero no dentro del elemento en especifico por lo tanto cuando pulso clic no llama a ningún evento ojo probe con un alert("etc")

2

2 respuestas 2

1

Para saber cuál botón se ha pulsado puedes utilizar la clase genérica CSS que utilizan los botones de la barra y filtrar por el contenido de su texto. Este ejemplo imprimirá en la consola el texto del botón pulsado ('week','day','list','month') con lo que ya puedes filtrar

  $('.fc-button').click(function(e){
      console.log($(this).text())
  })

Y una opción alternativa y válida es agregar un evento para cada botón:

  $('.fc-agendaDay-button').click(function(){
        //hacer lo que debes hacer
  });
  $('.fc-agendaWeek-button').click(function(){
        //hacer lo que debes hacer
  });
  $('.fc-month-button').click(function(){
        //hacer lo que debes hacer
  });

En cualquiera de los dos casos debes colocar este código una vez inicializado el componente o utilizar el evento eventAfterAllRender

2
  • Muchas gracias nerdcoder por la solución ofrecida es lo que buscaba. eventAfterAllRender: function(){ $('.fc-button').click(function(e){ console.log($(this).text()) }) } Commented el 26 nov. 2018 a las 21:39
  • ¿Solucionó tu problema, @ErwisÁlvarez? Por favor no olvides marcar la respuesta como aceptada si tu problema se solucionó. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda! Commented el 10 sept. 2019 a las 20:11
0

Según la librería de FullCalendar, esa es la forma correcta de obtener el día, mes y año dependiendo del día al que le des click:

$(document).ready(function() {
    $('#calendar').fullCalendar({
     dayClick: function(date, jsEvent, view) {
        console.log(date.month()); //day of the week: 1 for monday
        console.log(date.get('date')); //day of month: 20 for today
        console.log(date.year());
     }
    });
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<div id='calendar'></div>

Tiene su función llamada dayClick que es la que se encarga de todo.

Espero te sirva. Saludos.

2
  • Ojo Ricardo que desea saber cuál botón ha pulsado el usuario de la barra de botones dia, semana o mes, no los días del calendario
    – nerdcoder
    Commented el 26 nov. 2018 a las 19:31
  • Gracias por responder Ricardo. pero la observación de nerdcoder es apropiada. igual la respuesta de abajo de nerdcoder me ha funcionado. Gracias y feliz día. Commented el 26 nov. 2018 a las 21:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.