Use Server Connect as data source for fullcalendar

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",


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>
<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>
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;
  <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>
    $(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");
              url: 'add-event.php',
              data: 'title=' + title + '&start=' + start_event + '&end=' + end_event,
              type: "POST",
              success: function (data) {
                displayMessage("Added Successfully");
              title: title,
              start: start,
              end: end,
              allDay: allDay,
              trip_id: trip_id,
              category_id: category_id
        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");
            url: 'edit-event.php',
            data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' +,
            type: "POST",
            success: function (response) {
              displayMessage("Updated Successfully");
        eventClick:  function(event, jsEvent, view) {
          // $('#category_id').attr('href',event.url);
    function displayMessage(message) {
      $(".response").html("<div class='success'>"+message+"</div>");
      setInterval(function() { $(".success").fadeOut(); }, 1000);
  <script src="../dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>
  <link rel="stylesheet" href="../dmxAppConnect/dmxBootstrap4TableGenerator/dmxBootstrap4TableGenerator.css">
  <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="[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>
            <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="" optiontext="trip_name" optionvalue="$value">
              <p>Modal body text goes here.</p>
            <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>
      <?php include '../includes/header_guest.html';?>
            <div class="row">
        <table class="table">
          <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="" id="tableRepeat1">
              <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>
      <div class="response"></div>
    <section><div id="calendar"></div></section>
      <?php include '../includes/footer_guest.html';?>
    <script src="../bootstrap/4/js/popper.min.js"></script>
    <script src="../bootstrap/4/js/bootstrap.min.js"></script>

There have been some discussions about this which might be useful - eg here and here

Got it first try with help from the first link. Thanks so much TomD!!!

Great - I’m glad that helped. I don’t have any experience using fullcalendar - it’s encouraging to hear that it works with Wappler.