FullCalendar 一: 日程安排FullCalendar
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。
HTML
首先第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能,就还需要加入jQuery ui插件。
<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插件初始化日历,使用jQuery代码:
$(document).ready(function() { //页面加载完初始化日历 $('#calendar').fullCalendar({ //设置选项和回调 }) });
然后保存并浏览页面,你会发现页面中已经显示一个很大的日历表了。当然这还只是一个初步的日历,FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件,可以很方便的扩展,打造你想要的日历表,先来做一下简单了解。
Options
FullCalendar官方文档中提供了丰富的操作选项设置,比如是否在日历中显示周末等等,使用方法:
$('#calendar').fullCalendar({ weekends: false //不显示周末,将会隐藏周六和周日 });
Callbacks
当点击或者拖动等事件发生时,可以调用相关函数,比如点击某一天时,弹出提示框:
$('#calendar').fullCalendar({ dayClick: function() { alert('a day has been clicked!'); } });
Methods
FullCalendar提供了很多方法可以调用,诸如进入下一个月视图等,代码可以这样写:
$('#calendar').fullCalendar('next');
以上代码调用了next方法后,日历视图切换到下一月(周、日)的视图。
本文简单介绍一下FullCalendar的使用,FullCalendar的官方网址是:http://arshaw.com/fullcalendar/,接下来我们会有文章专门介绍FullCalendar的文档详细选项、事件和方法的使用,以及结合实际项目的后台PHP、MySql进行实战演示,敬请关注。
来源于helloweba.com> 日程安排FullCalendar
FullCalendar 一: 日程安排FullCalendar相关推荐
- Jeesite引用fullcalendar实现日程排班
Jeesite引用fullcalendar实现日程排班: 备注:fullcalendar不同的jar版本,使用方式不同,此次使用的是1.6版本. 参考一:eventClick triggering - ...
- fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据
根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历 ...
- vue日程安排_使用Fullcalendar管理时间计划调度安排
原标题:使用Fullcalendar管理时间计划调度安排 Fullcalendar可以很好的管理日程安排事件,可以管理时间和任务调度,比如日常值班岗位安排.举办活动会议议程安排.项目行动安排.车间劳动 ...
- Vue中使用Fullcalendar日历开发日程安排
效果图: 官方文档地址:Vue Component - Docs | FullCalendar 1.安装与FullCalendar相关的依赖项 npm install --save @fullcale ...
- 基于FullCalendar插件的个人日程安排系统(4)
这一篇开始要用到FullCalendar插件,由于我自己也是头一次用,也不是很了解,所以只能简单介绍一下,大家可以一起讨论. 效果图 customer_index.jsp <%@ page la ...
- 基于FullCalendar插件的简单个人日程安排系统(3)
(这里的代码有点多不过都不是特别复杂,慢慢看,O(∩_∩)O哈哈~) LoginServlet.java package cn.javaee.controller;import java.io.IOE ...
- php日程 增删改查,使用Fullcalendar管理日程事件(增删改查拖放)
新版Fullcalendar(v4)拥有丰富的选项方法事件配置以及插件应用,对开发者非常友好,开发者可以轻松的利用Fullcalendar定制一个完美的日程安排应用,本文将讲解最实际的日程事件管理前后 ...
- 日程管理 FullCalendar
日程管理,采用著名组件FullCalendar日历插件实现 FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发 1.实 ...
- 第十五届全国大学生智能车安徽赛区参赛须知和竞赛日程安排
安徽赛区参赛须知 和竞赛日程安排 各参赛队伍: 2020年第15届全国大学生智能汽车竞赛安徽赛区竞赛定于2020年11月7日-11月8日在合肥职业技术学院汇心湖校区举行. 联系人:吕菲 Email:l ...
最新文章
- 使用express搭建第一个Web应用【Node.js初学】
- python编程基础语法-Python编程基础语法快速入门
- 学习笔记-----关于VS中使用模板类出现无法解析的外部符号问题
- java kiwi_[转] Java 8 开发的 4 大顶级技巧
- windows mysql 5.5 升级_windows环境mysql5.0晋级mysql5.5
- MySQL的字符集和校对规则,你都会了吗?
- Andriod7.0之wifi开启流程(含流程框图及流程图)
- 视频会议系统架构和开源解决系统
- Linux 路由表和静态路由
- 染色体的基因顺序遗传图谱
- 24岁小伙跟女友回家 与41岁准丈母娘畸恋私奔
- android 目录作用,Android中各级目录的作用说明
- flutter图片聊天泡泡_Flutter极致的业务封装——各类聊天气泡(一)
- 儿童学计算机编程好处,孩子学编程的好处和坏处
- 网络爬虫——中国大学排名数据抓取
- wav数据提取 matlab,matlab 读取处理 wav 文件
- vs code 软件设置中文
- Matlab中switch_case_otherwise语句详解
- python解决js加密问题
- 【自定义表单】自定义表单设计
热门文章
- 数塔(HDU-2084)
- 46 SD配置-销售凭证设置-分配状态参数文件到项目类型
- 12 CO配置-控制-成本中心会计-将分解结构分配至成本中心
- microsoft excel正在等待其他某个应用程序_如何删除 Mac 储存空间的其他选项?
- python安装界面翻译_Python新手教程:40行python代码写一个桌面翻译器
- 初一数学计算机教案,初一数学教案
- php图片制作源码,php进行图片裁剪及生成缩略图程序源代码
- QToolButton设置图片填充满_韩国高人气图片素材大合集!每张图,都是桌面壁纸,逼格满满...
- 图表示学习(Graph Representation Learning)笔记
- C++:map和pair