医院网站开发兼职,2023年适合小学生的新闻,贵州住房和建设厅网站,二手车出口外贸流程根据FullCalendar日历插件说明文档中的介绍#xff0c;日历主体事件数据的来源有三#xff0c;一是直接以javascript数组的形式显示日历事件#xff0c;二是获取JSON数据形式显示日历事件#xff0c;三是函数回调的形式显示日历数据#xff0c;三种调用数据的方式各有所用…根据FullCalendar日历插件说明文档中的介绍日历主体事件数据的来源有三一是直接以javascript数组的形式显示日历事件二是获取JSON数据形式显示日历事件三是函数回调的形式显示日历数据三种调用数据的方式各有所用之处通常我们在实际项目中会结合数据库通过PHP等后台语言来读取数据库的数据并以json格式返回给前端FullCalendar再处理接收的json数据显示在日历中。HTML一切像前面文章日程安排FullCalendar介绍的一样在页面中载入必要的javascript和css文件。然后在页面的body里加入div#calendar用来放置日历主体。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($rowmysql_fetch_array($query)){$allday $row[allday];$is_allday $allday1?true:false;$data[] array(id $row[id],//事件idtitle $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数据中每个字段如idtitle..对应着FullCalendar的Event Object事件对象中的属性idtitle..。我们将最终数据以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)) ENGINEMyISAM DEFAULT CHARSETutf8
