这是我的控制器
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在完整日历中显示这些详细信息,如何显示结果
<script> $(document).ready(function() { $('#calendar').fullCalendar({ events: { url: '<?php echo site_url('Air/Get_calander_fare'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } }); });我需要在$ 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
<script> $(document).ready(function() { $('#calendar').fullCalendar({ events: { url: '<?php echo site_url('Air/Get_calander_fare'); ?>', type: 'POST', data: { value1: 'aaa', value2: 'bbb' }, success: function(data) { console.log(data); }, error: function() { alert('there was an error while fetching events!'); }, } }); });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>更多推荐
发布评论