帶日期範圍選擇器的Fullcalendar

-1

我想在我的Fullcalendar上有一個datepicker範圍。我看過一些帖子，你可以用日期選擇器選擇一個日期，但我希望用戶能夠選擇開始日期和結束日期。帶日期範圍選擇器的Fullcalendar

我fullcalendar看起來像下面的圖片，我想補充的紅場datepickers。

這是我使用的代碼。我如何/在哪裏添加日期選擇器？

<script> 
    $(document).ready(function() { 
     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      defaultDate: '2016-09-12', 
      navLinks: true, // can click day/week names to navigate views 
      selectable: true, 
      selectHelper: true, 
      select: function(start, end) { 
       var title = prompt('Event Title:'); 
       var eventData; 
       if (title) { 
        eventData = { 
         title: title, 
         start: start, 
         end: end 
        }; 
        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
       } 
       $('#calendar').fullCalendar('unselect'); 
      }, 
      eventClick: function(event, element) { 
       event.title = prompt('Event Title:',event.title); 
       $('#calendar').fullCalendar('updateEvent', event); 
      }, 
      editable: true, 
      eventLimit: true, // allow "more" link when too many events 
     }); 

     $('#datepicker').datepicker({ 
      inline: true, 
      onSelect: function(dateText, inst) { 
       var d = new Date(dateText); 
       $('#fullcalendar').fullCalendar('gotoDate', d); 
      } 
     }); 
    }); 
</script> 

<style> 
    body { 
     margin: 40px 10px; 
     padding: 0; 
     font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
     font-size: 14px; 
    } 

    #calendar { 
     max-width: 900px; 
     margin: 0 auto; 
    } 
</style> 
</head> 
<body> 
    <div id='calendar'></div> 
    <div id='datepicker'></div> 
</body>

來源

2016-10-05 zuma

你有什麼試過？爲什麼沒有工作？你面臨的問題是什麼？你的代碼在哪裏？檢查[如何創建一個最小化，完整和可驗證的示例]（http://stackoverflow.com/help/mcve） –

我已經編輯了我的問題@milz – zuma

沒有在jquery datepicker文檔中找到它嗎？ https://jqueryui.com/datepicker/#date-range。在谷歌搜索3秒顯示它 – ADyson

好吧，這是你的工作。但首先，你的問題的幾個注意事項：

如果你想做到這一點與prompt你需要有三個prompts（一個用於標題，另一個用於啓動等爲末）。現在您應該自定義提示並不容易。
你應該挑一個datepicker庫使用

現在，代碼如下的解釋：

我使用Bootstrap Modal從用戶
我請求數據使用Bootstrap Eonasdan Datetimepicker，沒有選項（你應該根據你的需要定製這個）
這個想法是當用戶選擇一個日期，填入數據，點擊「保存」按鈕，將事件添加到fullcal endar，清除模態的字段並關閉對話框。

首先，你需要寫下來的模態的HTML，因爲這樣

<div class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Create new event</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <label class="col-xs-4" for="title">Event title</label> 
         <input type="text" name="title" id="title" /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <label class="col-xs-4" for="starts-at">Starts at</label> 
         <input type="text" name="starts_at" id="starts-at" /> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <label class="col-xs-4" for="ends-at">Ends at</label> 
         <input type="text" name="ends_at" id="ends-at" /> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="save-event">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

您的javascript應更新爲：

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultDate: '2016-09-12', 
     navLinks: true, // can click day/week names to navigate views 
     selectable: true, 
     selectHelper: true, 
     select: function(start, end) { 
      // Display the modal. 
      // You could fill in the start and end fields based on the parameters 
      $('.modal').modal('show'); 

     }, 
     eventClick: function(event, element) { 
      // Display the modal and set the values to the event values. 
      $('.modal').modal('show'); 
      $('.modal').find('#title').val(event.title); 
      $('.modal').find('#starts-at').val(event.start); 
      $('.modal').find('#ends-at').val(event.end); 

     }, 
     editable: true, 
     eventLimit: true // allow "more" link when too many events 

    }); 

    // Bind the dates to datetimepicker. 
    // You should pass the options you need 
    $("#starts-at, #ends-at").datetimepicker(); 

    // Whenever the user clicks on the "save" button om the dialog 
    $('#save-event').on('click', function() { 
     var title = $('#title').val(); 
     if (title) { 
      var eventData = { 
       title: title, 
       start: $('#starts-at').val(), 
       end: $('#ends-at').val() 
      }; 
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
     } 
     $('#calendar').fullCalendar('unselect'); 

     // Clear modal inputs 
     $('.modal').find('input').val(''); 

     // hide modal 
     $('.modal').modal('hide'); 
    }); 
});

這是給你的一個開始。你應該做很多事情來改善這一點。請注意，當你編輯一個事件時，這將會創建一個新的事件，但是我讓你知道這一點。

爲了您的方便，我創建了a jsfiddle，您可以在其中查看此工作和使用的依賴關係。

來源

2016-10-05 15:44:49

帶日期範圍選擇器的Fullcalendar

回答

相關問題