带日期范围选择器的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

回答

相关问题