开发者可以使用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,jquery实例 在线演示FullCalendar新建、修改和删除日程事件的示例。
无论运行 php composer.phar require --prefer-dist tejrajs/yii2-fullcalendar "dev-master"或添加 "tejrajs/yii2-fullcalendar": "dev-master"到composer.json文件的require部分。用法安装扩展程序后,只需通过...
到composer.json文件的require部分。 用法 Fullcalendar可以如下创建,所有选项都是可选的,以下仅是大多数选项的示例 <?= edofre\fullcalendar\ Fullcalendar :: widget ([ 'options' =>
fullCalendar具体应用 fullCalendar具体应用 fullCalendar具体应用 fullCalendar具体应用
yii2fullcalendar JQuery Fullcalendar Yii2扩展JQuery来自: ://arshaw.com/fullcalendar/版本4.0.2许可证MIT jQuery文档: //arshaw.com/fullcalendar/docs/ Yii2扩展,通过 可以在这里找到一个小样本:http: ...
fullcalendar-1.5.1+中文应用方法,仿google日程管理
#FullcalendarEngine此引擎仅支持 Rails 4 应用程序。安装将 fullcalendar_engine 添加到您的 Gemfile 中: gem 'fullcalendar_engine'捆绑安装您的依赖项并运行安装生成器: bundle installbundle exec rails g ...
fullcalendar-rails, 包含Adam的gem fullcalendar jquery插件的资产 Fullcalendar::Rails这个 gem 用于在你的RoR应用程序中添加FullCalendar插件的内容,这样你就不用下载和安装所有的FullCalendar资产。安装要安装 ...
fullcalendar-scheduler-master
PHP+Mysql+FullCalendar日历拖动与数据保存
fullcalendar-node2 heroku设置: ://dashboard.heroku.com/apps/fullcallendar-nodejs/settings 主要网站FullCalendar: ://fullcalendar.io/ 来自Creative TimHTML模板: : 灵感来自@MikeSmithDev ! 查看!本地...
利用FullCalendar应用实现日历事件开发
FullCalendar Vue组件 该项目为FullCalendar提供了正式的Vue组件,并且具有相同的设置。
它读取ICS日历文件,并在页面上的每月“日历”小组件中显示事件-包括“月特定图像”(如果在“日历”页面文件夹中可用):安装可以通过以下两种方法之一来安装Fullcalendar插件。 GPM(Grav软件包管理器)安装方法...
FullCalendar 生成真实的 React 虚拟 DOM 节点,因此您可以利用 React 高度优化的渲染引擎 Fiber。 FullCalendar 拥有超过 300 项设置,并且每个版本都会添加更多设置,FullCalendar 几乎可以做任何事情。 使用 ...
苗条的全日历适用于Svelte 3组件包装器FullCalendar(几乎)与 JavaScript编译器和 JavaScript框架无缝集成。 它提供的组件与FullCalendar的标准API的功能完全匹配。 该组件是根据MIT许可发布的,该许可与...
FullCalendar React组件 React的官方FullCalendar组件。 这不仅仅是一个“连接器”。 它告诉核心FullCalendar包开始使用React虚拟DOM节点(而不是通常使用的节点)进行渲染,从而将转换为“真实的” React组件。 ...
## vue-fullcalendar 现在适用于Vue2。 这是一个基于vue.js的fullCalendar组件。 不需要Jquery或fullCalendar.js。 当前,它仅支持月视图。 它受fullCalendar.io的启发,但没有被克隆。 因此,请阅读下面的文档以...
基于fullCalendar2.2.7 增加年视图,方便大方