I plan to use two different periods in the same calendar.The only way I've found so far is to do it in two different calendars, like this:

$(".btn-show").click(function(e) { e.preventDefault(); el = $(this).data('element'); $(el).show(); $("section > div").not(el).hide(); }); $(document).on('click', '.dad-visita', function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { initialViews = 'timeGridWeek'; }else{ initialViews = 'timeGridWeek'; } var calendarEl = document.getElementById('calendario'); var today = moment().day(); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, locale: "pt-br", buttonText:{ today: 'Hoje', list: 'Lista' }, navLinks: true, firstDay: today, hiddenDays: [ 0 ], initialView: initialViews, editable: true, selectable: true, unselectAuto:true, eventOverlap: false, eventColor: '#f16621', slotDuration: '00:45', allDaySlot : false, eventStartEditable: false, eventDurationEditable:false, longPressDelay: 0, nowIndicator: "true", slotMinTime: '10:30', slotMaxTime: '12:00', contentHeight: 'auto', }); calendar.render(); }); $(document).on('click', '.dad-visita', function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { initialViews = 'timeGridWeek'; }else{ initialViews = 'timeGridWeek'; } var calendarEl = document.getElementById('calendario1'); var today = moment().day(); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, locale: "pt-br", buttonText:{ today: 'Hoje', list: 'Lista' }, navLinks: true, firstDay: today, hiddenDays: [ 0 ], initialView: initialViews, editable: true, selectable: true, unselectAuto:true, eventOverlap: false, eventColor: '#f16621', slotDuration: '00:45', allDaySlot : false, eventStartEditable: false, eventDurationEditable:false, longPressDelay: 0, nowIndicator: "true", slotMinTime: '14:30', slotMaxTime: '19:00', contentHeight: 'auto', }); calendar.render(); });

       Consultar Visitas  
 
 
 
 
 

但是这样我就必须有两个日历，这不是正确的方法。我必须这样做的原因是我需要 slotDuration 为 45 分钟，并且在早上它会正确假设事件的时间。

但是下午的活动从 14:30 开始，并且通过此 slotDuration，如果您将 slotMinTime 设置为 10:30，将 slotMaxTime 设置为 19:00，则下午活动的日历将从 14:15 开始，如示例所示：

$(".btn-show").click(function(e) { e.preventDefault(); el = $(this).data('element'); $(el).show(); $("section > div").not(el).hide(); }); $(document).on('click', '.dad-visita', function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { initialViews = 'timeGridWeek'; }else{ initialViews = 'timeGridWeek'; } var calendarEl = document.getElementById('calendario'); var today = moment().day(); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, locale: "pt-br", buttonText:{ today: 'Hoje', list: 'Lista' }, navLinks: true, firstDay: today, hiddenDays: [ 0 ], initialView: initialViews, editable: true, selectable: true, unselectAuto:true, eventOverlap: false, eventColor: '#f16621', slotDuration: '00:45', allDaySlot : false, eventStartEditable: false, eventDurationEditable:false, longPressDelay: 0, nowIndicator: "true", slotMinTime: '10:30', slotMaxTime: '19:00', contentHeight: 'auto', }); calendar.render(); });

       Consultar Visitas  
 
 
 
 
 

When starting at 14:15 it quickly returns the times I want for all the different afternoon events.

I still can't find a solution to this problem.

带有 selectAllow 的代码：

$(".btn-show").click(function(e) { e.preventDefault(); el = $(this).data('element'); $(el).show(); $("section > div").not(el).hide(); }); $(document).on('click', '.dad-visita', function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { initialViews = 'timeGridWeek'; }else{ initialViews = 'timeGridWeek'; } var calendarEl = document.getElementById('calendario'); var today = moment().day(); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay' }, locale: "pt-br", buttonText:{ today: 'Hoje', list: 'Lista' }, navLinks: true, firstDay: today, hiddenDays: [ 0 ], initialView: initialViews, editable: true, selectable: true, unselectAuto:true, eventOverlap: false, eventColor: '#f16621', slotDuration: '00:15', allDaySlot : false, eventStartEditable: false, eventDurationEditable:false, longPressDelay: 0, nowIndicator: "true", slotMinTime: '10:30', slotMaxTime: '19:00', contentHeight: 'auto', select: function(start, end) { var start1 = moment((start.startStr)).format('HH:mm:ss'); if(start1 == '14:15:00'){ $('#ModalAddVisit #start').val(moment((start.startStr)).format('YYYY-MM-DD' " " '14:30:00')); $('#ModalAddVisit #end').val(moment((start.startStr)).format('YYYY-MM-DD' " " '15:15:00')); $("#ModalAddVisit").modal("show"); } }, }); calendar.render(); });

          Consultar Visitas  
 
 
 
 
 
 
 
 
 
NOVA VISITA
  
 
 
 
 
  DATA/HORA INICIAL *  
 
  DATA/HORA FINAL *  
 
 
 Fechar Gravar