Question

我使用ajax成功存储和检索数据库中的事件现在如何将其显示为fullcalnder中的事件？在数据库中保存事件：使用Ajax。

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2015-02-12',
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $.ajax ({
                        url: "http://localhost/phplec/sms/calendar/test",
                        type: 'POST',
                        data: {'title': title, 'start' : start.format(), 'end': end.format()},
                        success: function(msg) {
                            alert(msg); 
                        }
                    });

控制器：这里我接受Ajax请求并连接到数据库

function test() {
        $this->load->model('calendar_model');
        $data = array(
            'title' => $_POST['title'],
            'start' => $_POST['start'],
            'end' => $_POST['end'] 
        );
        $this->calendar_model->add_record($data);
        echo "working";
    }

现在我想在页面上的fullCalander中显示我的数据库。我成功地从数据库中获取事件并将其传递给json，现在如何在视图中显示它。

function get_records()
    {
        $data = $this->db->get("calendar_test");
        $json_data = json_encode($data->result_array());
        var_dump($json_data);
    }

我如何动态显示此事件

   $.ajax ({
        url: "http://localhost/phplec/sms/calendar/get_records",
        type: 'GET',
        dataType: "html",   //expect html to be returned                
        success: function(response){
    alert(response)
}

我现在成功地在fullcalander.js中获取事件json如何将其传递给事件。

Answer 1

根据我的理解，您希望在日历日点击它，它会提示您输入标题，然后您将数据提交给数据库，然后您想再次查看它。这些是您需要采取的步骤：

您需要使用events方法，以便fullcalendar知道如何在加载时获取事件，如下所示：

$('#calendar').fullCalendar({
    // ....your other methods...
    events: 'http://localhost/phplec/sms/calendar/get_records' //this should echo out JSON
});

在您的ajax成功将事件保存在数据库中之后，然后像这样调用refetchEvents方法：
```
 $('#calendar').fullCalendar('refetchEvents');
```

最后，我会这样做：

var myCalendar = $('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  events: 'http://localhost/phplec/sms/calendar/get_records',
  defaultDate: '2015-02-12',
  selectable: true,
  selectHelper: true,
  select: function(start, end) {
    var title = prompt('Event Title:');
    if (title) {
      var eventData = {
        title: title,
        start: start.format(),
        end: end.format()
      };
      $.ajax({
        url: "http://localhost/phplec/sms/calendar/test",
        type: 'POST',
        data: eventData,
        success: function(result) {
          if(result === "working"){
            myCalendar.fullCalendar('refetchEvents');
          }else{
            alert("Error Message");
          }
        },
        error: function(xhr, status, msg) {
          alert(msg);
        }
      });
    }
  }
});

使用codeigniter在Fullcalendar中完成事件？

1 个答案: