- 浏览: 7250926 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
jQuery插件FullCalendar日程表实现可扩展Google日历功能
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>
发表评论
-
TestNG简单的学习(十三)TestNG中Junit的实现
2013-12-04 09:00 3287TestNG和junit的整合 ... -
TestNG简单的学习(十二)TestNG运行
2013-12-03 09:08 51444文档来自官方地址: ... -
TestNG简单的学习(十一)TestNG学习总结
2013-12-03 09:08 13994最近一直在学习关于TestNG方面的知识,根 ... -
TestNG简单的学习(十)TestNG @Listeners 的使用
2013-12-03 09:07 8624TestNG官方网站: http://testng.or ... -
TestNG简单的学习(九)TestNG Method Interceptors 的使用
2013-12-03 09:07 2654TestNG官方网站: http://testng ... -
TestNG简单的学习(八)TestNG Annotation Transformers 的使用
2013-12-03 09:07 2757TestNG官方网站: http://testng.or ... -
TestNG简单的学习(七)TestNG编程方式运行
2013-12-02 09:22 2396TestNG官方网站: http://testng.or ... -
TestNG简单的学习(六)测试工厂注释的使用
2013-12-02 09:22 2713TestNG官方网站: http://testng.or ... -
TestNG简单的学习(五)参数化测试数据的定制
2013-12-02 09:22 2641TestNG官方网站: http://testng.or ... -
TestNG简单的学习(四)测试方法通过名称名称依赖实现
2013-12-02 09:21 2032TestNG官方网站: http://testng.or ... -
TestNG简单的学习(三)测试方法通过测试分组依赖实现
2013-12-02 09:21 2765TestNG官方网站: http://testng.or ... -
TestNG简单的学习(二)参数化测试并发且多方法测试方法判定
2013-11-29 15:35 3635TestNG官方网站: http://testng.or ... -
TestNG简单的学习(一)类和方法级别@Test的区别
2013-11-29 15:31 9379TestNG官方文档的地址: http://testng ... -
Feed4Junit的简单使用(七)Feed4TestNg
2013-11-29 13:35 6080在Feed4Junit主要针对junit实现的 ... -
Feed4Junit的简单使用(六)数据来特定格式文件
2013-11-29 12:29 2687Feed4Junit官方地址: http://da ... -
Feed4Junit的简单使用(五)数据来自动态约束数据
2013-11-29 12:29 2562Feed4Junit官方地址: http://datab ... -
Feed4Junit的简单使用(四)数据来自定义数据源
2013-11-28 14:09 3039Feed4Junit官方地址: http://databe ... -
Feed4Junit的简单使用(三)数据源来自数据库
2013-11-28 13:58 3097Feed4Junit官方地址: http://databe ... -
Feed4Junit的简单使用(二)数据源来自文件
2013-11-28 13:50 4521Feed4Junit官方地址: http://datab ... -
Feed4Junit的简单使用(一)
2013-11-28 13:47 2157Feed4Junit官方地址: http://databe ...
相关推荐
主要介绍了在Vue项目中用fullcalendar制作日程表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
jQuery日历插件FullCalendar 演示地址:http://www.jq22.com/jquery-info278
日程安排:jQuery的日历插件 FullCalendar Java MySQL
使用了jquery日历插件FullCalendar,使用通过PHP程序调用了MYSQL的数据库,实现HTML静态页在线AJAX新建日程,修改、删除日程序,本集成了中国人的农历,采用了UTF8的编码,根目录里带有SQL数据库,下载后导入你的...
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
[jQuery之FullCalendar视频(全)].[HeyJava][selfimpr]jQuery.FullCalendar 下载链接
jquery.fullCalendar官方文档翻译
NULL 博文链接:https://zzc1684.iteye.com/blog/2258307
FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...
FullCalendar用来做日程管理功能非常强大,但是...首先是要载入jQuery库和fullcalendar插件。 [removed][removed] [removed][removed] 然后在body中,建立日历容器div#calendar。 ”calendar”></div> jQuery 使
jQuery.FullCalendar相关文档
FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用。...
使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});... agendaWeek 一页显示一周, 显示详细的24小时安排(也就是议事日程) 2.2.1.5. agendaDay 一页显示一天, 显示详细的24小时安排
Vue中使用Fullcalendar日历开发日程安排代码完整版(项目示例)
用fullcalendar做的日程管理,有代码
jQuery之FullCalendar视频(全)(百度网盘中) 原地址:http://download.csdn.net/detail/caokang1314/4650128 因下载用户反映在迅雷的链接下载很慢,故迁移到百度网盘中, 共享地址为:http://pan.baidu.com/s/1f6vEl...
使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741
FullCalendar 一个全尺寸拖放事件的jQuery插件日历
前端日历插件,包含js和css,以及index.html。采用的是fullcalendar