fullcalendar에서 SlotMinTime과 SlotMaxTime으로 정의된 두 개의 기간을 갖고 싶습니다.

Question

같은 달력에서 두 개의 서로 다른 기간을 사용할 계획입니다.지금까지 제가 찾은 유일한 방법은 다음과 같이 두 개의 서로 다른 캘린더에서 이 작업을 수행하는 것입니다.

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('요소');
  $(el).show();
  $("섹션 > 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';
     }또 다른{
          initialViews = 'timeGridWeek';
     }

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

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        헤더 도구 모음: {
            왼쪽: '이전,다음 오늘',
            가운데: '제목',
            오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        로캘: "pt-br",

        버튼텍스트:{
            오늘: '호제',
            목록: '리스타'
        },

        navLinks: 사실,
        firstDay: 오늘,
        숨겨진일: [ 0 ],
        초기 보기: 초기 보기,
        편집 가능: 사실,
        선택 가능: 사실,
        선택 해제자동:true,
        eventOverlap: 거짓,
        이벤트색상: '#f16621',
        슬롯지속시간: '00:45',
        allDaySlot : 거짓,
        eventStartEditable: 거짓,
        eventDurationEditable:false,
        longPressDelay: 0,
        지금표시기: "true",
        SlotMinTime: '10:30',
        슬롯MaxTime: '12:00',
        콘텐츠 높이: '자동',
        
                

    });

    Calendar.render();
});

$(document).on('click', '.dad-visita', function(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
          initialViews = 'timeGridWeek';
     }또 다른{
          initialViews = 'timeGridWeek';
     }

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

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        헤더 도구 모음: {
            왼쪽: '이전,다음 오늘',
            가운데: '제목',
            오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        로캘: "pt-br",

        버튼텍스트:{
            오늘: '호제',
            목록: '리스타'
        },

        navLinks: 사실,
        firstDay: 오늘,
        숨겨진일: [ 0 ],
        초기 보기: 초기 보기,
        편집 가능: 사실,
        선택 가능: 사실,
        선택 해제자동:true,
        eventOverlap: 거짓,
        이벤트색상: '#f16621',
        슬롯지속시간: '00:45',
        allDaySlot : 거짓,
        eventStartEditable: 거짓,
        eventDurationEditable:false,
        longPressDelay: 0,
        지금표시기: "true",
        SlotMinTime: '14:30',
        슬롯MaxTime: '19:00',
        콘텐츠 높이: '자동',

    });

    Calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" 스타일시트">
<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>
    컨설턴트 방문
</a>

<섹션 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>



</p>
<p>그런데 그러면 달력이 두 개 있어야 하는데, 이는 올바른 방법이 아닙니다. 이렇게 해야 하는 이유는 SlotDuration이 45분이어야 하고 아침에는 이벤트 시간을 올바르게 가정하기 때문입니다.</p>
<p>그러나 오후 활동은 14:30부터 시작하며, 이 SlotDuration을 사용하여 SlotMinTime을 10:30으로 설정하고 SlotMaxTime을 19:00으로 설정하면 오후 활동의 달력은 예와 같이 14:15부터 시작됩니다. </p>
<p>

<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('요소');
  $(el).show();
  $("섹션 > 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';
     }또 다른{
          initialViews = 'timeGridWeek';
     }

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

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        헤더 도구 모음: {
            왼쪽: '이전,다음 오늘',
            가운데: '제목',
            오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        로캘: "pt-br",

        버튼텍스트:{
            오늘: '호제',
            목록: '리스타'
        },

        navLinks: 사실,
        firstDay: 오늘,
        숨겨진일: [ 0 ],
        초기 보기: 초기 보기,
        편집 가능: 사실,
        선택 가능: 사실,
        선택 해제자동:true,
        eventOverlap: 거짓,
        이벤트색상: '#f16621',
        슬롯지속시간: '00:45',
        allDaySlot : 거짓,
        eventStartEditable: 거짓,
        eventDurationEditable:false,
        longPressDelay: 0,
        지금표시기: "true",
        SlotMinTime: '10:30',
        슬롯MaxTime: '19:00',
        콘텐츠 높이: '자동',

    });

    Calendar.render();
});

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel=" 스타일시트">
<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>
    컨설턴트 방문
</a>

<섹션 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>



</p>
<p>14시 15분에 시작하면 다양한 오후 이벤트에 대해 제가 원하는 시간이 빠르게 반환됩니다. </p>
<p>아직도 이 문제에 대한 해결책을 찾을 수 없습니다.</p>
<p><strong>带有 selectAllow 的代码：</strong></p>
<p>

<pre class="brush:js;toolbar:false;">$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('요소');
  $(el).show();
  $("섹션 > 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';
     }또 다른{
          initialViews = 'timeGridWeek';
     }  

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

     var Calendar = new FullCalendar.Calendar(calendarEl, {
        
        헤더 도구 모음: {
            왼쪽: '이전,다음 오늘',
            가운데: '제목',
            오른쪽: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        로캘: "pt-br",

        버튼텍스트:{
            오늘: '호제',
            목록: '리스타'
        },

        navLinks: 사실,             
        firstDay: 오늘,
        숨겨진일: [ 0 ],
        초기 보기: 초기 보기,
        편집 가능: 사실,
        선택 가능: 사실, 
        선택 해제자동:true,
        eventOverlap: 거짓,
        이벤트색상: '#f16621', 
        슬롯지속시간: '00:15',
        allDaySlot : 거짓,
        eventStartEditable: 거짓,
        eventDurationEditable:false,
        longPressDelay: 0,
        지금표시기: "true",
        SlotMinTime: '10:30',
        슬롯MaxTime: '19:00',
        콘텐츠 높이: '자동',
        
        선택: 기능(시작, 종료) {
            var start1 = moment((start.startStr)).format('HH:mm:ss');
            if(시작1 == '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("표시");
            }

            
        },

    });

    Calendar.render();
});

    
    컨설턴트 방문


<섹션 id="s160">
  

    

  




  

    

      

        
NOVA VISITA
        
      
      

        

          

            

              <="시작" 라벨> DATA/HORA INICIAL *
              
            
            

               DATA/HORA FINAL *
              
            
          
          

            Fechar
            Gravar
          
        
      
    
  

Answer 1

FullCalendar를 사용하면 동일한 달력에 두 개의 서로 다른 최소값과 최대값을 설정할 수 없습니다.

이 문제를 해결하면서도 45분 기간을 적용하고 정오(활동을 생성할 수 없는 경우)에 휴식을 취한다는 목표를 달성하려면 다음을 수행하세요.

• 15분으로 slotDuration을 줄이고
• selectAllow를 사용하여 사용자가 실제로 선택할 수 있는 기간을 제한하고
• businessHours를 사용하여 사용할 수 없는 기간을 표시하고 selectConstraint를 사용하여 이 기간 동안 사용자가 이벤트를 추가할 수 없도록 합니다.

으아악 으아악