我可以在日历上显示新事件,但是当我刷新屏幕时它会消失。我希望将新事件保存在我的JSON(json-events.php)文件中。我完全不知道怎么做。
http://www.lwwjournals.com/testSite/jquerycalendar.html
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<link href="scripts/FullCalendarCSSjava/fullcalendar.css" rel='stylesheet' />
<link href="scripts/FullCalendarCSSjava/jquery-ui-1.10.3.custom.css" rel='stylesheet' />
<link href="scripts/FullCalendarCSSjava/fullcalendar.print.css" rel='stylesheet' media='print' />
<script src="scripts/FullCalendarCSSjava/jquery-1.9.1.min.js"></script>
<script src="scripts/FullCalendarCSSjava/jquery-ui-1.10.3.custom.js"></script>
<script src="scripts/FullCalendarCSSjava/fullcalendar.min.js" ></script>
<script>
$(window).load(function(){
var calendar=$('#calendar').fullCalendar({
aspectRatio: 2,
weekMode: 'liquid',
weekNumbers: true,
events: "json-events.php",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title=prompt("Please enter your name:","Your name");
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
calendar.fullCalendar('unselect');
},
loading: function(bool) {
if (bool) $('#loading').show();
else $('#loading').hide();
},
eventRender: function (event, element, view) {
element.attr('href', 'javascript:void(0);');
element.attr('onclick', 'javascript:openModal("' + event.title + '","' + event.description + '","' + event.url + '");');
},
});
});
function openModal(title, info, url) {
$("#eventInfo").html(info);
$("#eventLink").attr('href', url);
$("#eventContent").dialog({ modal: true, title: title });
}
function printpage()
{
window.print()
}
</script>
<style>
@font-face {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
src: local("Trebuchet MS", Arial, Helvetica, sans-serif), url('fonts/"Trebuchet MS", Arial, Helvetica, sans-serif.ttf') format('opentype');
}
body {
text-align: center;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 87%;
height:100%;
overflow:auto;
margin: 30px auto 0 auto;
}
#calendar {
width: 100%;
height:100%;
overflow:auto !important;
margin-top:10px;
}
</style>
</head>
<body>
<div id="calendar" class="print" align="center"></div>
<div id="eventContent" class="dontprint" title="Event Details" style="font-size:13px;display:none;">
<div id="eventInfo"></div>
</div>
</body>
</html>