如何在代码点火器中显示从控制器到完全压延的数据(How to Display data from controller to full calander in code igniter)

这是我的控制器

function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-15" ), ); // add more array(...events...) as required echo json_encode($data); }

我需要使用ajax在完整日历中显示这些详细信息，如何显示结果

我需要在$ data中显示日期中的姓名，数据，电子邮件，电话

Here is my controller

function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-15" ), ); // add more array(...events...) as required echo json_encode($data); }

I need to display these details in full calendar using ajax , How to display the result

I need to display Name,Data,Email,Telephone in the Date from the $data

最满意答案

您有两种方法可以让您的数据显示在日历中，并且您的事件数据必须根据文档http://fullcalendar.io/docs/event_data/Event_Object/进行格式化。这两个选项都在http://fullcalendar.io/docs/event_data/events_function/和http://fullcalendar.io/docs/event_data/events_json_feed/中描述。

我将在php中格式化数据并将事件用作json，因为对我来说它更简单，但它需要更改Test_Function() 。你可以通过以下方式获得Test_Function() echo数据：

function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-06" ), ); // add more array(...events...) as required echo json_encode($data); }

然后在jQuery中

作为JSON提要（旁注：你错过了封闭的事件）：{...）

$('#calendar').fullCalendar({ events: { url: '<?php echo site_url('Test/Test_Function'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } });

更短的版本

$('#calendar').fullCalendar({ events: '<?php echo site_url('Test/Test_Function'); ?>' });

选项：事件作为一种功能。 Test_Function()可以按Test_Function()使用，但是字符串$data被双引号" "包围，所以你的$data变量不会被解释为字符串，而且很可能php正在抛出另一个答案中提到的错误。要修改该更改，请将周围的双引号" "添加到' '或向字符串内的所有双引号添加转义序列\" ，以便将整个内容解释为字符串。修复$data后，可以执行事件创建jQuery以下方式：

$('#calendar').fullCalendar({ events: function(start, end, timezone, callback) { $.ajax({ url: '<?php echo site_url('Test/Test_Function'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { var events = []; /* loop though all the events received from php and parse them and push them into an array var event = { id = data[index] events.push(...); */ callback(events); }, error: function() { alert('there was an error while fetching events!'); }, }); } });

UPDATE 我正在使用FullCalendar v2.7.3和jQuery v2.1.4。下面是我用来获取事件的代码

php中的Test_Function()

<?php Test_Function(); function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-06" ), ); // add more array(...events...) as required echo json_encode($data); } ?>

在HTML中。根据您的设置更改事件网址。

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='stylesheet' /> <link href='../fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='../lib/moment.min.js'></script> <script src='../lib/jquery.min.js'></script> <script src='../fullcalendar.min.js'></script> <script> $(document).ready(function() { $('#calendar').fullCalendar({ events: { url: './php/test-function.php', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } }); }); </script> <style> body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <div id='calendar'></div> </body> </html>

You have two options to get your data to display in the calendar and your event data has to be formatted according to the docs http://fullcalendar.io/docs/event_data/Event_Object/. Both options are described in http://fullcalendar.io/docs/event_data/events_function/ and http://fullcalendar.io/docs/event_data/events_json_feed/

I'm going to format the data in php and use events as json since to me it's simpler however, it requires changes in your Test_Function(). You could have Test_Function() echo data the following way:

function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-06" ), ); // add more array(...events...) as required echo json_encode($data); }

Then in jQuery

As JSON feed (side note: you were missing the enclosing } for your events:{ ...)

$('#calendar').fullCalendar({ events: { url: '<?php echo site_url('Test/Test_Function'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } });

Shorter version

$('#calendar').fullCalendar({ events: '<?php echo site_url('Test/Test_Function'); ?>' });

Option: Events as a function. Test_Function() can be used as is but the string $data is surrounded by double quotes " " so your $data variable is not being interpreted as a string and more than likely php is throwing an error as mentioned in another answer. To fix that change the surrounding double quotes " " to ' ' or add an escape sequence \" to all double quotes inside the string so that the whole content it's interpreted as a string. After $data is fixed you can do the event creation jQuery the following way:

$('#calendar').fullCalendar({ events: function(start, end, timezone, callback) { $.ajax({ url: '<?php echo site_url('Test/Test_Function'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { var events = []; /* loop though all the events received from php and parse them and push them into an array var event = { id = data[index] events.push(...); */ callback(events); }, error: function() { alert('there was an error while fetching events!'); }, }); } });

UPDATE I'm using FullCalendar v2.7.3 and jQuery v2.1.4. Below is the code I'm using to get the events

Test_Function() in php

<?php Test_Function(); function Test_Function() { // Event id; // event.title is the only place where you can "display" text; // event.start: What date should the event be placed $data = array ( array ( 'id' => 1234, 'title' => "Mr Name xxxxx\nDate 2016-06-04T00:00:00\nBirthday\nemail sasa@asfda.com\nTelephone 1234567890", 'start' => "2016-06-06" ), ); // add more array(...events...) as required echo json_encode($data); } ?>

In html. Change the events url according to your setup.

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='stylesheet' /> <link href='../fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='../lib/moment.min.js'></script> <script src='../lib/jquery.min.js'></script> <script src='../fullcalendar.min.js'></script> <script> $(document).ready(function() { $('#calendar').fullCalendar({ events: { url: './php/test-function.php', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } }); }); </script> <style> body { margin: 40px 10px; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <div id='calendar'></div> </body> </html>

更多推荐