I want to have two time periods in fullcalendar defined by slotMinTime and slotMaxTime

Question

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();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>

<a href="s160" data-element="#minhaDiv160" class="btn-show dad-visita">
    <i class="metismenu-icon pe-7s-info"></i>
    Consultar Visitas
</a>

<section id="s160">
  <div style="display:none;" id="minhaDiv160">
    <div class="cal-wrapper"><div id='calendario'></div></div>
    <div class="cal-wrapper"><div id='calendario1'></div></div>
  </div>
</section>

但是这样我就必须有两个日历，这不是正确的方法。我必须这样做的原因是我需要 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();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>

<a href="s160" data-element="#minhaDiv160" class="btn-show dad-visita">
    <i class="metismenu-icon pe-7s-info"></i>
    Consultar Visitas
</a>

<section id="s160">
  <div style="display:none;" id="minhaDiv160">
    <div class="cal-wrapper"><div id='calendario'></div></div>
    <div class="cal-wrapper"><div id='calendario1'></div></div>
  </div>
</section>

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();
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<a href="s160" data-element="#minhaDiv160" class="btn-show dad-visita">
    <i class="metismenu-icon pe-7s-info"></i>
    Consultar Visitas
</a>

<section id="s160">
  <div style="display:none;" id="minhaDiv160">
    <div class="cal-wrapper"><div id='calendario'></div></div>
  </div>
</section>


<div class="modal fade" tabindex="-1" id="ModalAddVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">NOVA VISITA</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" class="row g-3 insvisit">
          <div class="row">
            <div class="col-6">
              <label for="start"> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="start" id="start" required>
            </div>
            <div class="col-6">
              <label for="end"> <strong>DATA/HORA FINAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="end" id="end" required>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary validatevisit" id="save-event">Gravar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

FullCalendar does not allow you to set two different minimum and maximum values ​​on the same calendar.

To work around this but still achieve your goal of enforcing a 45-minute period and taking a break at noon (when no activities can be created), you can

• Reduce slotDuration to 15 minutes, and
• Use selectAllow to limit the length of time period the user can actually select, and
• Use businessHours to mark unavailable periods, and use selectConstraint to ensure that users cannot add events during this period.

$(".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',
    selectConstraint: "businessHours",
    selectAllow: function(info) {
      var start = moment(info.start);
      var end = moment(info.end);
      var diff = end.diff(start, 'minutes');
      return (diff == 45);
    },
    businessHours: [
      {
        daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
        startTime: '10:00',
        endTime: '12:00'
      },
      {
        daysOfWeek: [0, 1, 2, 3, 4, 5, 6],
        startTime: '14:30',
        endTime: '19:00'
      }
    ],
    select: function(info) {
      var start1 = moment((info.startStr)).format('HH:mm:ss');
      $('#ModalAddVisit #start').val(moment((info.startStr)).format('YYYY-MM-DD' + " " + '14:30:00'));
      $('#ModalAddVisit #end').val(moment((info.startStr)).format('YYYY-MM-DD' + " " + '15:15:00'));
      $("#ModalAddVisit").modal("show");
    }
  });

  calendar.render();
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

<a href="s160" data-element="#minhaDiv160" class="btn-show dad-visita">
  <i class="metismenu-icon pe-7s-info"></i> Consultar Visitas
</a>

<section id="s160">
  <div style="display:none;" id="minhaDiv160">
    <div class="cal-wrapper">
      <div id='calendario'></div>
    </div>
  </div>
</section>


<div class="modal fade" tabindex="-1" id="ModalAddVisit" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">NOVA VISITA</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" class="row g-3 insvisit">
          <div class="row">
            <div class="col-6">
              <label for="start"> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="start" id="start" required>
            </div>
            <div class="col-6">
              <label for="end"> <strong>DATA/HORA FINAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="end" id="end" required>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            <button type="button" class="btn btn-primary validatevisit" id="save-event">Gravar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>