Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people have no idea about how to read JSON data in FullCalendar application. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Developers can use FullCalendar to create powerful calendar applications. FullCalendar provides a wealth of option settings and method calls, making it easy for developers to create calendar programs with various functions. This article will use PHP to read MySQl data in conjunction with an example, which will be displayed in the FullCalendar calendar.

According to the introduction in the FullCalendar Calendar plug-in description document, there are three sources of calendar event data: one is to display calendar events directly in the form of javascript array, the second is to obtain JSON data to display calendar events, and the third is to display calendar data in the form of function callback. The three ways of calling data have their own uses. Usually, we will combine the database in the actual project and read the data of the database through PHP and other background languages. It is returned to the front end in json format, and the json data received by FullCalendar is displayed in the calendar.

HTML

As described in the previous article: scheduling FullCalendar, load the necessary javascript and css files into the page.

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

JQuery

We use the following code to call FullCalendar, save and browse, we can see that the page presents a beautiful calendar, but there is no specific event content in the calendar, the most important thing we use FullCalendar is to show the events in the schedule in FullCalendar, showing users intuitively the things arranged in the past or future time. The source of event data in FullCalendar is controlled by the events option, 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,// the first day of each row is Monday editable: true,// can drag events:' json.php'// event data});})

PHP

We can see from the jQuery code that all the event data in FullCalendar comes from json.php. Json.php reads the eligible event data by connecting to the backend MySQL database, and finally returns it in the form of JSON data format. Please see the code:

Include_once ('connect.php'); / / Connect 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 starttime''), / / event start time 'end' = > date (' Y-m-d Hlyphi Leader row ['endtime']), / / end time' allDay' = > $is_allday / / whether it is the background color of the all-day event 'color' = > $row [' color'] / / event) } echo json_encode ($data)

It is worth mentioning that in the returned json data, each field such as id,title.. Corresponds to the property id,title.. in the Event Object event object of FullCalendar.

We output the final data as json_encode (), and then the front-end FullCalendar parses the json data and displays it in the calendar. These FullCalendar are all done for us, so just refresh the front-end page to see the effect.

Reading data from FullCalendar is easy. Next we'll talk about how to add, modify, and delete events in the FullCalendar calendar.

Finally, the table structure of MySQL data table calendar in demo is attached:

CREATE TABLE IF NOT EXISTS `colorar` (`id` int (11) NOT NULL AUTO_INCREMENT, `title` varchar (100) NOT NULL, `starttime` int (11) NOT NULL, `endtime` int (11) DEFAULT NULL, `allday` tinyint (1) NOT NULL DEFAULT '0colors, `color` varchar (20) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8

After reading the above, have you mastered how to read JSON data in FullCalendar applications? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.