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">×</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>