我尝试在我的系统中集成日历模板。在演示js文件中，示例事件是这样编写的：
events: [
{
id: 1,
title: 'Title 1',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 2,
title: 'Title 2',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
}
我需要从 mysql 获取这些数据。我编写了php脚本，它以json格式给了我结果。但是我不知道将结果加载到.js文件中的方式。我知道这是一个简单的问题。谢谢你的时间。
以下是所有.js文件：
$(function() {
// fullcalendar
fullcalendar.calendar_selectable();
});
fullcalendar = {
calendar_selectable: function() {
var $calendar_selectable = $('#ajanda'),
calendarColorsWrapper = $('<div id="calendar_colors_wrapper"></div>');
var calendarColorPicker = helpers.color_picker(calendarColorsWrapper).prop('outerHTML');
if($calendar_selectable.length) {
$calendar_selectable.fullCalendar({
header: {
left: 'title today',
center: '',
right: 'month,agendaWeek,agendaDay prev,next'
},
buttonIcons: {
prev: 'md-left-single-arrow',
next: 'md-right-single-arrow',
prevYear: 'md-left-double-arrow',
nextYear: 'md-right-double-arrow'
},
buttonText: {
today: ' ',
month: ' ',
week: ' ',
day: ' '
},
aspectRatio: 2.1,
defaultDate: moment(),
selectable: true,
selectHelper: true,
select: function(start, end) {
UIkit.modal.prompt('' +
'<h3 class="heading_b uk-margin-medium-bottom">Etkinlik Ekle</h3><div class="uk-margin-medium-bottom" id="calendar_colors">' +
'Etkinlik Rengi:' +
calendarColorPicker +
'</div>' +
'Etkinlik:',
'', function(newvalue){
if($.trim( newvalue ) !== '') {
var eventData,
eventColor = $('#calendar_colors_wrapper').find('input').val();
eventData = {
title: newvalue,
start: start,
end: end,
color: eventColor ? eventColor : ''
};
//kaydediyorum
var datastring='do=kayit&title='+eventData.title+'&start='+(eventData.start)+'&end='+(eventData.end)+'&color='+(eventData.color);
$.ajax({
type: "POST",
data: datastring,
url: "script/ajax_calendar.php",
dataType: "html"
});
$calendar_selectable.fullCalendar('renderEvent', eventData, true); // stick? = true
$calendar_selectable.fullCalendar('unselect');
}
}, {
labels: {
Ok: 'Kaydet'
}
});
},
editable: true,
eventLimit: true,
timeFormat: '(HH)(:mm)',
events: [
{
title: 'Tüm Gün Aktivitesi',
start: ('2016-01-01')
},
{
id: 1,
title: 'Uzun Aktivite',
start: ('2016-01-02'),
end: ('2016-01-05'),
color: 'orange',
url: 'http://google.com'
},
{
id: 1,
title: 'Saatli olan',
start: ('2016-01-07 15:00'),
color: 'brown'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(8, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
id: 999,
title: 'Tekrarlayan Aktivite',
start: moment().startOf('month').add(15, 'days').format('YYYY-MM-DD'),
color: '#689f38'
},
{
title: 'Konferans',
start: moment().startOf('day').add(14, 'hours').format('YYYY-MM-DD HH:mm'),
end: moment().startOf('day').add(15, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Meeting',
start: moment().startOf('month').add(14, 'days').add(10, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Lunch',
start: moment().startOf('day').add(11, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#d84315'
},
{
title: 'Meeting',
start: moment().startOf('day').add(8, 'hours').format('YYYY-MM-DD HH:mm'),
color: '#7b1fa2'
},
{
title: 'Happy Hour',
start: moment().startOf('month').add(1, 'days').format('YYYY-MM-DD')
},
{
title: 'Dinner',
start: moment().startOf('day').add(19, 'hours').format('YYYY-MM-DD HH:mm')
},
{
title: 'Birthday Party',
start: moment().startOf('month').add(23, 'days').format('YYYY-MM-DD')
},
{
title: 'NEW RELEASE (link)',
url: 'http://themeforest.net/user/tzd/portfolio',
start: moment().startOf('month').add(10, 'days').format('YYYY-MM-DD'),
color: '#0097a7'
}
]
});
}
}
};
最简单的方法是更改 php 脚本以将 JSON 数据输出为 js 变量。
// output the data like this
header("Content-Type: application/javascript");
$data = json_encode($data_array);
echo "var events_json = $data;";
exit;
然后将 php 脚本作为 javascript 包含在您的网页中，在主代码上方。
<script src="myScript.php"></script>
然后，您可以在主javascript中使用变量名称，而无需异步加载任何内容。
events: events_json
你可以试试这个：
$(document).ready(function () {
var = 'test';
$.ajax({
type: "POST",
url: "yourservice.php",
data: {
var: var
},
success: function (response) {
console.log(response);
var decodedJson = JSON.parse(response);
console.log(decodedJson);
}
});
});