私はまだ JavaScript/Json の初心者であり (Json を使用したことはありません)、DayPilot カレンダーを使用しようとすると問題が発生します。（私もフランス人なので、間違いを許してください）。
http://code.daypilot.org/17910/html5-event-calendar-open-source
ソースをダウンロードして使用すると完全に機能しますが、データベースに適用しようとすると機能しません。
ソースコード ：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Event Calendar</title>
<!-- demo stylesheet -->
<link type="text/css" rel="stylesheet" href="media/layout.css" />
<link type="text/css" rel="stylesheet" href="themes/calendar_g.css" />
<link type="text/css" rel="stylesheet" href="themes/calendar_green.css" />
<link type="text/css" rel="stylesheet" href="themes/calendar_traditional.css" />
<link type="text/css" rel="stylesheet" href="themes/calendar_transparent.css" />
<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />
<!-- helper libraries -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- daypilot libraries -->
<script src="js/daypilot/daypilot-all.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div class="bg-help">
<div class="inBox">
<h1 id="logo"><a href='http://code.daypilot.org/17910/html5-event-calendar-open-source'>HTML5 Event Calendar</a></h1>
<p id="claim"><a href="http://javascript.daypilot.org/">DayPilot for JavaScript</a> - AJAX Calendar/Scheduling Widgets for JavaScript/HTML5/jQuery</p>
<hr class="hidden" />
</div>
</div>
</div>
<div class="shadow"></div>
<div class="hideSkipLink">
</div>
<div class="main">
<div style="float:left; width: 160px;">
<div id="nav"></div>
</div>
<div style="margin-left: 160px;">
<div id="dp"></div>
</div>
<script type="text/javascript">
var nav = new DayPilot.Navigator("nav");
nav.showMonths = 3;
nav.skipMonths = 3;
nav.selectMode = "week";
nav.onTimeRangeSelected = function(args) {
dp.startDate = args.day;
dp.update();
loadEvents();
};
nav.init();
var dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.onEventMoved = function (args) {
$.post("backend_move.php",
{
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
},
function() {
console.log("Moved.");
});
};
dp.onEventResized = function (args) {
$.post("backend_resize.php",
{
id: args.e.id(),
newStart: args.newStart.toString(),
newEnd: args.newEnd.toString()
},
function() {
console.log("Resized.");
});
};
// event creating
dp.onTimeRangeSelected = function (args) {
var name = prompt("New event name:", "Event");
dp.clearSelection();
if (!name) return;
var e = new DayPilot.Event({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: name
});
dp.events.add(e);
$.post("backend_create.php",
{
start: args.start.toString(),
end: args.end.toString(),
name: name
},
function() {
console.log("Created.");
});
};
dp.onEventClick = function(args) {
alert("clicked: " + args.e.id());
};
dp.init();
loadEvents();
function loadEvents() {
var start = dp.visibleStart();
var end = dp.visibleEnd();
$.post("backend_events.php",
{
start: start.toString(),
end: end.toString()
},
function(data) {
console.log(data);
dp.events.list = data;
dp.update();
});
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#theme").change(function(e) {
dp.theme = this.value;
dp.update();
});
});
</script>
</div>
<div class="clear">
</div>
</body>
</html>
そして backend_events.php :
<?php
require_once '_db.php';
$start = '2015-02-22 00:00:00';
$end = '2015-09-22 00:00:00';
$stmt = $db->prepare('SELECT * FROM events WHERE NOT ((end <= :start) OR (start >= :end))');
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->execute();
$result = $stmt->fetchAll();
class Event {}
$events = array();
foreach($result as $row) {
$e = new Event();
$e->id = '1';
$e->text = 'coucou';
$e->start = '2015-05-13T10:00:00';
$e->end = '2015-05-13T12:00:00';
$events[] = $e;
}
header('Content-Type: application/json');
echo json_encode($events);
?>
すべてのイベントを同じ日付にします (テストではこのようにしました) が、機能します!
また、データベースを使用して backend_events.php を変更しようとすると、カレンダーにイベントが表示されず、コンソールに「未定義のプロパティ 'getTime' を読み取れません」というエラーが表示されます。
ご覧のとおり、データベースから取得したものも使用していません。
<?php
// Insertion de tous les prérequis
include '../Config/prerequis.php';
$bdd = Donnee::getInstance()->connexion;
$start = '2015-02-22 00:00:00';
$end = '2015-09-22 00:00:00';
$stmt = $bdd->prepare('SELECT * FROM CRENEAU WHERE NOT ((Date_fin <= :start) OR (Date_debut >= :end)) AND ID_CONTRAT=16');
$stmt->bindParam(':start', $start);
$stmt->bindParam(':end', $end);
$stmt->execute();
$result = $stmt->fetchAll();
class Event {}
$events = array();
// foreach($result as $row) {
// $e = new Event();
// $e->id = $row['ID'];
// $e->text = 'coucou';
// $e->start = implode('T',explode(' ', $row['Date_debut']));
// echo implode('T',explode(' ', $row['Date_debut'])).'<br>';
// $e->end = implode('T',explode(' ', $row['Date_fin']));
// $events[] = $e;
// }
foreach($result as $row) {
$e = new Event();
$e->id = '1';
$e->text = 'coucou';
$e->start = '2015-05-13T10:00:00';
$e->end = '2015-05-13T12:00:00';
$events[] = $e;
}
header('Content-Type: application/json');
echo json_encode($events);
?>
私は何日もそれを修正しようとしましたが、より資格のある友人に尋ねても、解決策を見つけることができます. あなたがアイデアを持っているなら、私は感謝します!
ありがとう、マリン。