使用codeigniter在Full Calender中发生Feating事件



我使用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请求并连接到DB

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";
    }

现在我想在第laod页上完整显示我的数据库。我成功地从数据库中获取了事件,并将其转换为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,现在如何将其传递给事件。

根据我的理解,如果你想在日历日点击,它会提示你输入标题,然后你将数据提交到数据库,然后你想再次看到它。以下是您需要采取的步骤:

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

    $('#calendar').fullCalendar({
        // ....your other methods...
        events: 'http://localhost/phplec/sms/calendar/get_records' //this should echo out JSON
    });
    
  2. 在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);
        }
      });
    }
  }
});

相关内容

  • 没有找到相关文章

最新更新