关于javascript：Fullcalendar(Arshaw)-使用模式窗口添加事件

Fullcalendar (Arshaw) - Adding an event with modal window

我正在研究arshaw日历，对此我真的很陌生。我希望能够添加事件VIA模态窗口。以下是我要执行的操作的屏幕截图：

Arshaw

第二张图片显示，当用户单击日历时，例如上午6点，弹出模式，用户现在可以通过模式添加事件。

这是我的代码：

Javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

//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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<br /><br />



<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>

<input class="form-control" type="text" placeholder="Event Name">

<input type="text" class="form-control" placeholder="Due Date mm/dd/yyyy">

<span class="glyphicon glyphicon-calendar"></span>

<textarea class="form-control" type="text" rows="4" placeholder="Event Description"></textarea>

<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>

我该怎么做？我在互联网上看了看，这与javascript上的功能有关。我对此并不陌生，对如何执行此操作还不太了解。我尝试了此示例(在引导模态窗口中提交表单时创建了fullCalendar日历事件)，但是在我的示例中不起作用。

请帮助，谢谢您。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

$(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);
}
});

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<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>

<input class="form-control" type="text" placeholder="Event Name" id="eventName">

<input type="text" id="eventDueDate" class="form-control" placeholder="Due Date mm/dd/yyyy">

<span class="glyphicon glyphicon-calendar"></span>

<textarea class="form-control" type="text" rows="4" placeholder="Event Description" id="eventDescription"></textarea>

<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>