FullCalendar应用——读取JSON数据
开发者可以使用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数据的更多相关文章
- iOS彩票项目--第七天,初次读取json数据、KVC转模型技巧、运行时字典转模型以及初步对显示网页的操作并且跟踪标签
一.初次读取json数据 二.KVC转模型技巧,这里的技巧主要解决的是字典中的key 与 模型中有的属性对应不起来的时候 的解决办法 <方法1> <方法2>运行时字典转模型,运 ...
- Java学习-029-JSON 之三 -- 模仿 cssSelector 封装读取 JSON 数据方法
前文简单介绍了如何通过 json-20141113.jar 提供的功能获取 JSON 的数据,敬请参阅:Java学习-028-JSON 之二 -- 数据读取. 了解学习过 JQuery 的朋友都知道, ...
- ajax读取json数据
首先建立json.txt文件 { "programmers": [ { "firstName": "Brett", "lastNa ...
- 在MVC中动态读取JSON数据创建表格
//使用getJSON // ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /M ...
- js读取json数据(php传值给js)
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- 当向后台插入或读取JSON数据遇见回车时
今天在项目中发现.当插入或读取JSON数据时遇见回车符.返回JSON数据格式时会报错(firebug里体现为乱码),百度了一下发现JSON不支持字符串里存在回车! 解决的方法: 在向接口插入带json ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- 关于跨域读取json数据我的理解
这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...
随机推荐
- Java 动态太极图 DynamicTaiChi (整理)
package demo; import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import jav ...
- BPMN2新规范与Activiti5
上世纪九十年代以后,随着WfMC联盟的成立,BPM市场群雄逐鹿如火如荼,工作流技术得到了突飞猛进的发展,其中IBM.Oracle等大型软件厂商在工作流领域各扯大旗割据一方.2011年BPMN2.0新规 ...
- javamail模拟邮箱功能发送电子邮件-中级实战篇【新增附件发送方法】(javamail API电子邮件实例)
引言: JavaMail jar包下载地址:http://java.sun.com/products/javamail/downloads/index.html 此篇是紧随上篇文章而封装出来的,阅读本 ...
- Shell教程5-Shell运算符
Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最 ...
- Windows下PHP+Eclipse开发环境搭建 及错误解决(apache2.2服务无法启动 发生服务特定错误:1)
前言 Eclipse与php/apache的关系:Eclipse只是用来写代码的,如果想要在浏览器查看运行效果就要让php/apache的运行目录指向你的代码目录.Eclipse貌似不会自己和apac ...
- Java 8开发的4大顶级技巧
我使用Java 8编码已经有些年头,既用于新的应用程序,也用来迁移现有的应用,感觉是时候写一些我发现的非常有用的“最佳实践”.我个人并不喜欢“最佳实践”这个说法,因为它意味着“一刀切”的解决方案,而编 ...
- [转]linux系统的7种运行级别
转自:http://blog.chinaunix.net/uid-22746363-id-383989.html Linux系统有7个运行级别(runlevel)运行级别0:系统停机状态,系统默认运行 ...
- web开发中禁止因为网速慢导致重复提交数据
var checkSubmitFlg = false; function check() { if (!checkSubmitFlg) { ...
- SQL Server 最小化日志操作解析,应用[手稿]
Sql Server 中数据库在BULK_LOGGED/SIMPLE模式下的一些操作会采用最小化日志的记录方式,以减小tran log落盘日志量从而提高整体性能. 这里我简单介绍下哪些操作在什么样的情 ...
- winform form
WinForm:Windows Form,.Net中用来开发Windows窗口程序的技术,无论是之前学的控制台程序,还是后面要学的asp.net都是调用.net框架,因此所有知识点都是一样的.新建一个 ...