在引导模式窗口中提交表单时创建fullCalendar日历事件 [英] Create fullCalendar calendar event on submitting the form in bootstrap modal window

问题描述

我有一个fullCalendar实现，并试图在点击日历上的任意位置时创建一个引导模式窗口，然后在模式窗口中提交表单时保存日历条目。

  $（document）.ready（function（）{
 var calendar = $（'＃calendar'）。fullCalendar（{
 //头文件和其他值
 select：function（start，end，allDay）{
 var endtime = $ .fullCalendar.formatDate（end，'h：mm tt'）; 
 var starttime = $ .fullCalendar.formatDate（start，'ddd，MMM d，h：mm tt'）; 
 var mywhen = starttime +' - '+ endtime; 
'（'＃createEventModal #when'）.text （mywhen）; 
 $（'＃createEventModal'）。modal（'show'）; 
}，
 //其他函数
}）; 
  

以下是模态界面的HTML：



 < div id =createEventModalclass =modal hidetabindex = -  1role =dialogaria-labelledby =myModalLabel1aria- hidden =true> 
< div class =modal-header> 
 < h3 id =myModalLabel1>创建预约< / h3> 
< / div> 
< div class =modal-body> 
< form id =createAppointmentFormclass =form-horizo​​ntal> 
< div class =control-group> 
< label class =control-labelfor =inputPatient> Patient：< / label> 
< div class =controls> 
< input type =textname =patientNameid =patientNametyle =margin：0 auto; data-provide =typeaheaddata-items =4data-source =[& quot; value 1& quot;，& quot; value 2& quot;& quot; value 3& quot;] > 
< / div> 
< / div> 
< div class =control-group> 
< label class =control-labelfor =when> When：< / label> 
< div class =controls controls-rowid =whenstyle =margin-top：5px;> 
< / div> 
< / div> 
< / form> 
< / div> 
< div class =modal-footer> 
< button class =btndata-dismiss =modalaria-hidden =true>取消< /按钮> 
< button type =submitclass =btn btn-primaryid =submitButton>保存< /按钮> 
< / div> 
< / div> 
  

在主HTML中调用的另一个JavaScript文件中，我有以下内容：

$（'＃submitButton'）。on（'click'，function（e）{
//我们不想要这作为链接，以取消链接操作
e.preventDefault（）;

//查找表单并提交
$（'＃createAppointmentForm'）。submit ）;
}）; （'submit'，function（）{
alert（form submitted）;
$（＃createEventModal）。

$（'＃createAppointmentForm'）。 modal（'hide'）;
$ calendar.fullCalendar（'renderEvent'，
{
title：$（'＃patientName'）。val（）;,
start：开始，
结束：结束，
allDay：allDay
}，
true
）;
您需要保存 start ， end 和 allDay 参数选择函数。

例如，将它们存储在对话框形式的隐藏输入中：

 < div class =controls> 
< input type =textname =patientNameid =patientName tyle =margin：0 auto;data-provide =typeaheaddata-items =4data-source =[& quot; Value 1& quot ;值2，值3）>，<值2& quot;，"值3& quot;]> 
< input type =hiddenid =apptStartTime/> 
< input type =hiddenid =apptEndTime/> 
< input type =hiddenid =apptAllDay/> 
< / div> 
  

然后在中选择fullcalendar set的函数隐藏字段的值：

  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'）; 
} 
  

然后您可以使用<$ c $中这些字段的值c> submit ：

  function doSubmit（）{
 alert（form submitted ）; 
 $（＃createEventModal）。modal（'hide'）; 
 
 $（＃calendar）。fullCalendar（'renderEvent'，
 {
 title：$（'＃patientName'）。val（），
 start ：新日期（$（'＃apptStartTime'）.val（）），
 end：new Date（$（'＃apptEndTime'）.val（）），
 allDay：（$（' （）），
}，
 true）; 
} 
  

在这里演示一个演示。

I've a fullCalendar implementation and am trying to create a bootstrap modal window on clicking anywhere on the calendar and then saving the calendar entry on "submitting" the form in the modal window.

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
    //header and other values
    select: function(start, end, allDay) {
        var endtime = $.fullCalendar.formatDate(end,'h:mm tt');
    var starttime = $.fullCalendar.formatDate(start,'ddd, MMM d, h:mm tt');
    var mywhen = starttime + ' - ' + endtime;
        $('#createEventModal #when').text(mywhen);
        $('#createEventModal').modal('show');
     },
    //other functions
  });

Here's the HTML for modal screen:

<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">Create Appointment</h3>
    </div>
    <div class="modal-body">
    <form id="createAppointmentForm" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputPatient">Patient:</label>
            <div class="controls">
                <input type="text" name="patientName" id="patientName" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
            </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 class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button type="submit" class="btn btn-primary" id="submitButton">Save</button>
    </div>
</div>

In another javascript file that's called within the main HTML, I've the following:

$('#submitButton').on('click', function(e){
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();

    // Find form and submit it
    $('#createAppointmentForm').submit();
  });

$('#createAppointmentForm').on('submit', function(){
    alert("form submitted");
    $("#createEventModal").modal('hide');
    $calendar.fullCalendar('renderEvent',
        {
            title: $('#patientName').val();,
            start: start,
            end: end,
            allDay: allDay
        },
        true
    );

This is not working. What am I doing wrong?

解决方案

You need to preserve the start, end and allDay parameters from the select function.

For example, store them in hidden inputs in the dialog form:

        <div class="controls">
            <input type="text" name="patientName" id="patientName" 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>

And in the select function of fullcalendar set the values of the hidden fields:

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

And then you can use the values from these fields in the submit:

function doSubmit(){
    alert("form submitted");
    $("#createEventModal").modal('hide');

    $("#calendar").fullCalendar('renderEvent',
    {
        title: $('#patientName').val(),
        start: new Date($('#apptStartTime').val()),
        end: new Date($('#apptEndTime').val()),
        allDay: ($('#apptAllDay').val() == "true"),
    },
    true);
}

Fiddle here with a demo.

这篇关于在引导模式窗口中提交表单时创建fullCalendar日历事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！