1

fullcalendar 플러그인을 리소스 뷰와 함께 사용하고 있습니다. (http://www.ikelin.com/jquery-fullcalendar-resource-day-view/).jQuery FullCalendar : 생성 된 이벤트가 사라질 때

빈 셀을 클릭 할 때 부트 스트랩 양식 모달을 표시하려고합니다. (defaultView : 'resourceDay').

빈 셀 모달을 클릭하면 을 저장하면을 저장하면 새 이벤트가 캘린더에 추가됩니다. 그러나 작은 버그가 있습니다. 나는 모달/브라우저 창, 이벤트 블록 내부의 아무 곳이나 클릭하면

(나는,이 일시적으로 빈 셀에 색깔의 블록을 일정에 클릭을 만들 것입니다 수 있습니다) 사라집니다.

을 저장하면을 저장하면 캘린더에 다시 추가됩니다.

어떤 이유로 FullCalendar의 renderEvent을 클릭 기능에 넣으면이 버그가 발생합니다. 이 문제를 해결하는 방법은 무엇입니까? 감사!

는 (나는 JQuery와 UI 대화 상자를 사용하고 테스트, 그러나 그것은 나에게 동일한 결과를 보여 주었다 한)

select: function(start, end, allDay, event, resourceId) {//select cell (empty) 

       var title = 'Sample event';// event name 

       $('#add_appt').modal();//open the modal 

       $('#save_appt').click(function(e) {//click on the save button 
        //e.preventDefault(); 

        if (title) {//Add the event 
         console.log("CONSOLE select event " + event + title + ", start " + start + ", end " + end + ", allDay " + allDay + ", resource " + resourceId); 

         calendar.fullCalendar('renderEvent', 
           { 
            title: title, 
            start: start, 
            end: end, 
            allDay: allDay, 
            resourceId: resourceId 
           }, true); // make the event "stick" as true 

        } 
        console.log("closing"); 
        calendar.fullCalendar('unselect'); 

        $('#add_appt').modal('hide');//close the modal 
       }); 
    } 

HTML 모달

부트 스트랩 fullcalendar의

콜백 JS 기능을

<div class="modal fade" id="add_appt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Add New Appointment</h4> </div> <div class="modal-body"> <!--form --> <form id='appt_from' class="form-horizontal"> <!-- Text input--> <div class="form-group"> <label class="col-md-3 control-label" for="textinput">Text Input</label> <div class="col-md-8"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-3 control-label" for="selectbasic">Select Basic</label> <div class="col-md-8"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-3 control-label" for="textarea">Text Area</label> <div class="col-md-8"> <textarea class="form-control" id="textarea" name="textarea">default text</textarea> </div> </div> </form> <!--/ from --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id='save_appt' type="button" class="btn btn-success">Save</button> </div> </div> </div> </div> 

답변

1

해결책을 찾았습니다. 선택 해제 옵션을 으로 설정하면 거짓이됩니다. 따라서 브라우저의 아무 곳이나 클릭하면 이벤트 블록이 사라지지 않습니다.

만 내가 가까운 또는 저장 버튼을 클릭하면, 나는 닫기저장 onClicks 내부

calendar.fullCalendar('unselect');// var calendar = $('.container').fullcalendar(); 

실행이 함수를 호출합니다.

희망이 있으면 도움이 될 것입니다.

관련 문제