基于fullcalendar制做的日程管理小demo

1、项目地址：

https://github.com/linqian123...

2、项目功能概述：

该项目是基于fullcalendar而制做的日程管理，fullcalendar是一个基于jquery的日历插件，在该项目中，咱们能够在日历上编辑咱们的日程，并将日程经过日视图、周视图、月视图的方式来进行展现，也能够经过选择时间段来展现咱们的日程。该项目使用artDialog来制做弹出框的效果，使用wickedpicker和bootstrap-datapicker来做为咱们的时间选择插件，还选择了jquery-ui当中的slider来制做设置时间段的滑块效果。

该项目虽然没有创建后台数据库，只是用了两个php文件来暂时的存储咱们编辑的日程，但在运行该项目的时候，仍然须要将其放在本地服务器的环境下。由于咱们编辑完日程后，是经过ajax的方式提交给后台，而后再从后台取数据渲染更新到咱们的日历上，不过因为没有把日程数据存到数据库，故刷新页面以后，咱们编辑的日程会消失。

代码当中涉及ajax交互数据的这两个后台文件的地址分别为http://localhost/fullcalendar/detail.php和http://localhost/fullcalendar/events.php。故在运行该项目时，先把该项目文件夹的名字改成fullcalendar，而后再将其放在本地服务器的环境当中。

3、项目细节展现：

咱们的日程管理日历当中的月视图、周视图、日视图分别为：

当咱们点击标题栏左侧的设置按钮，会弹出以下的弹出框，能够经过滑块来设置时间段（以小时为单位），在肯定以后就完成了咱们的周视图和日视图当中天天展现的时间段的设置。

当咱们点击标题栏右侧的查询按钮，会弹出以下的弹出框：

咱们在月视图、周视图、日视图当中用鼠标点击某一天会弹出以下的弹框，咱们能够在此编辑那天的日程，在此不进行更多详情的填写，点击肯定以后，就会在日程视图上呈现。

若是须要填写更详细的日程内容，能够点击上述弹出框当中的完整编辑按钮，则会弹出新建日程页面。（咱们点击日历标题栏右侧的新建按钮也会弹出以下弹框）。在该弹框当中咱们以事务内容的编辑为准，忽略事务标题，在这里咱们能够选择更详尽的日程时间段，能够设置开始和结束时间段。当咱们勾选全天时，则后边的时刻点消失；当勾选结束时间的时候，才会显示结束时间的设置；当勾选重复的时候，才会提供重复类型的选择，当咱们在下拉列表当中选择不一样的重复类型的时候，下面对应的重复时间会有不一样的展现。当编辑完成，点击肯定以后，日程事件就会展现在日历上了。

咱们用鼠标点击日历上某一个已建日程时，会弹出以下弹框，点击编辑则会进入编辑界面，对该日程事件进行编辑，肯定后则日程更改，点击删除，则能够删除该日程。