FullCalendar应用——读取JSON数据

时间:2022-09-01 13:01:15

开发者可以使用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数据的更多相关文章

  1. iOS彩票项目--第七天,初次读取json数据、KVC转模型技巧、运行时字典转模型以及初步对显示网页的操作并且跟踪标签

    一.初次读取json数据 二.KVC转模型技巧,这里的技巧主要解决的是字典中的key 与 模型中有的属性对应不起来的时候 的解决办法 <方法1> <方法2>运行时字典转模型,运 ...

  2. Java学习-029-JSON 之三 -- 模仿 cssSelector 封装读取 JSON 数据方法

    前文简单介绍了如何通过 json-20141113.jar 提供的功能获取 JSON 的数据,敬请参阅:Java学习-028-JSON 之二 -- 数据读取. 了解学习过 JQuery 的朋友都知道, ...

  3. ajax读取json数据

    首先建立json.txt文件 { "programmers": [ { "firstName": "Brett", "lastNa ...

  4. 在MVC中动态读取JSON数据创建表格

    //使用getJSON // ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /M ...

  5. js读取json数据(php传值给js)

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  6. 当向后台插入或读取JSON数据遇见回车时

    今天在项目中发现.当插入或读取JSON数据时遇见回车符.返回JSON数据格式时会报错(firebug里体现为乱码),百度了一下发现JSON不支持字符串里存在回车! 解决的方法: 在向接口插入带json ...

  7. Javascript实例技巧精选&lpar;6&rpar;—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  8. EF&plus;LINQ事物处理 C&num; 使用NLog记录日志入门操作 ASP&period;NET MVC多语言 仿微软网站效果&lpar;转&rpar; 详解C&num;特性和反射(一) c&num; API接受图片文件以Base64格式上传图片 &period;NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  9. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

随机推荐

  1. MVC4 自定义错误页面(转)

    一.概述 MVC4框架自带了定义错误页,该页面位于Shared/Error,该页面能够显示系统未能捕获的异常,如何才能使用该页面: 二.使用步骤: 1.配置WebConfig文件,在System.We ...

  2. C&plus;&plus;二级指针第二种内存模型(二维数组)

    C++二级指针第二种内存模型(二维数组) 二维数组 二维数组本质上是以数组作为数组元素的数组,即“数组的数组”. 定义 类型说明符 数组名[常量表达式][常量表达式] 例如: float a[3][4 ...

  3. CRM创建物料FM1

    这是在中联混凝土那边搞的.... method create_prd.  data: lt_return type bapiret2_tab,        ls_return like line o ...

  4. WPF常用控件应用demo

    WPF常用控件应用demo 一.Demo 1.Demo截图如下: 2.demo实现过程 总体布局:因放大缩小窗体,控件很根据空间是否足够改变布局,故用WrapPanel布局. <ScrollVi ...

  5. linux dns搭建

    DNS:域名解析(Domain Nmae System)正向解析:根据主机名称(域名)查找其对应的ip地址,这是最基本,最常用的功能反向解析:根据ip地址查找其对应的主机名称(域名),反垃圾邮件/安全 ...

  6. MFC基础

    入门博客:http://www.cnblogs.com/qinfengxiaoyue/category/451679.html 消息机制:http://www.cnblogs.com/qinfengx ...

  7. 【XSY3042】石像 拓扑排序 状压DP 洲阁筛

    题目大意 有 \(n\) 个整数 \(a_1,a_2,\ldots,a_n\),每个数的范围是 \([1,m]\).还有 \(k\) 个限制,每个限制 \(x_i,y_i\) 表示 \(a_{x_i} ...

  8. iptables之NAT端口转发设置

    背景:服务器A:103.110.114.8/192.168.1.8,有外网ip,是IDC的一台服务器服务器B:192.168.1.150,没有外网ip,A服务器是它的宿主机,能相互ping通服务器C: ...

  9. layui 子页面向父页面传值

    实现功能:单击确定按钮将选中的id传到父页面并关闭当前子页面. 首先在父页面定义一个函数: //分配产品 function ChooseAdidValues(v) { if (v != "& ...

  10. windows10创建ftp服务器

    1.创建用户 2.创建FTP服务 3.开通防火墙服务 建立端口21,20入站规则 4.访问测试