我正在研究arshaw 日历，对此我真的很陌生。我希望能够通过模式窗口添加事件。以下是我正在尝试执行的操作的屏幕截图:
上图中，是我的 (Arshaw)Fullcalendar。
第二张图片显示，当用户单击日历时(比如早上 6 点)，会弹出模式，用户现在可以通过模式添加事件。
这是我的代码:
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:
<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>
我该怎么做？我查了一下网上，和javascript上的函数有关。我对此很陌生，不太明白如何做到这一点。我尝试了这个例子( Create fullCalendar calendar event on submitting the form in bootstrap modal window )，但它对我的不起作用。
请帮忙，先谢谢了。
最佳答案
$(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>
关于javascript - Fullcalendar (Arshaw) - 添加带有模式窗口的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40102446/