Question

你好，我需要完整日历jquery的帮助，我只是想在codeigniter中获取日历中的数据，但没有获取数据，我在json中获取了数据，因此如何在日历中显示。如何将数据设置为完整日历。

这是我的控制人：

   public function get_event() {

        $start = $this->input->get("start");
        $end = $this->input->get("end");

        $startdt = new DateTime('now'); // setup a local datetime
        $startdt->setTimestamp($start); // Set the date based on timestamp
        $start_format = $startdt->format('Y-m-d H:i:s');

        $enddt = new DateTime('now'); // setup a local datetime
        $enddt->setTimestamp($end); // Set the date based on timestamp
        $end_format = $enddt->format('Y-m-d H:i:s');

        $events = $this->main_model->get_events($start_format, $end_format);

        $data_events = array();

        foreach ($events->result() as $r) {

            $data_events[] = array(
                "id" => $r->id,
                "title" => $r->title,
                "end_event" => $r->end_event,
                "start_event" => $r->start_event
            );
        }


        echo json_encode(array("events" =>$data_events));

        exit();
    }

这是我的Ajax：

 $(document).ready(function() {  
    $('#calendar').fullCalendar({       
     eventSources: [
         {
              
             events: function(start, end, callback) {
                 $.ajax({
                 url: '<?php echo base_url() ?>welcome/get_event',
                 dataType: 'json',
                 data: {
                 //our hypothetical feed requires UNIX timestamps
                 start: start.unix(),
                 end: end.unix()
                 },
                 success: function(msg) {
                    
                    console.log(msg);
                     var events = msg.events;
                     callback(events);
                 },
               error: function() {
                    alert('there was an error while fetching events!');
                }, 
                  
                 });
               
             }
         },
     ]
 });
 });

这是我的观点：

  <div id="calendar" class="container">
  </div>

Answer 1

请尝试此代码，我已经测试过。

请用此代码替换您的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <link  rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"/>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

        <script>
            $(document).ready(function () {
                $('#calendar').fullCalendar({
                    defaultView: 'month',
                    events: function (start, end, timezone, callback) {
                        $.ajax({
                            url: '<?php echo base_url() ?>welcome/get_event',
                            dataType: 'json',
                            data: {
                                start: start.unix(),
                                end: end.unix()
                            },
                            success: function (msg) {
                                var events = [];
                                var data = msg.events;
                                $.each(data, function (e) {
                                    events.push({
                                        title: data[e].title,
                                        start: data[e].start_event
                                    });
                                });
                                callback(events);
                            },
                            error: function () {
                                alert('there was an error while fetching events!');
                            },
                        });

                    }

                });
            });
        </script>
    </head>
    <body>
        <div id="calendar" class="container"></div>

    </body>
</html>

如何在Codeigniter中获取事件日历

1 个答案: