开发者可以使用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**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本...
将`style.css`文件导入到`src/styles.css`,或者在`angular.json`中添加引用,以确保FullCalendar样式生效: ```css @import '~@fullcalendar/core/main.css'; @import '~@fullcalendar/daygrid/main.css'; @import...
Java 用于处理服务器端逻辑,包括数据的读取、处理和返回。MySQL 则作为数据库存储日程事件的数据。 4. **Servlet 技术**:在示例代码中,`EventDoServlet` 是一个 Java Servlet,用于处理 HTTP 请求。Servlet 是 ...
不过,现在的Ajax并不局限于XML,而是可以处理各种类型的数据格式,如JSON、HTML等。 **PHP**是一种广泛使用的开源服务器端脚本语言,尤其适合Web开发。它嵌入到HTML代码中,用于处理服务器端逻辑,如用户输入验证...
fullCalendar可以通过JSON或其他数据格式获取事件数据,因此可以轻松地从服务器获取节假日和农历数据。 节假日的处理需要一个包含各种节日和纪念日的数据源,这可能是一个服务器端的数据库或静态JSON文件。开发人员...
这三种对象都可以在控制器中设置数据,在视图中进行读取。ViewBag是dynamic类型,使用起来更加方便;ViewData是字典类型,需要按照键值对的方式访问数据;TempData用于跨一次请求的临时数据存储,数据在下一次请求后...
在本文中,我们将深入探讨如何使用 Laravel 框架开发一个功能完备的日历应用程序,特别关注 "LaravelCalendar" 示例项目。Laravel 是一个流行的、优雅的 PHP 框架,它提供了许多工具和功能,使得开发过程既高效又...
数据可能来源于服务器API、JSON文件或其他数据源。 5. **CSS样式设计**:为了让时间表美观且易于阅读,开发者会用到CSS(Cascading Style Sheets)来定义布局、颜色、字体等样式。JavaScript也可以动态地更改CSS...
`$.get()`和`$.post()`是其简化版,而`$.getJSON()`专门用于获取JSON数据。`$.load()`用于加载远程HTML片段并插入到指定元素。 7. **插件生态(Plugins)** jQuery的生态系统中有大量的第三方插件,如Bootstrap、...
这些库通常可以通过JSON格式的数据来动态填充日历事件,并支持自定义样式和交互。 在服务器端,Python有pycalendar库,Java有java.util.Calendar类,它们提供了处理日期和时间的API,可以用来生成、解析和操作日历...
在本文中,我们将深入探讨如何在C# MVC框架下创建一个具有重复事件功能的多用户/资源Web日记应用。此应用结合了JavaScript、HTML、C#、.NET和PHP等技术,提供了一个全面的日历解决方案。 首先,让我们从C# MVC...