使用模态

Question

在fullcalendar中我找到了一个JsFiddle，它能够使用引导模式将事件添加到日历中。我已经能够通过研究更新一些代码，以使其达到最新版本的fullcalendar。但是，当我单击提交时，我仍然无法在调度程序中正确显示该事件。我有很少的JavaScript经验，只需要让这部分工作到我的最后一年项目，所以非常感谢你对这个问题的帮助。

我查看了其他文章，例如this以及许多其他文章，包括fullcalendar网站上的文档，但没有找到解决方案的运气。我制作了一个jsfiddle here，让人们可以更轻松地使用代码并找到最佳解决方案。

这是我认为问题所在的地方

select: function (start, end, event, view, resource) {
        endtime = end.format('h:mm a');
        starttime = start.format('ddd, MMM D, h:mm a');
        var resourceId = resource.id;
        var mywhen = starttime + ' - ' + endtime;
        $('#createShiftModal #employeeName').val(resourceId);
        $('#createShiftModal #shiftStartTime').val(start);
        $('#createShiftModal #shiftEndTime').val(end);
        $('#createShiftModal #when').text(mywhen);
        $('#createShiftModal').modal('show');
    }
});

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

    doSubmit();
  });

  function doSubmit(){
    $("#createShiftModal").modal('hide');
    console.log($('#shiftStartTime').val());
    console.log($('#shiftEndTime').val());
    alert("form submitted");

    $("#calendar").fullCalendar('renderEvent',
        {
            title: $('#employeeName').val(),
            resource: $('#employeeName').val(),
            start: new Date($('#shiftStartTime').val()),
            end: new Date($('#shiftEndTime').val()),
        },
        true);
   }

我已经努力实现这个功能几个月，并且无法在线找到任何解决方案，所以我认为一个全面的答案和例子将有益于社区中的许多人。感谢您的帮助。

修改

为了澄清这个问题，我正在寻找的是能够使用模态向调度程序添加事件。当我突出显示给定的时间范围时，例如上午8:00到下午3:00，我想要一个事件出现在我为给定资源突出显示的位置。由于某种原因，即使代码相同，jsfiddle也无法工作，所以我在heroku上启动了我的应用程序，这样你就可以看到我需要做什么了。我只是希望模式与员工姓名一起显示，以及班次的确定时间和日期作为确认班次的方式，或者他们可以单击取消以撤消它。

我只需要在给定资源旁边的日历上显示一个事件即可。希望这可以解决问题

登录凭据

电子邮件：leventarsenal@gmail.com

密码：12345