Saya mahu mempunyai dua tempoh masa dalam kalendar penuh yang ditakrifkan oleh slotMinTime dan slotMaxTime

Question

Saya bercadang untuk menggunakan dua tempoh berbeza dalam kalendar yang sama.Satu-satunya cara yang saya temui setakat ini ialah melakukannya dalam dua kalendar berbeza, seperti ini:

$(".btn-show").klik(fungsi(e) {
  e.preventDefault();
  el = $(this).data('elemen');
  $(el).tunjukkan();
  $("bahagian > 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';
     }lain{
          initialViews = 'timeGridWeek';
     }

     var calendarEl = document.getElementById('calendario');
     var today = moment().hari();

     var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            kiri: 'sebelumnya, hari ini seterusnya',
            pusat: 'tajuk',
            kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
        },
        tempat: "pt-br",

        butangTeks:{
            hari ini: 'Hoje',
            senarai: 'Lista'
        },

        navLinks: benar,
        hari pertama: hari ini,
        hiddenDays: [ 0 ],
        initialViews: initialViews,
        boleh disunting: benar,
        boleh dipilih: benar,
        nyahpilihAuto:benar,
        pertindihan acara: palsu,
        Warna acara: '#f16621',
        slotDuration: '00:45',
        allDaySlot : palsu,
        eventStartEditable: palsu,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: "benar",
        slotMinMasa: '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';
     }lain{
          initialViews = 'timeGridWeek';
     }

     var calendarEl = document.getElementById('calendario1');
     var today = moment().hari();

     var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            kiri: 'sebelumnya, hari ini seterusnya',
            pusat: 'tajuk',
            kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
        },
        tempat: "pt-br",

        butangTeks:{
            hari ini: 'Hoje',
            senarai: 'Lista'
        },

        navLinks: benar,
        hari pertama: hari ini,
        hiddenDays: [ 0 ],
        initialViews: initialViews,
        boleh disunting: benar,
        boleh dipilih: benar,
        nyahpilihAuto:benar,
        pertindihan acara: palsu,
        Warna acara: '#f16621',
        slotDuration: '00:45',
        allDaySlot : palsu,
        eventStartEditable: palsu,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: "benar",
        slotMinMasa: '14:30',
        slotMaxTime: '19:00',
        contentHeight: 'auto',

    });

    calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" lembaran gaya">
<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>
<skrip 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>
    Lawatan Perunding
</a>

<id bahagian="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>

Tetapi kemudian saya perlu mempunyai dua kalendar, yang bukan cara yang betul. Sebab saya perlu melakukan ini ialah saya memerlukan slotDuration menjadi 45 minit dan pada waktu pagi ia akan mengandaikan masa acara dengan betul.

Tetapi aktiviti petang bermula dari 14:30, dan dengan slotDuration ini, jika anda menetapkan slotMinTime kepada 10:30 dan slotMaxTime kepada 19:00, kalendar untuk aktiviti petang akan bermula dari 14:15, seperti Contoh ditunjukkan :

$(".btn-show").klik(fungsi(e) {
  e.preventDefault();
  el = $(this).data('elemen');
  $(el).tunjukkan();
  $("bahagian > 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';
     }lain{
          initialViews = 'timeGridWeek';
     }

     var calendarEl = document.getElementById('calendario');
     var today = moment().hari();

     var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            kiri: 'sebelumnya, hari ini seterusnya',
            pusat: 'tajuk',
            kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
        },
        tempat: "pt-br",

        butangTeks:{
            hari ini: 'Hoje',
            senarai: 'Lista'
        },

        navLinks: benar,
        hari pertama: hari ini,
        hiddenDays: [ 0 ],
        initialViews: initialViews,
        boleh disunting: benar,
        boleh dipilih: benar,
        nyahpilihAuto:benar,
        pertindihan acara: palsu,
        Warna acara: '#f16621',
        slotDuration: '00:45',
        allDaySlot : palsu,
        eventStartEditable: palsu,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: "benar",
        slotMinMasa: '10:30',
        slotMaxTime: '19:00',
        contentHeight: 'auto',

    });

    calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" lembaran gaya">
<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>
<skrip 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>
    Lawatan Perunding
</a>

<id bahagian="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>

Apabila bermula pada 14:15, ia cepat mengembalikan masa yang saya inginkan untuk semua acara petang yang berbeza.

Saya masih tidak dapat mencari penyelesaian untuk masalah ini.

带有 pilih Benarkan 的代码：

$(".btn-show").klik(fungsi(e) {
  e.preventDefault();
  el = $(this).data('elemen');
  $(el).tunjukkan();
  $("bahagian > 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';
     }lain{
          initialViews = 'timeGridWeek';
     }  

     var calendarEl = document.getElementById('calendario');
     var today = moment().hari();

     var calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            kiri: 'sebelumnya, hari ini seterusnya',
            pusat: 'tajuk',
            kanan: 'dayGridMonth, timeGridWeek, timeGridDay'
        },
        tempat: "pt-br",

        butangTeks:{
            hari ini: 'Hoje',
            senarai: 'Lista'
        },

        navLinks: benar,             
        hari pertama: hari ini,
        hiddenDays: [ 0 ],
        initialViews: initialViews,
        boleh disunting: benar,
        boleh dipilih: benar, 
        nyahpilihAuto:benar,
        pertindihan acara: palsu,
        Warna acara: '#f16621', 
        slotDuration: '00:15',
        allDaySlot : palsu,
        eventStartEditable: palsu,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: "benar",
        slotMinMasa: '10:30',
        slotMaxTime: '19:00',
        contentHeight: 'auto',
        
        pilih: fungsi(mula, tamat) {
            var start1 = moment((start.startStr)).format('HH:mm:ss');
            jika(mula1 == '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();
});</pra>
<pre class="brush:html;toolbar:false;"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/ bootstrap.min.css">
<pautan 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>
<skrip 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>
    Lawatan Perunding
</a>

<id bahagian="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="statik" 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 untuk="mula"> <strong>DATA/HORA INICIAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="start" id="start" diperlukan>
            </div>
            <div class="col-6">
              <label untuk="end"> <strong>DATA/HORA FINAL</strong> <span style="color: red;">*</span></label>
              <input type="text" name="end" id="end" diperlukan>
            </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 tidak membenarkan anda menetapkan dua nilai minimum dan maksimum berbeza pada kalendar yang sama.

Untuk membetulkan perkara ini tetapi masih mencapai matlamat anda untuk menguatkuasakan tetingkap 45 minit dan berehat pada tengah hari (apabila tiada aktiviti boleh dibuat), anda boleh

• Kurangkan slotDuration kepada 15 minit dan
• Gunakan selectAllow untuk mengehadkan tempoh masa yang sebenarnya boleh dipilih oleh pengguna, dan
• Gunakan businessHours untuk menandakan tempoh yang tidak tersedia dan gunakan selectConstraint untuk memastikan pengguna tidak boleh menambah acara dalam tempoh ini.

$(".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>