我和我的团队目前正在尝试创建一个网站来组织议程(使用Fullcalendar(。
我们有一个无法修改的外部数据库和另一个用于项目的数据库。要与外部数据库通信并获得可用性(创建约会(和已进行的约会,我们必须创建一个 API 并获取 json 文件。 我首先尝试将可用性呈现为事件。
由于我是一个完整的大三学生,因此我在转换 json 文件发送给我的数据时遇到了麻烦。 收到的日期格式是"字符串",而不是日期格式(FulCalendar 需要呈现事件(。
我们在symfony 2.8上工作
这是我的控制器操作:
public function indexAction()
{
// parameters
$datefin = "04-08-2017";
$centercab = '13';
$daynum = '5'; // number of days in the week (5,6 or 7)
if($daynum==5){
$weekend = 'false';
} else {
$weekend = 'true';
}
//We take the date of the begining of the week end the ending to initialize the rendering of the calendar
$ddate= new DateTime();
$endweek= clone $ddate;
// we add 5 or 7 days according to the pros parameters for the week vue
$endweek->modify('+'. $daynum .' day');
// We change de date format of the day date and the end of the week date
$ddate= $ddate->format('d-m-Y');
$endweek= $endweek->format('d-m-Y');
// print the date to check
print "du " . $ddate. " au " . $endweek . "</br>";
$motif_referent_cab = '238'; // number of the motive in the external DB
$req = "http://connect.mydb.com/availability?center=".$centercab."&motive=".$motif_referent_cab."&datesince=".$ddate."×ince=00:00&maxresults=50";
// read and decode .json file
$weekdates = file_get_contents($req);
$weekdatesjson = json_decode($weekdates, true);
// var_dump($weekdatesjson["data"]);
$i=0;
$eventstab =Array();
foreach ($weekdatesjson["data"] as $key=>$value){ // $value refers to arrays (with dates as index) contained in the array "dispo"
foreach ($value as $value1){ // $value1 refers to hours of availabilities (dispo) in arrays (dates)
$eventstab[$i] = "{title: 'Dispo', start: '".$ddate."T".$value1.":00'},";
$i++;
}
}
$lesdispos = implode($eventstab);
return $this->render(MyBundle:Default:index.html.twig',
array(
'Date_jour'=>$ddate,
'lesdispos'=>$lesdispos // variable 'lesdispos' client side will contain the data of'$lesdispos', that is on server side.
)
);
}
这是我的日历.js文件:
<!-- Page specific script -->
$(document).ready(function(){
/* --------------------------------------------- */
/* ---------- Initialize the calendar ---------- */
/* --------------------------------------------- */
// Date for the calendar events (dummy data)
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
lang: 'fr',
defaultView: 'agendaWeek',
editable: true,
selectable: true,
selectHelper: true,
/* aspectRatio: 1,*/
/*defaultDate: new Date(),*/
slotDuration: '00:15:00',
slotLabelInterval: '00:15:00', // marque l'intervalle de temps sur axe des y à gauche
snapDuration: '00:15:00',
minTime: '07:00:00', // heure de début du calendrier
maxTime: '19:00:00', // Heure de fin du calendrier
axisFormat: 'HH:mm',
timeFormat: 'HH(:mm)',
slotLabelFormat:"HH:mm",
columnFormat: 'ddd D/MM',
eventLimit: true, // allow "more" link when too many events
defaultTimedEventDuration: '00:15:00', // Durée d'un rendez vous par défaut
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'agendaWeek,agendaDay, listDay'
},
buttonText: {
today: "Aujourd'hui",
month: 'Mois',
week: 'Semaine',
day: 'Jour',
mois: 'Mois',
annee: 'Année',
listDay: 'Planning'
},
// Random default events
events: [
disponibilities
]
});
});
var disponibilities = document.getElementById('disponibilities').getAttribute('data-disponibility');
console.log(disponibilities);
我使用这样的隐藏div 传递信息:
<div id="calendar"></div>
<div class="visually-hidden" data-disponibility="{{ lesdispos }}" id="disponibilities"></div>
我在控制台中收到此消息:
{title: 'Dispo', start: '09-08-2017T10:10:00'},{title: 'Dispo', start: '09-08-2017T10:40:00'},{title: 'Dispo', start: '09-08-2017T11:00:00'},{title: 'Dispo', start: '09-08-2017T11:10:00'},{title: 'Dispo', start: '09-08-2017T11:30:00'}
我有这个错误: 我的控制台中的错误
我们假设给完整日历的格式不是一个好的格式。如果我们朝好的方向看,有人知道吗?如果是,请问解决方案是什么?
$ddate= $ddate->format('d-m-Y');
是问题所在。我认为您应该将其更改为
$ddate= $ddate->format('Y-m-d');
以便日期采用 fullCalendar 可以理解的格式。
根据 https://fullcalendar.io/docs/utilities/Moment/,您可以使用以下格式的字符串:
- ISO 日期字符串 (
Y-m-d
将生成其中的日期部分,供您使用 目的( - Unix 时间戳。