twitter-bootstrap Fullcalendar (Arshaw) - 添加带有模态窗口的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40102446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fullcalendar (Arshaw) - Adding an event with modal window
提问by Jason Christopher
I am working on arshaw calendar and I am really new to this. I want to be able to add event VIA modal window. Here are the screenshots of what I'm trying to do:
我正在研究 arshaw 日历，我对此很陌生。我希望能够通过模态窗口添加事件。以下是我正在尝试执行的操作的屏幕截图：
In the image above, is my (Arshaw)Fullcalendar.
在上图中，是我的（Arshaw）Fullcalendar。
The second image shows that when the user clicked on the calendar, say at 6am, the modal pops up and the user will now be able to add the event via modal.
第二张图片显示，当用户点击日历时，比如早上 6 点，模态弹出，用户现在可以通过模态添加事件。
Here is my code:
这是我的代码：
Javascript:
Javascript：
//arshaw calendars
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
defaultView: 'agendaDay',
eventBorderColor: "#de1f1f",
header:
{
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
//When u select some space in the calendar do the following:
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
},
//When u drop an event in the calendar do the following:
eventDrop: function (event, delta, revertFunc) {
//do something when event is dropped at a new location
},
//When u resize an event in the calendar do the following:
eventResize: function (event, delta, revertFunc) {
//do something when event is resized
},
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
},
//Activating modal for 'when an event is clicked'
eventClick: function (event) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
})
});
Cshtml:
Cshtml：
<div id="amethystBackground2"> <!-- CSS for background page !-->
<br /><br />
<div class="container">
<div id='calendar' style="background:#ECF0F1"></div>
</div>
</div>
<!--Add event modal-->
<div id="createEventModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4>Add an Event</h4>
</div>
<div id="modalBody" class="modal-body">
<div class="form-group">
<input class="form-control" type="text" placeholder="Event Name">
</div>
<div class="form-group form-inline">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Due Date mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Event Description"></textarea>
</div>
</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>
</div>
</div>
How do I do that? I looked across the internet and it has something to do with the function on javascript. I am new to this and don't quite understand on how to do this. I tried this example (Create fullCalendar calendar event on submitting the form in bootstrap modal window), But it does not work on mine.
我怎么做？我浏览了互联网，它与javascript上的功能有关。我是新手，不太明白如何做到这一点。我试过这个例子（在引导模式窗口中提交表单时创建 fullCalendar 日历事件），但它不适用于我的。
Please help, thank you in advance.
请帮忙，先谢谢你。
回答by Raki
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
defaultView: 'agendaDay',
eventBorderColor: "#de1f1f",
header:
{
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
//When u select some space in the calendar do the following:
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
},
//When u drop an event in the calendar do the following:
eventDrop: function (event, delta, revertFunc) {
//do something when event is dropped at a new location
},
//When u resize an event in the calendar do the following:
eventResize: function (event, delta, revertFunc) {
//do something when event is resized
},
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
},
//Activating modal for 'when an event is clicked'
eventClick: function (event) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#fullCalModal').modal();
},
})
$('#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(){
$("#createEventModal").modal('hide');
$("#calendar").fullCalendar('renderEvent',
{
title: $('#eventName').val(),
start: new Date($('#eventDueDate').val()),
},
true);
}
});
});
<div id="createEventModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4>Add an Event</h4>
</div>
<div id="modalBody" class="modal-body">
<div class="form-group">
<input class="form-control" type="text" placeholder="Event Name" id="eventName">
</div>
<div class="form-group form-inline">
<div class="input-group date" data-provide="datepicker">
<input type="text" id="eventDueDate" class="form-control" placeholder="Due Date mm/dd/yyyy">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" type="text" rows="4" placeholder="Event Description" id= "eventDescription"></textarea>
</div>
</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>
</div>
</div>
回答by Tal
It's goes like this, when user select a date, this happens:
是这样的，当用户选择一个日期时，会发生这种情况：
select: function (start, end, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
},
in the params, you have start and end, that define you event start and end time.
在参数中，你有开始和结束，定义你的事件开始和结束时间。
from here you should bind a click event to your save button:
从这里你应该将一个点击事件绑定到你的保存按钮：
select: function (startTime, endTime, allDay) {
//do something when space selected
//Show 'add event' modal
$('#createEventModal').modal('show');
$('#submitButton').on('click',function(){
var mockEvent = {title: 'myNewEvent!', start:startTime, end:endTime};
$('#calendar').fullCalendar('renderEvent', mockEvent);
$('#submitButton').unbind('click');
$('#createEventModal').modal('hide');
});
}
Notethat this example base on the the new versionof the fullcalendar (2&3 versions).
请注意，此示例基于新版本的 fullcalendar（2 和 3 版本）。
you better check your many options that you have regarding the events:
你最好检查一下你对事件的许多选择：
Also, you can start by adding static events for explore all events features:
此外，您可以首先添加静态事件以探索所有事件功能：
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
eventBorderColor: "#de1f1f",
events: [
{
title : 'test event',
start : '2016-10-18',
end : '2016-10-19'
}
]
...
Good luck!
祝你好运！
