FullCalendar - 当我通过点击一天添加事件时,如何将事件保存回我的JSON文件?

时间:2013-10-17 20:06:35

标签: php html json fullcalendar

我可以在日历上显示新事件,但是当我刷新屏幕时它会消失。我希望将新事件保存在我的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>

0 个答案:

没有答案