首页 > 其他分享 >FullCalendar 三:FullCalendar应用——读取JSON数据

FullCalendar 三:FullCalendar应用——读取JSON数据

时间:2023-05-17 19:37:12浏览次数:42  
标签:读取 FullCalendar 日历 json JSON 事件 id row


开发者可以使用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

 


标签:读取,FullCalendar,日历,json,JSON,事件,id,row
From: https://blog.51cto.com/u_8895844/6293312

相关文章

  • FullCalendar 一: 日程安排FullCalendar
    FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。HTML首先第一步就是在需要调用FullCalendar日历的页面中载入必要的......
  • odoo 路由设置http 请求,postman 传递json格式的data
    odoo也可以设置json路由,但是返回值会在外边套上一层,考虑直接使用http路由 @route('/mycart/addToCart',csrf=False,type='http',auth="none",methods=['POST']) defaddToCart(self,**kwargs): postman请求方式,需要设置data类型为Text......
  • 【React】react-json-view用法
    react-json-view:前端json可视化插件安装:npminstall--savereact-json-view 使用:importReactJsonfrom'react-json-view'<ReactJson/>配置:<ReactJsoncollapsed={false}//是否收起,true为收起indentWidth={10}//缩进iconStyle='cir......
  • Ubuntu下,已经编译了OSG,如何增加OsgFbx插件,支持读取.fbx格式文件[转]
    最近在搞OSG相关的东西,美术给了个.fbx格式的模型,但死活无法加载,在网上搜了一圈,发现需要增加个插件才能支持这种格式的模型读取。一、osg支持的文件格式列表可以参看下这篇博文[原][资料整理][osg]osgDB文件读取插件,工作机制,支持格式,自定义插件-南水之源-博客园二、在fbx官......
  • JSON
        案例:  ......
  • 定义一个Dog类,包括体重和年龄两个数据成员及其成员函数,声明一个实例dog1,体重5,年龄10,使
    #include<bits/stdc++.h>usingnamespacestd;classDog{      private:             intweight,age;      public:             Dog(intw,inta):weight(w),age(a)             {             ......
  • 2023年5月最新全国省市区县和乡镇街道行政区划矢量边界坐标经纬度地图数据 shp geojso
    发现个可以免费下载全国 geojson 数据的网站,推荐一下。支持全国、省级、市级、区/县级、街道/乡镇级以及各级的联动数据,支持导入矢量地图渲染框架中使用,例如:D3、Echarts等geojson数据下载地址:https://geojson.hxkj.vip该项目github地址:https://github.com/TangSY/echarts-m......
  • SAP ABAP 系统里长文本 Long Text 的设计和读取函数 READ_TEXT 详细讲解试读版
    本文回答本教程一位学习者在笔者的知识星球里的提问。要想找到这个问题的根源,需要首先对SAPABAP系统里长文本(LongText)的设计有一个比较清楚的了解,这就是本文及后续文章的目的。SAPABAP长文本的使用场景在SAPABAP系统中,长文本(LongText)是一种特殊的文本类型,它可以存......
  • 用numpy读取结构化二进制文件
    之前做了一个读取TDX数据的代码,如下:defstock_lc5(self,filepath,name):file_path=filepath+"\\"+namefile_size=os.path.getsize(file_path)pos=0if(file_size>16000):pos=file_size-16000withopen(f......
  • SQLSERVER中JSON数组的拆分
    DECLARE@infoParamNVARCHAR(MAX);DECLARE@itemsNVARCHAR(MAX);SET@infoParam='{ "SCHOOL":"某某中学", "SCHOOLCODE":"1234", "USER":[{ "userid":"20XX001", "username......