FullCalendar应用中如何读取JSON数据
创始人
2024-12-16 17:22:29
0次

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。本文将结合实例使用PHP读取MySQl数据,显示在FullCalendar日历中。

根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历数据,三种调用数据的方式各有所用之处,通常我们在实际项目中会结合数据库,通过PHP等后台语言来读取数据库的数据,并以json格式返回给前端,FullCalendar再处理接收的json数据显示在日历中。

HTML

一切像前面文章:日程安排FullCalendar介绍的一样,在页面中载入必要的javascript和css文件。

然后,在页面的body里加入p#calendar,用来放置日历主体。

jQuery

我们用以下代码调用FullCalendar,保存后浏览,我们可以看到页面中呈现一个漂亮的日历表,但是日历中没有具体的事件内容,我们使用FullCalendar最主要的是要在FullCalendar中展示日程安排中的事件,给用户直观的展示过去或未来时间内安排的事情。FullCalendar中的事件数据来源在events选项控制,当然如果是有多个数据来源可以使用eventSources选项。

$(function() { $('#calendar').fullCalendar({ header: {//设置日历头部信息 left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, firstDay:1,//每行第一天为周一 editable: true,//可以拖动 events: 'json.php'//事件数据 }); });

PHP

从jQuery代码中我们可以看出,FullCalendar所有事件数据来自于json.php。json.php通过连接后台MySQL数据库,读取符合条件的事件数据,并最终以JSON数据格式的形式返回,请看代码:

include_once('connect.php');//连接数据库 $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'],//事件id 'title' => $row['title'],//事件标题 'start' => date('Y-m-d H:i',$row['starttime']),//事件开始时间 'end' => date('Y-m-d H:i',$row['endtime']),//结束时间 'allDay' => $is_allday, //是否为全天事件 'color' => $row['color'] //事件的背景色 ); } echo json_encode($data);

值得一提的是,在返回的json数据中,每个字段如id,title..对应着FullCalendar的Event Object事件对象中的属性id,title..。

我们将最终数据以json_encode()输出,然后,前端FullCalendar会解析json数据并显示在日历中,这些FullCalendar都替我们做好了,只管刷新前端页面看下效果吧。

FullCalendar的读取数据操作很简单,接下来我们会讲述如何在FullCalendar日历中新增、修改和删除事件,敬请关注。

最后附上demo中的MySQL数据表calendar的表结构:

CREATE TABLE IF NOT EXISTS `calendar` (  `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 '0',  `color` varchar(20) DEFAULT NULL,  PRIMARY KEY (`id`) ) ENGINE=MyISAM  DEFAULT CHARSET=utf8

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...