javascript - 从数据库中获取完整日历的事件详细信息(标题、开始和结束)

Question

我真的搜索了很多关于这个的东西，但我仍然没有解决我的问题。我正在创建一个日历(使用插件 fullcalendar 并使用 codeigniter 作为后端)来显示游览及其特定时间跨度。因此，在这种情况下，事件的标题将是旅游名称，并且在旅游期间，将获取开始和结束日期。

我已经成功地将数据插入数据库，只是事件没有出现在各自的日期。

这些是我到目前为止编写的代码:

Controller :Calendar.php

function view_tours(){ 
    $this->load->model('Calendar_model');
    $tours = $this->Calendar_model->getTours();
    echo json_encode($tours);
}

function add_tour(){
    $sdate = $this->input->post('start_date'); //start date
    $edate = $this->input->post('end_date'); //end date
    if($this->form_validation->run() == TRUE){ //column name in db=>name in form
        $tour = array('tour_name' => $this->input->post('tour_name'), 
            'start_date' => date('Y-m-d', strtotime($sdate)), 
            'end_date' => date('Y-m-d', strtotime($edate)),
            'slots' => $this->input->post('slots'),
            'rate' => $this->input->post('rate'),);
        $this->Calendar_model->insert_tour($tour);
        echo 'success';
    }
    else {
        redirect(base_url().'Calendar');
        echo "error";   
    }
}

模型:Calendar_model.php

public function getTours(){
    $query = $this->db->get('tours');
    return $query -> result_array();
}
function insert_tour($tour){
        $this->db->insert('tours', $tour); 
        return $this->db->insert_id();
}

查看:home.php (这是html文件)

<div id="AddModal" class="modal fade">
     <div class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"> Add a Tour </h4> 
                </div>
                <div id="modalBody" class="modal-body"> 
                     <?php
                          echo validation_errors();
                     ?>
                     <form class="form-horizontal" id="crud-form" method="POST" action="<?php echo base_url();?>Calendar/add_tour">

                     <div class="form-group">
                          <label class="col-md-4 control-label" for="tour_name">Tour Name</label>
                          <div class="col-md-4">
                               <input type="text" class="form-control" id="tour_name" name="tour_name"/>
                          </div>
                      </div>

                      <div class="form-group">
                           <label class="col-md-4 control-label" for="start_date">Start Date</label>
                           <div class="col-md-4">
                                <input type="date" class="form-control" id="start_date" name="start_date"/>
                           </div>
                      </div>

                      <div class="form-group">
                           <label class="col-md-4 control-label" for="end_date">End Date</label>
                           <div class="col-md-4">
                                <input type="date" class="form-control" id="end_date" name="end_date"/>
                           </div>
                       </div>


                       <div class="form-group">
                            <label class="col-md-4 control-label" for="slots">Slots</label>
                            <div class="col-md-4">
                                 <input type="text" class="form-control" id="slots" name="slots"/>
                            </div>
                        </div>

                        <div class="form-group">
                             <label class="col-md-4 control-label" for="rate">Rate</label>
                             <div class="col-md-4">
                                  <input type="text" class="form-control" id="rate" name="rate"/>
                             </div>
                       </div>

                       <div class="form-group">
                            <label class="col-md-4 control-label" for="color">Color</label>
                            <div class="col-md-4">
                                 <input id="color" name="color" type="text" class="form-control input-md" readonly="readonly" />
                                 <span class="help-block">Click to pick a color</span>
                             </div>
                       </div>

                       <button type="submit" class="btn btn-primary"> Add Tour</button>
                       </form>


                 </div> <!--end of modal body-->
                 <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                 </div>
           </div>
      </div>
</div>

我最近对此进行了编辑，但这不起作用。
JS 文件:main.js 我曾尝试使用 $.ajax 选项获取数据，但是当我这样做时，日历本身不会出现。代码有什么问题？我只是 ajax 的初学者。

events: {
    url: base_url+'Calendar/view_tours',
    type: 'POST',
    data{
        title: tour_name,
        start: start_date,
        end: end_date

    },error: function(){
        alert('error in fetching from database!');
    }
}, //end of events

我只是粘贴了一段js。我知道日历是“以某种方式”从数据库中检索数据，因为我可以看到事件，但是，对于所有添加的事件，它只实时出现在当前日期并显示当前时间。我还添加了一个工具提示来查看旅游名称(标题)是否正在被阅读，确实如此。

这是实际结果:click to see image

问题总结:事件不在各自的日期，添加的时间是实时的。

Answer 1

所以您的问题似乎是您的 URL 返回的 JSON 对象具有无法识别的 fullCalendar 数据。所以你必须像这样获取事件:

events: base_url+'Calendar/view_tours',

并将数据库的列从 tour_id 更改为 id，将 tour_name 更改为 title，start_date 到 start 和 end_date 到 end。这将创建正确的 JSON 对象。