0

Estoy trabajando con la librería de fullCalendar y me gustaría organizar los días de la semana siguiendo el siguiente patron.

introducir la descripción de la imagen aquí

Es decir que cada hora del día se subdivida en 3 partes. Es posible llevarlo a cabo?.

Recién empece a trabajar con esta librería y por el momento configure lo siguiente.

 
 $(document).ready(function() {
    $('#calendar').fullCalendar({
    	header: {
        	left: 'prev,next today',
        	center: 'title',
        	right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2018-11-11',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        weekend: true,
        minTime: '09:00:00',
        maxTime: '15:00:00',
        /*Click: function() {
    		
  		  }*/
    });
});

Muchas gracias.

4
  • Buenas, podrías publicar algo del código de lo que hayas intentado?
    – JCAguilera
    el 22 nov. 2018 a las 18:35
  • 1
    ok, ahi edito el post el 22 nov. 2018 a las 18:54
  • Generalmente los espacios donde pretendes colocar las horas (09:20 | 09:40...) se utilizan para mostrar los eventos colega; lo que podrias hacer es especificar esas horas, pero en la columna donde se muestra cada hora del día el 22 nov. 2018 a las 20:44
  • Ok, y como debería hacerlo?. Si me pudieras dar un ejemplo te agradecería. No necesariamente necesito que se muestre las horas (9:20|9:40), con que el se visualice 3 filas por hora 9:00 ( fila 1|fila 2|fila 3) para agregar eventos en esos espacios estaría mas bien. Gracias nuevamente el 22 nov. 2018 a las 20:51

1 respuesta 1

1

Como te mencioné en los comentarios, los espacios que deseas rellenar con los intervalos de 20 minutos, generalmente se utilizan para especificar cada evento en FullCalendar; una alternativa es la siguiente:

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  lang: 'es',
  weekends: false,
  columnFormat: 'dddd',
  //dayNames: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
  header: {
        	left: 'prev,next today',
        	center: 'title',
        	right: 'month,agendaWeek,agendaDay'
        },
  defaultDate: '2018-11-11',
  editable: true,
  eventLimit: true,
  weekend: true,
  allDaySlot: false,
  minTime: '09:00:00',
  maxTime: '15:00:00',
  slotDuration: '00:20:00',
  slotLabelInterval : '00:20:00',
  events:[
    {
      title: 'Titulo Evento',
      start: '2018-11-11T09:00:55.008',
      end: '2018-11-11T09:15:55.008'
    }
  ]
});
<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>

Especificas cada intervalo de 20 minutos con la propiedad slotLabelInterval y listo! Obviamente si deseas quitar el texto de los intervalos sólo debes comentar dicha linea o eliminarla.

Asimismo la propiedad encargada de "partir" cada hora en N intervalos es slotDuration

Ahora si quieres quitar los fines de semana sólo debes setear la propiedad weekends en false.

Y para que el calendario te quede en español, debes incluir el archivo es.js en tu código. Y setear columnFormat en formato dddd

Nos comentas si te sirve amigo

3
  • Perfecto, si utilice "slotDuration" para partir la hora en 3 intervalos. Te hago un ultima consulta. Se puede editar el head de la tabla para que solo se muestre lunes, martes,... y no de la forma lunes 11/11, martes 11/12 etc. Como así mismo desactivar los días sábados y domingos. el 22 nov. 2018 a las 21:21
  • @marcosvasquez Editada :) el 23 nov. 2018 a las 12:45
  • muchísimas gracias! el 23 nov. 2018 a las 14:49

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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