FullCalendar应用中如何读取JSON数据(fullcalendar,json,开发技术)

时间:2024-05-03 01:14:17 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    FullCalendar%E5%BA%94%E7%94%A8%E4%B8%AD%E5%A6%82%E4%BD%95%E8%AF%BB%E5%8F%96JSON%E6%95%B0%E6%8D%AE

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序。本文将结合实例使用PHP读取MySQl数据,显示在FullCalendar日历中。

根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历数据,三种调用数据的方式各有所用之处,通常我们在实际项目中会结合数据库,通过PHP等后台语言来读取数据库的数据,并以json格式返回给前端,FullCalendar再处理接收的json数据显示在日历中。

一切像前面文章:日程安排FullCalendar介绍的一样,在页面中载入必要的javascript和css文件。

然后,在页面的body里加入p#calendar,用来放置日历主体。

<p id='calendar'></p>

我们用以下代码调用FullCalendar,保存后浏览,我们可以看到页面中呈现一个漂亮的日历表,但是日历中没有具体的事件内容,我们使用FullCalendar最主要的是要在FullCalendar中展示日程安排中的事件,给用户直观的展示过去或未来时间内安排的事情。FullCalendar中的事件数据来源在events选项控制,当然如果是有多个数据来源可以使用eventSources选项。

从jQuery代码中我们可以看出,FullCalendar所有事件数据来自于json.php。json.php通过连接后台MySQL数据库,读取符合条件的事件数据,并最终以JSON数据格式的形式返回,请看代码:

值得一提的是,在返回的json数据中,每个字段如id,title..对应着FullCalendar的Event Object事件对象中的属性id,title..。

我们将最终数据以json_encode()输出,然后,前端FullCalendar会解析json数据并显示在日历中,这些FullCalendar都替我们做好了,只管刷新前端页面看下效果吧。

FullCalendar的读取数据操作很简单,接下来我们会讲述如何在FullCalendar日历中新增、修改和删除事件,敬请关注。

最后附上demo中的MySQL数据表calendar的表结构:

本文:FullCalendar应用中如何读取JSON数据的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Netbeans UML建模的操作示例下一篇:

3 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18