我如何得到模态窗口弹出时，我选择一个时间槽fullCalendar

Question

我已经能够让我的FullCalendar插件在我的本地主机上工作，并希望能够通过弹出窗口创建事件。下面的代码设置了日历，并允许我选择一个时间段，我认为呈现模态视图是为了允许输入:

$(document).ready(function(){
   var calendar = $('#calendar').fullCalendar({
    header: 
       {
         left: 'prev,next today',
         center: 'title',
         right: 'agendaDay agendaWeek month'
       },
    defaultView: 'agendaWeek',
    slotDuration : '00:15:00',
    scrollTime: '13:00:00',
    minTime : '09:00:00',
    maxTime : '21:00:00',
    slotEventOverlap: false,
    firstDay : 1,
    selectable: true,
    selectHelper: true,
    editable:true,
    //select function:
    select: function(start, end, allDay){
        endtime = $.fullCalendar.formatDate(end, 'h:mm tt');
        starttime = $.fullCalendar.formatDate(start, 'ddd, MMM d, h:mm tt');
        var mywhen = starttime + ' - ' + endtime;
        $('#createEventModal #apptStartTime').val(start);
        $('#createEventModal #apptEndTime').val(end);
        $('#createEventModal #apptAllDay').val(allDay);
        $('#createEventModal #when').text(mywhen);
        $('#createEventModal').modal('show');
    },
});
//function to submit the form
 $('#submitButton').on('click', function(e){
    //cancel the link options
    e.preventDefault();
    doSubmit();
   });
});
function doSubmit(){
    alert("form submitted");
    $("#createEventModal").modal('hide');
$("#calendar").fullCalendar('renderEvent',
    {
        title: $('#clientName').val(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        allDay: ($('#apptAllDay').val() == "true"),
    },
    true);

}

这是我用来创建模态表单的HTML代码:

    <!--call the calendar -->
    <div id='calendar'></div>
    <!-- form to capture appointment Data-->
    <div id="createEventModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h3 id="myModalLabel1">Book Appointment</h3>
        </div>
    <div class="modal-body">
            <form id="createAppointmentForm" class="form-horizontal">
                <div class="control-group">
                <label class="control-label" for="inputClient">Client:</label>
                    <div class="controls">
                    <input type="text" name="clientName" id="clientName" placeholder="name here"
                    tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[
                    &quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
                    <input type="hidden" id="apptStartTime"/>
                    <input type="hidden" id="apptEndTime"/>
                    <input type="hidden" id="apptAllDay"/>
                    </div>
                </div>
            <div class="control-group">
                <label class="control-label" for="when">When:</label>
                    <div class="controls controls-row" id="when" style="margin-top:5px;">
                    </div>
                </div>
            </form>
        </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="btn">Cancel</button>
        <button type="submit" id="submitButton" class="btn btn-primary">Save Appointment</button>
        </div>
    </div>

我不知道我错过了什么让表单呈现给用户。我是web开发的新手，非常感谢您的帮助

Answer 1

尝试使用jQuery UI Dialog小部件。对于你想要的，你可能需要一些像下面这样的代码。

$(".modal-body").dialog({
    title: "Book Appointment",
    modal: true,
    buttons: {
        "Save Appointment": function() {
            //appt save code here
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});