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

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>
Community Page
Last updated: