如何限制FullCalendar资源时间线视图的显示小时范围？

要让resourceTimelineDay视图显示完整24小时，你需要在FullCalendar的配置中添加slotMinTime和slotMaxTime两个核心参数，指定时间范围的起止点。

修改后的核心配置代码 #

将以下配置项插入到你的日历初始化对象中（例如放在initialView之后）：

calendario1 = new FullCalendar.Calendar(calendarEl, {
  timeZone: 'local',
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  initialView: 'resourceTimelineDay',
  // 新增：控制显示的时间范围
  slotMinTime: '00:00:00', // 从凌晨0点开始显示
  slotMaxTime: '24:00:00', // 到次日0点结束，覆盖完整24小时
  // 可选：调整时间槽间距（匹配你的期望效果）
  slotDuration: '01:00:00', // 每个时间槽代表1小时，可改为'00:30:00'缩小间距
  aspectRatio: 1.5,
  locale: 'es',
  // 原有其他配置...
});

参数说明 #

• slotMinTime：定义日历显示的最早时间，格式为HH:mm:ss，设置为00:00:00确保从凌晨开始。
• slotMaxTime：定义日历显示的最晚时间，设置为24:00:00会覆盖完整的一天周期。
• slotDuration：可选参数，控制每个时间槽的时长，调整它可以改变时间线的间距，比如设为00:30:00会显示30分钟间隔的时间槽。

完整修改后的代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendario1');
  var taller = '<?php echo $tare;?>'
  var user = '<?php echo $ctrl_user;?>'
  var userfiltro = '0'
  calendario1 = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'local',
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    initialView: 'resourceTimelineDay',
    // 添加时间范围控制
    slotMinTime: '00:00:00',
    slotMaxTime: '24:00:00',
    slotDuration: '01:00:00',
    aspectRatio: 1.5,
    locale: 'es',
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Trabajadores',
    resources: 'datoseventos.php?accion=listarempleados&taller=' + taller + '&user=' + user + '&user_filtro=' +userfiltro,
    events: 'testurl.php?accion=listar&taller=' + taller + '&user=' + user + '&user_filtro=' +userfiltro,
    dateClick: function(info) {
      console.log("ES "+JSON.stringify(info));
      limpiarFormulario();
      $('#BotonAgregar').show();
      $('#BotonModificar').hide();
      $('#BotonOt').hide();
      $('#BotonBorrar').hide();
      $('#iduser').val(info.resource.id);
      if (info.allDay) {
          $('#FechaInicio').val(info.dateStr);
          $('#FechaFin').val(info.dateStr);
      } else {
          let fechaHora = info.dateStr.split("T");
          var horainit = fechaHora[1].substring(0, 5);
          var horafin = (parseInt(horainit) + parseInt(1))+":00";
          $('#FechaInicio').val(fechaHora[0]);
          $('#FechaFin').val(fechaHora[0]);
          $('#HoraInicio').val(fechaHora[1].substring(0, 5));
          $('#HoraFin').val(horafin);
      }
      $("#FormularioEventos").modal();
    },
    eventClick: function(info) {
      console.log("EL RES ES "+JSON.stringify(info.event));
      console.log("LA HORA ES "+moment(info.event.start).format("HH:mm"));
      $('#BotonModificar').show();
      if (info.event.extendedProps.idtra != 0) {
          if (info.event.extendedProps.tipo_parte != 0) {
              $('#BotonOt').attr("href", "./modifica_parte_contado.php?id=" + info.event.extendedProps.idtra).show();
          } else {
              $('#BotonOt').attr("href", "./modifica_parte_cia.php?id=" + info.event.extendedProps.idtra).show();
          }
      } else {
          $('#BotonOt').hide();
      }
      $('#BotonBorrar').show();
      $('#BotonAgregar').hide();
      $('#Codigo').val(info.event.id);
      $('#iduser').val(info.event.extendedProps.iduser);
      $('#idtra').val(info.event.idtra);
      $('#Titulo').val(info.event.title);
      $('#Descripcion').val(info.event.extendedProps.descripcion);
      $('#FechaInicio').val(moment(info.event.start).format("YYYY-MM-DD"));
      $('#FechaFin').val(moment(info.event.end).format("YYYY-MM-DD"));
      $('#HoraInicio').val(moment(info.event.start).format("HH:mm"));
      $('#HoraFin').val(moment(info.event.end).format("HH:mm"));
      $('#ColorFondo').val(info.event.backgroundColor);
      $('#ColorTexto').val(info.event.textColor);
      $("#FormularioEventos").modal();
    },
    eventResize: function(info) {
      $('#Codigo').val(info.event.id);
      $('#Titulo').val(info.event.title);
      $('#iduser').val(info.event.extendedProps.iduser);
      $('#FechaInicio').val(moment(info.event.start).format("YYYY-MM-DD"));
      $('#FechaFin').val(moment(info.event.end).format("YYYY-MM-DD"));
      $('#HoraInicio').val(moment(info.event.start).format("HH:mm"));
      $('#HoraFin').val(moment(info.event.end).format("HH:mm"));
      $('#ColorFondo').val(info.event.backgroundColor);
      $('#ColorTexto').val(info.event.textColor);
      $('#Descripcion').val(info.event.extendedProps.descripcion);
      let registro = recuperarDatosFormulario();
      modificarRegistro(registro);
    },
    eventDrop: function(info) {
      $('#Codigo').val(info.event.id);
      $('#Titulo').val(info.event.title);
      $('#iduser').val(info.event.extendedProps.iduser);
      $('#FechaInicio').val(moment(info.event.start).format("YYYY-MM-DD"));
      $('#FechaFin').val(moment(info.event.end).format("YYYY-MM-DD"));
      $('#HoraInicio').val(moment(info.event.start).format("HH:mm"));
      $('#HoraFin').val(moment(info.event.end).format("HH:mm"));
      $('#ColorFondo').val(info.event.backgroundColor);
      $('#ColorTexto').val(info.event.textColor);
      $('#Descripcion').val(info.event.extendedProps.descripcion);
      let registro = recuperarDatosFormulario();
      modificarRegistro(registro);
    },
    drop: function(info) {
      limpiarFormulario();
      $('#ColorFondo').val(info.draggedEl.dataset.colorfondo);
      $('#ColorTexto').val(info.draggedEl.dataset.colortexto);
      $('#Titulo').val(info.draggedEl.dataset.titulo);
      let fechaHora = info.dateStr.split("T");
      $('#FechaInicio').val(fechaHora[0]);
      $('#FechaFin').val(fechaHora[0]);
      $('#tiempocita').val(info.draggedEl.dataset.tiempocita);
      if (info.allDay) {
          $('#HoraInicio').val(info.draggedEl.dataset.horainicio);
          $('#HoraFin').val(info.draggedEl.dataset.horafin);
      } else {
          $('#HoraInicio').val(fechaHora[1].substring(0, 5));
          $('#HoraFin').val(moment(fechaHora[1].substring(0, 5)).add(1, 'hours'));
      }
      let registro = recuperarDatosFormulario();
      agregarEventoPredefinido(registro);
    }
  });

  calendario1.render();
});

内容的提问来源于stack exchange，提问作者Francisco S