날짜 범위 선택기가있는 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. 구글 검색에서 3 초가 밝혀졌습니다. – ADyson

좋아, 그럼 당신을위한 작품입니다. 하지만 먼저, 귀하의 질문에 몇 가지 참고 사항 :

당신이 prompt와 세 prompts (끝의 시작 기타 다른 타이틀 하나) 있어야합니다 그렇게하십시오. 이제 프롬프트를 사용자 정의하는 것이 쉽지 않습니다.
1. 내가
2. 가 난 사용자로부터 데이터를 요청하는 Bootstrap Modal을 사용하고 있습니다 :
3. 당신은 날짜 선택기 라이브러리 지금

Bootstrap Eonasdan Datetimepicker

아이디어는 사용자가 날짜를 선택하고 데이터를 채우고 "저장"버튼을 클릭하고 fullcal에 이벤트를 추가 할 때 모달을 여는 것입니다. 모달의 필드를 지우고 대화 상자를 닫습니다.

$(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'); 
    }); 
});

그리고 이것은 당신을위한 시작이다 : 첫째

, 당신은 자바 스크립트가 업데이트해야합니다 같은

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

당신을로, 모달에 대한 HTML을 작성해야합니다. 이를 개선하기 위해해야 할 일이 많이 있습니다. 이벤트를 편집 할 때 새로운 이벤트가 생성되지만이를 이해하도록 남겨 둡니다.

편의상 나는이 작업과 사용 된 종속성을 볼 수있는 a jsfiddle을 만들었습니다.

출처

2016-10-05 15:44:49

날짜 범위 선택기가있는 Fullcalendar

답변

관련 문제