Show Appointment on the fullcalander in Jquery PHP

<?php
$sql="SELECT distinct appoinment_date FROM  `appointment` ORDER BY appointment_id DESC";
  $result=mysql_query($sql);
  $num_rows=mysql_num_rows($result);

  if($num_rows > 0)
  {
    $appoinment_date=array();
     $str = '[';
   
    while($rows=mysql_fetch_array($result))
    {

        $str_data = '{ title: \'Appointment\', start: \''.$rows["appoinment_date"].'\' },';
        $str = $str.$str_data;
    }
   
    $str = $str.']';
}
?>

    <link href="fullcalendar/css/fullcalendar.css" rel="stylesheet" type="text/css">
    <script src="fullcalendar/js/jquery.min.js"></script>
    <script src="fullcalendar/js/moment.min.js"></script>
    <script src="fullcalendar/js/fullcalendar.js"></script>

    <script>
     $(document).ready(function() {
    
     var date = new Date();

  var d = date.getDate();
 if(d <=9)
 {
  var d='0'+d;
 }
 else
 {
    var d=d;
 }
 
  var m =1 + date.getMonth();
 
    if(m <=9)
     {
      var m='0'+m;
     }
     else
     {
        var m=m;
     }
 
  var y = date.getFullYear();
  var current_date=y+'-'+m+'-'+d; 

 $('#calendar').fullCalendar({
     defaultDate: current_date,
     editable: true,
     eventLimit: true, // allow "more" link when too many events
     events: <?php echo $str; ?>
    });
   
  });
    </script>