我一直在网上搜索,似乎什么也找不到。所以具体来说,我正在尝试在您单击日期时创建一个事件。事件中的信息必须是:标题、事件开始和事件结束。
到目前为止,我有:
@section脚本{
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
//events: "/home/getevents/"
select: function(start, end, allDay)
{
var title = prompt('Event Title:');
var start = prompt('Event Start:');
var end = prompt('Event End:');
if (title)
{
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
]
});
});
在没有外界帮助的情况下进行了数小时的修补,我终于让事件以我需要的方式显示出来。我将发布下面的代码,所以希望没有人会像我一样经历这个。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div>
<h2>Appointments</h2>
@section scripts{
<script type="text/javascript">
$(document).ready(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month, agendaWeek, agendaDay'
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
select: function(start, end, allDay)
{
var title = prompt('Event Title:');
if (title)
{
var startHour = prompt('enter start time')
var startMinute = prompt('enter the minutes. example: 12:15 would be 15')
var endTime = prompt('enter end time')
var dateStart = prompt('enter start date, you only need DD')
var dateEnd = prompt('enter end date, you only need DD')
calendar.fullCalendar('renderEvent',
{
title: title,
start: new Date(y, m, dateStart, startHour, startMinute),
end: new Date(y, m, dateEnd, endTime),
allDay: false
},
true
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
]
});
});
</script>
}
<div class="row">
<div class="col-md-12">
<div id="calendar">
</div>
</div>
</div>
</body>
</html>