views:

1003

answers:

2

I want to display event of json from mysql database. But i can't display it in calendar. I think there are some mistakes in events. But i can't point it out.

Here is my code:

calendar.php:

 $(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  $('#calendar').fullCalendar({
   theme: true,
   draggable: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
   },
   editable: true,
   /*events: "json_events.php",*/
   events: function(start, end, callback){
    $.getJSON("json_events.php", 
     {
      start: start.getTime(),
      end: end.getTime()
     },
     function(result){
      for(var i=0; i<result.length; i++){
       var row = result[i];
      }
      //format the result into an array of calevents
      $('#calendar').fullCalendar('addEvent', {id:row[0], title:row[1], start:row[2], end:row[3]} );
      //then pass the calevent array to the callback
      callback(calevents);
     }
    );
   },
   eventClick: function(event){
    editEventShow(event);

   },
   eventDrop: function(event, daydelta, minutedelta) {
    alert(event.title + ' was moved ' + daydelta + ' days\n' + minutedelta + ' minutes\n'+
     '(should probably update your database)');

   },
   dayClick: function(dayDate){
    /*$('#dialog').dialog('open');
    var date, month, year;
    date  = dayDate.getDate();
    month = dayDate.getMonth()+1;
    year = dayDate.getFullYear();
    dayDate = year + "-" + month + "-" + date;*/
    addEventShow(dayDate, this);

   },
   loading: function(bool) {
    if (bool) $('#loading').show();
    else $('#loading').hide();
   },

 });
    });
    </script>
    <style type='text/css'>

 body {
  margin-top: 40px;
  text-align: center;
  font-size: 13px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  }

 #calendar {
  width: 900px;
  margin: 0 auto;
  }

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

json_events.php:

 <?php 
  require("../../../connect/config.php"); 

  $link = mysql_connect("$server","$user","$password") or die(mysql_error());
  mysql_select_db($db);
  $query = "SELECT id,title,start, end FROM events";
  $result = mysql_query($query) or die(mysql_error());
  $arr = array();
  while($row = mysql_fetch_assoc($result)){
    $arr[] = $row; 
  }
  echo json_encode($arr); 
 ?>

Can you help me about the problem??

Thanks.

A: 

EDIT: (new answer)

  for(var i=0; i<result.length; i++){
   var row = result[i];
  }

the expression in the loop above is going to overwrite row in each iteration of the loop. so later when you're calling row[0], row[1], etc, you're not actually getting an array out of it, unless the last result[i] is in fact an array (and if that's the case the loop would be unnecessary)

i can't give you 100% of the answer, but that should get you in the right direction.

update: i looked a little harder and it looks like you need to move the line:

$('#calendar').fullCalendar('addEvent', {id:row[0], title:row[1], start:row[2], end:row[3]} );

inside of the for loop.

Brandon H
Yes and no, there is no error displaying the json_events.php.But i don't know the right way to format the result in $.getJSON() in events. Can you help me for that?
garcon1986
A: 

If you are providing JSON that is already in the CalEvent form, you can just provide a URL that returns a JSON string formatted with the information you need - the function to turn it into cal events isn't necessary, as shown in your commented out line.

JSONLint will help you figure out if you have correct JSON. What you're looking for is something along the lines of:

[
    {
      id: row[0],
      title: row[1],
      start: row[2],
      end: row[3]
    },
    {
      ... // next event
    },
]

as a string returned from json_event.php.

justkt