0

Quisiera saber como puedo hacer para seleccionar la semana completa a partir de un día particular en fullCalendar. Se me ocurre mediante el evento dayClick, el tema que hasta el momento solo he podido obtener el día, pero me gustaría saber toda la semana algo así como se muestra en la imagen.

introducir la descripción de la imagen aquí

hasta el momento tengo el calendario configurado de esta manera.

 $(document).ready(function() {
    $('#calendar').fullCalendar({
    	//defaultView: 'agendaWeek',
  		//lang: 'es',
  		weekends: false,
  		columnFormat: 'dddd',
  		header: {
        	left: 'prev,next',
        	center: 'title',
        	right: 'month'
        },
        editable: true,
  		eventLimit: true,
  		weekend: true,
  		allDaySlot: false,
  		dayClick: function(date, jsEvent, view) {
  			var dia = date.format();
  			alert(dia);
  		}
  		
    });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" id="calendar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/es.js"></script>

Muchas Gracias.

3
  • "Seleccionar la semana" significa saber cuales son las fechas de inicio y fin o te refieres a algún cambio visual en tu componente?
    – devconcept
    Commented el 26 nov. 2018 a las 22:37
  • Me refiero a: Supongamos que se hiso clic en el día miércoles 7 entonces deberia mostrar esa semana, es decir visualmente debería ver lunes 5, martes 6, miercoles 7, jueves 8 y viernes 9 como la imagen que adjunte en mi pregunta. Commented el 27 nov. 2018 a las 12:40
  • Ninguna de las vistas de fullcalendar coincide con tu foto. Creo que deberías editar la pregunta e incluir la parte que muestra la semana
    – devconcept
    Commented el 27 nov. 2018 a las 13:49

1 respuesta 1

0

En base a lo que entendí y a lo que colocas en tus comentarios, lo que necesitas es una función como la siguiente, donde obtienes los 5 días entre semana a partir de el date obtenido por medio del click, en esta función lo que se hace es imprimir esos 5 días:

$(document).ready(function() {
    $('#calendar').fullCalendar({
     //defaultView: 'agendaWeek',
    //lang: 'es',
    weekends: false,
    columnFormat: 'dddd',
    header: {
         left: 'prev,next',
         center: 'title',
         right: 'month'
        },
        editable: true,
    eventLimit: true,
    weekend: true,
    allDaySlot: false,
    dayClick: function(date, jsEvent, view) {
     //var dia = date.format();
        //console.log(dia);
        
        var date2 = new Date(date);
        var day = date2.getDay();
        var array = []
        for(var i=0;i<5;i++){
        if(i-day!=0){
          var days = i-day;
          var newDate =   new Date(date2.getTime()+(days * 24 * 60 * 60 * 1000));
          array.push(newDate);
        }
        else 
          array.push(date2);
        }    
    console.log(array);
        
    }
    
    });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" id="calendar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/locale/es.js"></script>

Como mencionaste de ejemplo, al momento de dar click en miércoles 7 (hablando del mes de noviembre del presente año), te imprime lunes 5, martes 6, miercoles 7, jueves 8 y viernes 9.

Espero te ayude. Saludos.

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.