0

I have been digging at this issue for the better part of a fortnight - no joy, reading any and all terms i could think of searching on here and Google (this post is the last straw).

Essentially, I have the below code retrieving data via JSON from my database. Displays the event, but in the "allDay" slot. To help, i did a var_dump from the JSON file and it is also below.

Can anyone see where/why this isn't placing the events at their appropriate time slots?

var_dump from JSON:

object(PDOStatement)#2 (1) { ["queryString"]=> string(34) "SELECT * FROM heli_cal ORDER BY id" } [{"id":"000000000000001","title":"Test","start":"2014-10-19 16:30:00","end":"2014-10-19 17:00:00","url":"","allDay":"false"},{"id":"000000000000002","title":"James","start":"2014-10-23 09:00:00","end":"2014-10-23 17:00:00","url":"","allDay":"true"}]

JQuery (Fullcalendar):

<script>
    $(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();     

        var calendar = $('#calendar').fullCalendar({
            allDayDefault: false,
            editable: true,
            defaultView: 'agendaWeek',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'basicDay,agendaDay,agendaWeek,month',
            },


        events: function(start, end, timezone, callback) {
            JSON.parse($.ajax({
                type: "GET",
                url: "required/events.php",
                async: false,
                success: function(doc) {
                    var events = [];
                    $(doc).find('event').each(function() {
                        events.push({
                        id: $(this).attr('id'),
                        title: $(this).attr('title'),
                        start: $(this).attr('start'),
                        end: $(this).attr('end'),
                        allDay: $(this).attr('allDay')
                });
            });
            callback(events);
        }
            }).responseText);
        }, 

   // Convert the allDay from string to boolean
   eventRender: function(event, element, view) {
    if (event.allDay === 'true') {
     event.allDay = true;
    } else {
     event.allDay = false;
    }
   },
   selectable: true,
   selectHelper: true,
   select: function(start, end, allDay) {
   var title = prompt('Event Title:');
   //var url = prompt('Type Event url, if exits:');
   if (title) {
   var start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: 'actions/event_add.php',
   data: 'title='+ title+'&start='+ start +'&end='+ end,
   type: "POST",
   success: function(json) {
   alert('Added Successfully');
   }
   });
   calendar.fullCalendar('renderEvent',
   {
   title: title,
   start: start,
   end: end,
   allDay: allDay
   },
   true // make the event "stick"
   );
   }
   calendar.fullCalendar('unselect');
   },

   editable: true,
   eventDrop: function(event, delta) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
   url: 'actions/event_update.php',
   data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
   type: "POST",
   success: function(json) {
    alert("Updated Successfully");
   }
   });
   },

eventClick: function(calEvent, jsEvent, view) {

        alert('Event: ' + calEvent.title + ' Start: ' + calEvent.start + ' Finish: ' + calEvent.end + ' allDay: ' + calEvent.allDay);
    },

   eventResize: function(event) {
   var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss");
   var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss");
   $.ajax({
    url: 'actions/event_update.php',
    data: 'title='+ event.title+'&start='+ start +'&end='+ end +'&id='+ event.id ,
    type: "POST",
    success: function(json) {
     alert("Updated Successfully");
    }
   });

}

  });

 });
</script>

JSON PHP:

<?php 
// List of events
 $json = array();

 // Query that retrieves events
 $query = "SELECT * FROM heli_cal ORDER BY id";

 // connection to the database
 try {
 $bdd = new PDO('mysql:host=****;dbname=****', '****', '****');
 } catch(Exception $e) {
  exit('Unable to connect to database.');
 }
 // Execute the query
 $result = $bdd->query($query) or die(print_r($bdd->errorInfo()));

 // sending the encoded result to success page
 echo json_encode($result->fetchAll(PDO::FETCH_ASSOC));

?>

Debugging:

    [Object, Object] 0: ObjectallDay: "false"
