日付範囲ピッカーを使用したFullcalendar

-1

私のFullcalendarにdatepickerの範囲があります。私はあなたが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。 googleで3秒間の検索がそれを明らかに – ADyson

これはあなたのための作業です。しかし、最初に、あなたの質問にいくつかの注意事項：

あなたはpromptであなたが3 prompts（最後の開始のために他のと他のタイトルのための1、）持っている必要がありますことを実行する場合。それでは、プロンプトをカスタマイズするのは簡単ではありません。私は私はユーザー
からのデータを要求するBootstrap Modalを使用してい
1. ：あなたは、今
を使用するには、以下のコードの説明をDatePickerのライブラリを選んだはずです
Bootstrap Eonasdan Datetimepickerを使用してオプションを指定しないでください（あなたのニーズに合わせてカスタマイズしてください）
ユーザーは日付を選択してデータを入力し、「保存」ボタンをクリックしてイベントをfullcalに追加するモーダルのフィールドをクリアしてダイアログを閉じます。

まず、あなたがモーダルための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

答えて

関連する問題