我打算在同一日曆中使用兩個不同的時期。到目前為止，我發現的唯一方法是在兩個不同的日曆中執行此操作，如下所示：$(".btn-show").click(function(e){e.preventDefault();el= $(this).data('element');$(el).show();$("section>div").not(el).hide()

我想在 fullcalendar 中有兩個由 slotMinTime 和 slotMaxTime 定義的時間段

我打算在同一日曆中使用兩個不同的時期。到目前為止，我發現的唯一方法是在兩個不同的日曆中執行此操作，如下所示： <pre class="brush:js;toolbar:false;">$(".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:{ 到day: '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:{ 到day: '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="樣式表”>
<腳本 src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<腳本 src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></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 class="cal-wrapper"><div id='calendario'></div></div>
    <div class="cal-wrapper"><div id='calendario1'></div></div>
  ;
</section></pre>


</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('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="樣式表”>
<腳本 src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<腳本 src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></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 class="cal-wrapper"><div id='calendario'></div></div>
    <div class="cal-wrapper"><div id='calendario1'></div></div>
  ;
</section></pre>


</p>
<p>從 14:15 開始時，它很快就會回到我想要的所有不同下午事件的時間。 </p>
<p>我還是找不到解決這個問題的方法。</p>
<p><strong>有 selectAllow 的程式碼：</strong></p>
<p>

$(".btn-show").click(function(e) {
  e.preventDefault();
  el = $(this).data('元素');
  $(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) ) {
          初始視圖 = 'timeGridWeek';
     }別的{
          初始視圖 = 'timeGridWeek';
     }

     var calendarEl = document.getElementById('calendario');
     var 今天 = moment().day();

     var 日曆 = new FullCalendar.Calendar(calendarEl, {
        
        標題工具列：{
            left: '上一個，下一個今天',
            中心：'標題'，
            右：'dayGridMonth、timeGridWeek、timeGridDay'
        },
        區域設定：“pt-br”，

        按鈕文字：{
            今天：“Hoje”，
            列表：“列表”
        },

        導航連結：真實，
        第一天：今天，
        隱藏天數: [ 0 ],
        初始視圖：初始視圖，
        可編輯：真實，
        可選：真，
        取消選擇自動：true，
        事件重疊：假，
        事件顏色: '#f16621',
        時隙持續時間：'00:15',
        所有日槽：假，
        事件開始可編輯：假，
        事件持續時間可編輯：假，
        長按延遲：0，
        now指標：“true”，
        slotMinTime: '10:30',
        slotMaxTime: '19:00',
        內容高度：'自動'，
        
        選擇：函數（開始，結束）{
            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("顯示");
            }

            
        },

    });

    日曆.render();
});</前>
<pre class="brush:html;toolbar:false;"><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">
<腳本 src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<腳本 src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<腳本 src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/pt-br.js"></script>
<腳本 src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></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>
    顧問拜訪
</a>

<節 id="s160">
  
    <div class="cal-wrapper"><div id='calendario'></div></div>
  
</節>



  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        NOVA VISITA;
        <按鈕類型=“按鈕”類別=“btn-close”data-bs-dismiss=“modal”aria-label=“關閉”>
      
      <div class="modal-body">
        <form method="POST" class="row g-3 insvisit">
          <div class="row">
            <div class="col-6">
              <標籤=“開始”> <strong>數據/HORA INICIAL</strong> <span style="color: red;">*</span></label>
              <需要輸入類型=“文字”名稱=“開始”id=“開始”>

<div class="col-6"> <標籤=“結束”> 數據/HORA FINAL *</label> <輸入類型=“文字”名稱=“結束”ID=“結束”必要>

我想在 fullcalendar 中有兩個由 slotMinTime 和 slotMaxTime 定義的時間段

全部回覆(1)我來回復