I’m trying to use server connect as the data source for fullCalendar without any luck. I’ve tried using
events: "../dmxConnect/api/tripbits_all.php",
and
events: dmx.parse('data_tripbits.load()'),
but neither work. If I load the events using my own custom php file it works.
events: "fetch-event.php",
The server connect is definitely returning the right data as I put that into a bootstrap table generator and it returns the records.
Here’s the full code…
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="fullcalendar/fullcalendar.min.css">
<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<script src="fullcalendar/lib/jquery.min.js"></script>
<script src="fullcalendar/lib/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
<style>
body {
margin-top: 50px;
text-align: center;
font-size: 12px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
height: 100%;
width: 80%;
margin: 0 auto;
}
.response {
height: 60px;
}
.success {
background: #cdf3cd;
padding: 10px 60px;
border: #c3e6c3 1px solid;
display: inline-block;
}
</style>
<link rel="stylesheet" href="../fontawesome5/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../bootstrap/4/united/bootstrap.min.css">
<script src="../dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
<script>
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
editable: true,
events: "fetch-event.php",
displayEventTime: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
header: {
left: 'prevYear, prev,next, nextYear',
center: 'title',
right: 'agendaDay,agendaWeek,month,listMonth'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var start_event = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end_event = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'add-event.php',
data: 'title=' + title + '&start=' + start_event + '&end=' + end_event,
type: "POST",
success: function (data) {
displayMessage("Added Successfully");
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay,
trip_id: trip_id,
category_id: category_id
},
true
);
}
calendar.fullCalendar('unselect');
},
eventDrop: function (event, delta) {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: 'edit-event.php',
data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
displayMessage("Updated Successfully");
}
});
},
eventClick: function(event, jsEvent, view) {
//alert(event.trip_id);
$('#modal-title').text(event.title);
$('#start').val(event.start);
$('#end').val(event.end);
$('#trip_id').val("8").change();
$('#category_id').val(event.category_id);
// $('#category_id').attr('href',event.url);
$('#fullCalModal').modal();
}
});
});
function displayMessage(message) {
$(".response").html("<div class='success'>"+message+"</div>");
setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
<script src="../dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
<link rel="stylesheet" href="../dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css">
</head>
<body is="dmx-app" id="index">
<dmx-serverconnect id="data_tripbits" url="../dmxConnect/api/tripbits_all.php"></dmx-serverconnect>
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/trips.php" dmx-param:sort="serverconnect1.data.query1[0].trip_name"></dmx-serverconnect>
<div class="container-fluid">
<div class="modal" id="fullCalModal" is="dmx-bs4-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dmx-data-detail id="data_detail1"></dmx-data-detail>
<input id="start" name="start" type="text" class="form-control">
<input id="end" name="end" type="text" class="form-control">
<input id="category_id" name="category_id" type="text" class="form-control">
<select id="trip_id" name="trip_id" class="form-control" dmx-bind:options="serverconnect1.data.query1" optiontext="trip_name" optionvalue="$value">
</select>
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<?php include '../includes/header_guest.html';?>
<div class="row">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Trip</th>
<th>User</th>
<th>Category</th>
<th>Title</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="data_tripbits.data.query1" id="tableRepeat1">
<tr>
<td dmx-text="id"></td>
<td dmx-text="trip_id"></td>
<td dmx-text="user_id"></td>
<td dmx-text="category_id"></td>
<td dmx-text="title"></td>
<td dmx-text="start"></td>
<td dmx-text="end"></td>
</tr>
</tbody>
</table>
</div>
<div class="response"></div>
<section><div id="calendar"></div></section>
<?php include '../includes/footer_guest.html';?>
</div>
<script src="../bootstrap/4/js/popper.min.js"></script>
<script src="../bootstrap/4/js/bootstrap.min.js"></script>
</body></html>