http://www.cnblogs.com/shihao/archive/2012/01/16/2323660.html
jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排等,可扩展Google日历功能,制作个性化的日程表,同时可绑定点击事件或拖动事件,使用非常方便。
jQuery插件FullCalendar在线实例FullCalendar v1.5.2
http://arshaw.com/fullcalendar/
使用说明
需要使用jQuery库文件和jQuery UI库文件和FullCalendar库文件
http://jquery.com/
http://plugins.jquery.com/project/fullcalendar
http://ui.jquery.com/
同进需要使用fullcalendar.css文件
使用实例
一,导入css样式和js
fullcalendar的样式表:
<link rel='stylesheet' type='text/css' href='redmond/theme.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
fullcalendar插件的基础:
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
fullcalendar插件的js
<script type='text/javascript' src='../fullcalendar.min.js'></script>
二页面加载初始化fullcalendar
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
三添加fullcaledar容器
<div id='calendar'></div>
chaunceyhao
- 大小: 2.8 KB
- 大小: 13.6 KB
- 大小: 24.3 KB
- 大小: 10.4 KB
- 大小: 5.7 KB
- 大小: 6.7 KB
- 大小: 25.7 KB
- 大小: 15.5 KB
分享到:
相关推荐
jQuery日历插件FullCalendar 演示地址:http://www.jq22.com/jquery-info278
日程安排:jQuery的日历插件 FullCalendar Java MySQL
FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...
主要介绍了在Vue项目中用fullcalendar制作日程表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
前端日历插件,包含js和css,以及index.html。采用的是fullcalendar
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
使用了jquery日历插件FullCalendar,使用通过PHP程序调用了MYSQL的数据库,实现HTML静态页在线AJAX新建日程,修改、删除日程序,本集成了中国人的农历,采用了UTF8的编码,根目录里带有SQL数据库,下载后导入你的...
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。 HTML 首先是要载入...
[jQuery之FullCalendar视频(全)].[HeyJava][selfimpr]jQuery.FullCalendar 下载链接
jquery.fullCalendar官方文档翻译
NULL 博文链接:https://zzc1684.iteye.com/blog/2258307
vue-fullcalendar 一个基于vue.js的全日历组件,不需要Jquery或fullCalendar.js。 目前,它只支持月视图。 它的灵感来自fullCalendar.io
jQuery.FullCalendar相关文档
前台采用fullCalendar实现日历效果,同一天可以增加多个日程安排,当效果超过配置的最大数量时,将会隐藏多余的日程安排,通过单击超链接显示当天的所有日程安排,采用fancybox实现弹出窗口编辑和修改日程明细信息。...
一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的...
用fullcalendar做的日程管理,有代码
使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741