Fullcalendar Application--reading JSON data

Developers can use Fullcalendar to create powerful calendar apps, Fullcalendar offers a rich set of options and method calls, making it easy for developers to create calendar programs for various functions. This article uses PHP to read MySQL data in conjunction with an instance and is displayed in the Fullcalendar calendar.

View Demo Demos

According to the description in the Fullcalendar Calendar plugin documentation, the calendar body event data has a source of three, one is to display the calendar events in the form of a JavaScript array, the second is to get the JSON data as a calendar event, and three is to display the calendar data in the form of a function callback, There are three ways to call the data, usually we will combine the database in the actual project, through the background language such as PHP to read the database data, and in JSON format to return to the front end, Fullcalendar processing received JSON data displayed in the calendar.

Html

Everything is like the previous article: Schedule Fullcalendar, as described in the page, load the necessary JavaScript and CSS files.

<linkrel="stylesheet"type="Text/css"href="Css/fullcalendar.css">
<scriptsrc="Js/jquery-1.9.1.min.js"></script>
<scriptsrc="Js/jquery-ui-1.10.2.custom.min.js"></script>
<scriptsrc="Js/fullcalendar.min.js"></script>

Then, add Div#calendar to the body of the page to place the calendar body.

 
<div id=‘calendar‘></div> 

Jquery

We use the following code to call Fullcalendar, save after browsing, we can see the page to render a beautiful calendar table, but there is no specific event content in the calendar, we use Fullcalendar the most important thing is to show the events in the schedule in Fullcalendar, Give users an intuitive display of past or future scheduled events. The event data source in Fullcalendar is controlled in the events option, and of course if there are multiple data sources you can use the eventsources option.

$(function(){
$(' #calendar '). Fullcalendar ({
Header{//Set Calendar header information
Left' Prev,next today ',
Center' title ',
Right' Month,agendaweek,agendaday '
},
FirstDay:1,//First day of each row for Monday
Editable:true,//Can be dragged
Events' json.php '//Event data
});
});

Php

From the jquery code we can see that all Fullcalendar event data comes from json.php. json.php by connecting the background MySQL database, reading the event data that matches the condition, and eventually returning in the form of JSON data, see the code:

include_once(' connect.php ');//Connect to database
 
$SQL="SELECT * from Calendar";
$Query= mysql_query ($SQL);
 while($Row=mysql_fetch_array ($Query)){
$Allday=$Row[' Allday '];
$Is_allday=$Allday==1?true:false;

$Data[] =Array(
' id '=$Row[' id '],//Event ID
' title '=$Row[' title '],//Event title
' Start '= = Date (' y-m-d h:i ',$Row[' StartTime ']),//Event Start time
' End '= = Date (' y-m-d h:i ',$Row[' Endtime ']),//End time 
' AllDay '=$Is_allday,//Whether it is an all-day event
' Color '=$Row[' Color ']//Background color of the event
);
}
EchoJson_encode ($Data);

It is worth mentioning that in the returned JSON data, each field such as Id,title. The attribute id,title that corresponds to the event object of Fullcalendar.

We'll output the final data in Json_encode (), and then the front-end Fullcalendar will parse the JSON data and display it in the calendar, these fullcalendar are done for us, just refresh the front page to see the effect.

Fullcalendar's Read data operation is simple, so let's take a look at how to add, modify, and delete events in the Fullcalendar calendar.

Finally, we enclose the table structure of the MySQL data table calendar in the demo:

CREATE TABLE IF not EXISTS ' Calendar ' (
' ID ' int ( One) notNULLAuto_increment,
' Title ' varchar ( -) notNULL,
' StartTime ' int ( One) notNULL,
' Endtime ' int ( One) DEFAULTNULL,
' Allday ' tinyint (1) notNULLDEFAULT' 0 ',
' Color ' varchar ( -) DEFAULTNULL,
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT Charset=utf8

Reprint http://www.helloweba.com/view-blog-232.html