end: "2014-10-19 17:00:00"
id: "000000000000001"
start: "2014-10-19 16:30:00"
title: "Test"
url: ""
__proto__: Object__defineGetter__: function __defineGetter__() {
    [native code]
}
__defineSetter__: function __defineSetter__() {
    [native code]
}
__lookupGetter__: function __lookupGetter__() {
    [native code]
}
__lookupSetter__: function __lookupSetter__() {
    [native code]
}
constructor: function Object() {
    [native code]
}
hasOwnProperty: function hasOwnProperty() {
    [native code]
}
isPrototypeOf: function isPrototypeOf() {
    [native code]
}
propertyIsEnumerable: function propertyIsEnumerable() {
    [native code]
}
toLocaleString: function toLocaleString() {
    [native code]
}
toString: function toString() {
    [native code]
}
valueOf: function valueOf() {
    [native code]
}
get __proto__: function __proto__() {
    [native code]
}
set __proto__: function __proto__() {
    [native code]
}
1: ObjectallDay: "true"
end: "2014-10-23 17:00:00"
id: "000000000000002"
start: "2014-10-23 09:00:00"
title: "James"
url: ""
__proto__: Object__defineGetter__: function __defineGetter__() {
    [native code]
}
__defineSetter__: function __defineSetter__() {
    [native code]
}
__lookupGetter__: function __lookupGetter__() {
    [native code]
}
__lookupSetter__: function __lookupSetter__() {
    [native code]
}
constructor: function Object() {
    [native code]
}
hasOwnProperty: function hasOwnProperty() {
    [native code]
}
isPrototypeOf: function isPrototypeOf() {
    [native code]
}
propertyIsEnumerable: function propertyIsEnumerable() {
    [native code]
}
toLocaleString: function toLocaleString() {
    [native code]
}
toString: function toString() {
    [native code]
}
valueOf: function valueOf() {
    [native code]
}
get __proto__: function __proto__() {
    [native code]
}
set __proto__: function __proto__() {
    [native code]
}
length: 2 __proto__: Array[0]
James Ham
  • 29
  • 4
  • Your json dump works: http://jsfiddle.net/3E8nk/569/. Try doing this `events: "required/events.php",` with a function instead i.e. `events: function(start, end) { //get with ajax, log, and return }` – Richard Löwenström Oct 20 '14 at 11:34
  • Would you be able to put that into a JSFiddle? As I'm not 100% with how to use the function in this scenario.. – James Ham Oct 20 '14 at 11:39
  • Do it synchronously: http://stackoverflow.com/questions/6685249/jquery-performing-synchronous-ajax-requests – Richard Löwenström Oct 20 '14 at 11:41
  • @RichardHermanson - I've updated as suggested, but now have no events? Could you just confirm that the above is correct (sorry - not 100% with all AJAX yet) – James Ham Oct 20 '14 at 11:49
  • You need async: false. Otherwise it's good. Can you log it/use your favorite debugger and post it here too so we can see what's wrong? – Richard Löwenström Oct 20 '14 at 11:51
  • `0: {id:000000000000001, title:Test, start:2014-10-19 16:30:00, end:2014-10-19 17:00:00, url:,…} allDay: "false" end: "2014-10-19 17:00:00" id: "000000000000001" start: "2014-10-19 16:30:00" title: "Test" url: "" 1: {id:000000000000002, title:James, start:2014-10-23 09:00:00, end:2014-10-23 17:00:00, url:,…} allDay: "true" end: "2014-10-23 17:00:00" id: "000000000000002" start: "2014-10-23 09:00:00" title: "James" url: ""` – James Ham Oct 20 '14 at 11:58
  • looks like it worked perfectly? but it's just not displaying? – James Ham Oct 20 '14 at 11:59
  • That looks very strange. How did you log it? Just use `console.log(myEvents);`. This might help you see what I'm talking about: http://jsbeautifier.org/ – Richard Löwenström Oct 20 '14 at 12:02
  • Uncaught ReferenceError: myEvents is not defined – James Ham Oct 20 '14 at 12:11
  • ... `var myEvents = JSON.parse($.ajax({stuff}).responseText); console.log(myEvents); return myEvents;` – Richard Löwenström Oct 20 '14 at 12:12
  • Debugging added up top - again, showing that it should work? – James Ham Oct 20 '14 at 12:22
  • Works here: http://jsfiddle.net/3E8nk/570/. Look, there seem to be some minimal understanding issues. Try using google chromes developer tools and stuff. Maybe that will make it easier for you. gl – Richard Löwenström Oct 20 '14 at 12:28
  • Hmm.. Ok, thanks for your help Richard - Appreciate it. Will have a bit more of a play and post back here if i find the fault.. – James Ham Oct 20 '14 at 12:35
  • Sry I forgot about this. The 4th argument is a callback. [Look here](http://fullcalendar.io/docs/event_data/events_function/). Should solve the problem – Richard Löwenström Oct 20 '14 at 15:10
  • @RichardHermanson - I've done further research, and have it all working up to the point where I am not getting a "Sizzle" error.. Any idea on what may be causing this? – James Ham Oct 21 '14 at 06:36
  • If you can create a fiddle of your problem I'll help fix it but atm this is just guessing in the dark – Richard Löwenström Oct 21 '14 at 12:10
  • @RichardHermanson - Thanks a million for your help, it ended up being the `.find('event')` in the success variable that was throwing it all out of wack! You're advice on here has been a bigger help than you realise as it has given me new ways to debug issues! If you want to put something below as an answer so i can give you the green tick (and the Rep that comes with) for all your help! :) – James Ham Oct 22 '14 at 06:54

0 Answers0