Json and Mobi are not communicating

Website, docs & demos
,
1

I read and reread both questions relating to this topic and although both solutions were found, neither one explained the how and the why so that a novice like myself could resolve a similar issue. Therefore I must ask again. Hopefully an actual tutorial or examples could be made to help others in the documentation.

I can copy and paste the HTML and JS all day long to made a calendar work. No problem.

I have used MySQL and Php for 15-20 years to make dynamic websites with no issues. However I have never used Json until now. I’ve only ever created recordsets to pull data directly into my webpages.

I have figured out how to create a page that will pull a json_array into I what I believe is the format required. This page is called test3.php and here is the code I created to get the json:

$sql="SELECT * FROM eventsCal";
    
$result = mysqli_query($connect, $sql);
$json_array = array();
    
    while($row = mysqli_fetch_assoc($result))
    {
        $json_array[] = $row;
    }
  
    echo json_encode($json_array);

This page when ran results in this:

[{"id":"1","title":"Comic Con New York 2021","color":"red","start":"2021-11-04 19:46:42","end":"2021-11-14 19:46:42","allDay":"0","recurring":"","resource":"","editable":"1","recurringException":"","recurringExceptionRule":"","slot":"0","EventID":"5"}]

I believe this is correct output. Please correct me if I’m wrong.

Then I have another page with the calendar code which works fine however I am not passing the json at all. Here is the code I am using that points to my test3.php json page:

mobiscroll.util.http.getJson('http://www.synectx.com/test3.php', function (events) {
    inst.setEvents(events);
}, 'json');

I do not know enough about this to know why it is not working. It’s possible that I am missing other key information or it’s as simple as a character or variable wrong. My point is that other than 1 example of connecting to a database like this: https://trial.mobiscroll.com/events/?vers=5 is not helpful to someone new or trying to decide if they want to buy this product or not.

AND…how would I do this using the CRUD operations? I can use other methods to add, edit and delete the events stored in my database but it would be nice to use these new features within the calendar itself. I do not see anywhere within the js in the CRUD example to connect to the data. If I am missing something, please direct me to it, otherwise I feel lost and may have to get a refund and find another software version. Thanks in advance.

Something helpful would be:
If this is your database type, here is code sample of how to create a needed json file and here’s an example of how to connect said json file to our scripts. You detail everything else very good with many examples and images. This is a core function that makes this all work and there’s zero documentation on it.

I get it, this is probably fundamental for the vast majority of users here. The connection between the data and the software you’re selling seems like a no brainer to at least do a quick tutorial on it.

2

Maybe this example will help. This is how I populate my bookings calendar in javascript (This also requires jQuery. Are you familiar with jQuery?)

Basically what I’m doing is, using jQuery to “get” my json from get-bookings.json.php (which returns “data”) then I initialize the eventcalendar and then at the very bottom I set the data like so : calendar.setEvents(JSON.parse(data));

$.get("get-bookings.json.php?staffid=0", function(data){

  var calendar = $('#bookings-schedule').mobiscroll5().eventcalendar({
      invalid: [<?=$invalidstring?>],
      display: 'inline',
      themeVariant: 'light',
      calendarHeight: 600,
      groupBy: 'resource',
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      dragTimeStep: <?=$scheduleincrements?>,
      resources: [<?=$resourcestring?>],
      responsive: {
          xsmall: {
              view: {
                  agenda: {type: 'day',
                             startDay: <?=$firstdayofweek?>,
                             startTime: '<?=$schedulestarttime?>',
                             endTime: '<?=$scheduleendtime?>'}
              }
          },
          small: {
              view: {
                  schedule: {type: 'day',
                             startDay: <?=$firstdayofweek?>,
                             startTime: '<?=$schedulestarttime?>',
                             endTime: '<?=$scheduleendtime?>'}
              }
          }
      },
      onEventSelect: function (event, inst) {
          mobiscroll4.toast({
              message: event.event.text
          });
      },
      onEventCreate: function (args, inst) {
          if (hasOverlap(args, inst)) {
              mobiscroll.toast({
                  message: 'Make sure not to double book'
              });
              return false;
          }
      },
      onEventUpdate: function (args, inst) {
          if (hasOverlap(args, inst)) {
              mobiscroll.toast({
                  message: 'Make sure not to double book'
              });
              return false;
          }
      }
  }).mobiscroll5('getInst');

  calendar.setEvents(JSON.parse(data));

});
3

Thank you. Sorry it took so long to respond. This is the information I was looking for. Works like a charm and sent my on my merry way!

1 Like