javascript - Fullcalendar - 在数据库中保存事件

Question

我有以下标记:

我有一个完整日历的实例。 单击某一天(触发 dayClick-回调)时，将打开一个 Bootstrap 模式，用户可以在其中输入标题和开始/结束日期。单击确定后，提供的那些值将添加到日历中。这是相关代码:

 function addTitle(){ //having a button onClick="addTitle()"
            var title = $('#add_date_title').val();
            var startdate = $('#add_date_startdate').val();
            var enddate = $('#add_date_enddate').val();
            var end_split = enddate.split('-');
            end_split[2]= parseInt(end_split[2])+parseInt("1");
            enddate = end_split[0] + "-" + end_split[1] + "-" + end_split[2];
            $('#add_date_title').val('');
            $('#add_date_startdate').val('');
            $('#add_date_enddate').val('');
            $('#add_date_modal').modal('hide');

            var myCalendar = $('#calendar');
            var myEvent = {
                title:title,
                allDay: true,
                start: startdate,
                end: enddate
            };
            myCalendar.fullCalendar( 'renderEvent', myEvent );
        }

因此该事件现在已在日历中。但是当例如切换月份或重新加载页面，所有数据都会丢失，当然，因为它无处保存。

现在的问题是:如何将事件直接保存到数据库中，然后加载它，那么我在哪里可以引入 php 代码，将事件保存到数据库中...问题，为什么我问，添加事件之间的站点是否永远不会重新加载，所以我无法检查 GET 或 POST 参数或类似的东西......我可以用 AJAX 做到这一点吗？如果是，如何？因为我对 AJAX 不是很熟悉。

Answer 1

您实际上可以将事件保存在数据库中。

1. 在模态触发器之后使用此 ajax。

2. 在模态中获取标题、开始日期、结束日期等值，并通过以下ajax发送

   $.ajax({
     url: 'add_events.php',
     data: 'title='+ title+'&start='+ start2 +'&end='+ end2,                                                    
     type: "POST",
     success: function(json) {
       $( "#getReason" ).modal('hide');
       $('#mydiv').hide();
       $('body').removeClass('blockMask');//calendar.fullCalendar( 'refetchEvents');
       $('#calendar').fullCalendar('refetchEvents');
     }
   });
   

3. 在 add_events.php 中将详细信息保存在 db 中

4. 在您的主页中使用此方法动态创建事件源

   function eventSourceCall(){
        eventSourceCall = [
           {
               url: 'events.php?status=absent',
               backgroundColor: 'red',
               borderColor: 'white',
               textColor: 'white',
               rendering: 'background',
               cache: false
           }
   

5. 在 events.php 中执行选择操作并将事件参数检索为 json 编码对象并返回它们。

6. 在日历函数 eventSources: eventSourceCall 中， 添加此行以选择事件源。