Ich möchte zwei Zeiträume im Vollkalender haben, die durch „slotMinTime“ und „slotMaxTime“ definiert sind

Question

Ich habe vor, zwei verschiedene Zeiträume im selben Kalender zu verwenden.Die einzige Möglichkeit, die ich bisher gefunden habe, besteht darin, dies in zwei verschiedenen Kalendern zu tun, etwa so:

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("Abschnitt > 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';
     }anders{
          initialViews = 'timeGridWeek';
     }

     var CalendarEl = document.getElementById('calendario');
     var today = moment().day();

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            links: 'vorheriges,nächstes heute',
            Mitte: 'Titel',
            rechts: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        Gebietsschema: „pt-br“,

        Schaltflächentext:{
            heute: 'Hoje',
            Liste: 'Liste'
        },

        navLinks: wahr,
        erster Tag: heute,
        versteckte Tage: [ 0 ],
        initialView: initialViews,
        editierbar: wahr,
        wählbar: wahr,
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621',
        SlotDuration: '00:45',
        allDaySlot: false,
        eventStartEditable: false,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: „wahr“,
        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';
     }anders{
          initialViews = 'timeGridWeek';
     }

     var CalendarEl = document.getElementById('calendario1');
     var today = moment().day();

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            links: 'vorheriges,nächstes heute',
            Mitte: 'Titel',
            rechts: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        Gebietsschema: „pt-br“,

        Schaltflächentext:{
            heute: 'Hoje',
            Liste: 'Liste'
        },

        navLinks: wahr,
        erster Tag: heute,
        versteckte Tage: [ 0 ],
        initialView: initialViews,
        editierbar: wahr,
        wählbar: wahr,
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621',
        SlotDuration: '00:45',
        allDaySlot: false,
        eventStartEditable: false,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: „wahr“,
        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>

<Abschnitts-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>

Aber dann muss ich zwei Kalender haben, was nicht der richtige Weg ist. Der Grund, warum ich das tun muss, ist, dass ich die SlotDuration auf 45 Minuten benötige und morgens die Zeit des Ereignisses korrekt annimmt.

Aber die Nachmittagsaktivität beginnt um 14:30 Uhr. Wenn Sie bei dieser SlotDuration SlotMinTime auf 10:30 Uhr und SlotMaxTime auf 19:00 Uhr festlegen, beginnt der Kalender für die Nachmittagsaktivität um 14:15 Uhr, wie im Beispiel gezeigt :

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("Abschnitt > 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';
     }anders{
          initialViews = 'timeGridWeek';
     }

     var CalendarEl = document.getElementById('calendario');
     var today = moment().day();

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            links: 'vorheriges,nächstes heute',
            Mitte: 'Titel',
            rechts: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        Gebietsschema: „pt-br“,

        Schaltflächentext:{
            heute: 'Hoje',
            Liste: 'Liste'
        },

        navLinks: wahr,
        erster Tag: heute,
        versteckte Tage: [ 0 ],
        initialView: initialViews,
        editierbar: wahr,
        wählbar: wahr,
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621',
        SlotDuration: '00:45',
        allDaySlot: false,
        eventStartEditable: false,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: „wahr“,
        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>

<Abschnitts-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>

Beim Start um 14:15 werden schnell die gewünschten Zeiten für alle verschiedenen Nachmittagsveranstaltungen angezeigt.

Ich kann immer noch keine Lösung für dieses Problem finden.

带有 selectAllow 的代码:

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('element');
  $(el).show();
  $("Abschnitt > 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';
     }anders{
          initialViews = 'timeGridWeek';
     }  

     var CalendarEl = document.getElementById('calendario');
     var today = moment().day();

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        headerToolbar: {
            links: 'vorheriges,nächstes heute',
            Mitte: 'Titel',
            rechts: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        Gebietsschema: „pt-br“,

        Schaltflächentext:{
            heute: 'Hoje',
            Liste: 'Liste'
        },

        navLinks: wahr,             
        erster Tag: heute,
        versteckte Tage: [ 0 ],
        initialView: initialViews,
        editierbar: wahr,
        wählbar: wahr, 
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621', 
        SlotDuration: '00:15',
        allDaySlot: false,
        eventStartEditable: false,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: „wahr“,
        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>

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


<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" erforderlich>
            </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" erforderlich>
            </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 activatevisit" id="save-event">Gravar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

FullCalendar 不允许您在同一日历上设置两个不同的最小值和最大值。

要解决这个问题，但仍能实现强制执行 45 分钟时段的目标，并在中午休息一段时间（此时无法创建任何活动），您可以

• 将slotDuration减少至 15 分钟，并且
• 使用selectAllow来限制用户实际可以选择的时间段长度，并且
• 使用 businessHours 标记不可用时段，并使用 selectConstraint 以确保用户在此期间无法添加事件。

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