Integrating jQuery fullcalendar into PHP website

php jquery calendar fullcalendar

41,349

Solution 1

Make sure that your PHP can output the following HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){
    $('#example').calendar();
  });
  </script>

</head>
<body>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script  src="http://dev.jquery.com/view/trunk/plugins/calendar/jquery-calendar.js"></script>
<input type="text" id="example" value="Click inside me to see a calendar" style="width:300px;"/>
</body>
</html>

Here's a sample how you can do it, by using json_encode:

$(document).ready(function() { 

      $('#calendar').fullCalendar({ 
         draggable: true, 
         events: "json_events.php", 
         eventDrop: function(event, delta) { 
            alert(event.title + ' was moved ' + delta + ' days\n' + 
               '(should probably update your database)'); 
         }, 
         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 
      }); 

   });

And here's the PHP code:

<?php

   $year = date('Y'); 
   $month = date('m');

   echo json_encode(array( 

      array( 
         'id' => 1, 
         'title' => "Event1", 
         'start' => "$year-$month-10", 
         'url' => "http://yahoo.com/" 
      ), 

      array( 
         'id' => 2, 
         'title' => "Event2", 
         'start' => "$year-$month-20", 
         'end' => "$year-$month-22", 
         'url' => "http://yahoo.com/" 
      ) 

   ));

?>

Solution 2

"2010-02-11 11:00:00" format works fine to specify time for me (without "T" inside), the key of the solution is to set the "allDay" attribute of an event to empty string.

Solution 3

In PHP - JSON:

$eventsArray['allDay'] = "false"; //doesn't work

$eventsArray['allDay'] = false; //did the trick to have a NON FULL DAY correctly rendered!!

Solution 4

I had the same problem and just found out how to make it work. Here is the code that you should use in your php file:

$query = "select * from events where accountNo = '$accountNo'";
$res = mysql_query($query) or die(mysql_error());
$events = array();
while ($row = mysql_fetch_assoc($res)) {
    $start = "2010-01-08T08:30"";//Here you have to format data from DB like this.
    $end = "2010-01-08T08:30";//This format works fine
    $title = $row['firstName']." ".$row['lastName'];
    $eventsArray['id'] =  $row['id'];
    $eventsArray['title'] = $title;
    $eventsArray['start'] = $start;
    $eventsArray['end'] = $end;
    $eventsArray['allDay'] = "";
    $events[] = $eventsArray;
}


echo json_encode($events);

I hope it helps :).

Solution 5

the output to echo an event should be in this format:

$('#calendar').fullCalendar({
  events: [{
    title: 'Awesome Event Title', 
    start: new Date($start_year, $start_month, $start_day),     or   end: new Date(y, m, d),
    end: new Date($end_year, $end_month, $end_day)    or   end: new Date(y, m, d)
  }]
});

View more solutions

41,349

Author by

SUN Jiangong

Updated on July 09, 2022

Comments

SUN Jiangong almost 2 years

I would like to integrate the jQuery fullcalendar into my PHP website, but I don't know how to handle the event and how to use the JSON data from MySQL.

Any advice would be appreciated.
SUN Jiangong over 14 years

Thanks a lot for your comment. But i think you have some misunderstanding or i didn't describe it very clearly. I want to add the jquery weekcalendar plugin and there is a sample for it. Everything is in session there. But i want to make it work with mysql database. Thanks a lot!!!!!!!
SUN Jiangong over 14 years

Thanks for your post. You kind of have indicated my problem. Actually, I can't add/edit/delete the events and can't grab the data from mysql in the way of json. I'll try to arrange and solve it. And thanks.
roberthuttinger over 11 years

depending on the server make sure you have date_default_timezone_set('America/YOUR_TZ'); before the date(XXX) call
chhameed over 11 years

Ooh Thanks Dude it save's me