码迷,mamicode.com
首页 > Web开发 > 详细

FullCalendar应用——读取JSON数据

时间:2014-05-06 12:00:56      阅读:463      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

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

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

HTML

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

 
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> 
<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/jquery-ui-1.10.2.custom.min.js"></script> 
<script src="js/fullcalendar.min.js"></script> 

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

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

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 

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

FullCalendar应用——读取JSON数据,布布扣,bubuko.com

FullCalendar应用——读取JSON数据

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/yun007/p/3710542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!