一款很好的日程安排插件fullcalendar 非常适合OA等系统
1、插件下载 http://arshaw.com/fullcalendar/download/
2、
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<link rel='stylesheet' href='cupertino/theme.css' />
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script> $(document).ready(function() { var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear(); $('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
header:{
left:'title',
center:'month,basicWeek,basicDay,agendaWeek,agendaDay',
right:'prevYear prev today next nextYear'
},
buttonText:{
month:'月视图',
basicWeek:'周视图',
basicDay:'日视图',
agendaWeek:'议事周视图',
agendaDay:'议事日视图',
today:'今天'
},
aspectRatio:2,
weekMode:'variable',//每周固定，月份高度不固定。fixed固定六周,liquid月份高度固定，每周高度不固定。
theme:false,
titleFormat:{
month:'yyyy年MMMM',
week:"yyyy年MMMd日{'—'[yyyy年][MMM]d日}",
day:'yyyy-MM-d dddd'
},
buttonIcons:{ },
firstDay:1,//作用周视图，默认周几开始，0星期天，1星期一。。。。默认为0
weekMode:'variable',//默认fixed总是显示6周的格子。liquid，variable根据月份显示4，5，6周其中一个，liquid的总体高度固定。variable格子高度固定。
height:600,//注意不加单位，包括header和主体部分的高度。
//timeFormat:'HH:mm',//全部视图使用这个时间样式
timeFormat:{
week:'HH:mm{-HH:mm}',
day:'HH:mm'
},
columnFormat:{//header底下的第一行;
month:'dddd',
week:'ddd MM-dd',
day:'dddd MM-dd'
},
allDayText:'全天',//allDay全天事件的文本
axisFormat:'HH:mm',//agenda时间轴的格式
allDaySlot:true,//是否显示全天，默认为true
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'],
firstHour:0,//默认是6，只对agenda视图有效果
defaultEventMinutes:120,//如果事件没有结束时间，默认120分钟长度
viewDisplay:function(view){
//view.visStart是包括灰色的日期
//view.start不包括灰色的日期
alert(view.visStart+"------"+view.start);
},
dayClick:function(date,allDay,jsEvent,view){ //天 点击事件
alert("视图名:"+view.name);
alert("当前时间:"+date);
alert("是否全天事件:"+allDay);
alert("javascript针对的事件:"+jsEvent.clientX);
},
eventClick:function(event,jsEvent,view){ //时间 点击事件
alert("针对点击的事件名称:"+event.title);
alert("针对javascript的事件:"+jsEvent.clientX);
alert("视图名:"+view.name);
if(event.url){//当点击事件的时候，如果时间有url属性，默认跳转到url,通过return false来阻止默认行为。
window.open(event.url);
return false;
}
},
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
alert("你在调整大小");
},
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
//parent.lookCalendarDetial(event.title,event.start.format("yyyy-MM-dd hh:mm:ss"),event.end.format("yyyy-MM-dd hh:mm:ss"));
alert("你在移动日程");
}, /*eventMouseover:function(event,jsEvent,view){
alert("鼠标经过某个事件的标题"+event.title);
alert("鼠标经过某个事件位置"+jsEvent.clientX);
alert("鼠标经过某个事件视图名称"+view.title);
},
eventMouseout:functin(event,jsEvent,view){
},*/
selectable:true,//选择的时候高亮
selectHelper:true,//只对agenda有效果
/*
selectHelper:function(start,end){
//alert(start);
},*/
unselectAuto:true,//是否清除高度选择的部分。默认为true 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> body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family:"微软雅黑";
} /*日程宽度*/
#calendar {
width: 900px;
margin: 0 auto;
} </style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
一款很好的日程安排插件fullcalendar 非常适合OA等系统的更多相关文章
- Yslow---一款很实用的web性能测试插件
YSlow可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化. YSlow可以分析任何网站,并为每一个规则产生一个整体报告,如果页面可以进行优化,则YSlow会列出具体的修 ...
- JS实现日程安排 日程安排插件
代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmpWeekPla ...
- 13款精彩实用的最新jQuery插件
1.jQuery特色菜单 圆形动画菜单插件 jQuery是一个非常流行的WEB前端框架,尽管HTML5非常酷,但是如果HTML5结合jQuery的话就能实现更酷更实用的插件.今天分享的这款jQuery ...
- Handsontable-一款仿 Excel效果的表格插件使用总结 96
最近在做一个关于报表管理的项目,发现了一款很好用的jQuery插件-Handsontable.它真的特别给力,在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制.Ctrl+C .Ct ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- C#不用union，而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路
C#不用union,而是有更好的方式实现 用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...
随机推荐
- 转 廖雪峰 urllib
http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432688314740a0 ...
- Python Challenge 第五关
进入第五关,一张图和一行提示: pronounce it.右键源代码,只有一行注释: <!-- peak hell sounds familiar ? --> peak hell 听起来熟 ...
- Django中使用表单
使用表单 表单用 user 提交数据,是网站中比较重要的一个内容 GET 和 POST 方法 GET 和 POST 的区别 URL,全称是"统一资源定位符".用于对应互联网上的每一 ...
- Latex algorithm
方式一 需要包含的 \usepackage[noend]{algpseudocode} \usepackage{algorithmicx,algorithm} 源码 \begin{algorithm} ...
- 新华三孟丹：NFV资源池实现中的技术探讨
近日,在第三届未来网络发展大会SDN/NFV技术与应用创新分论坛上,新华三解决方案部架构师孟丹女士发表了主题为<NFV资源池实现中的技术探讨>的主题演讲. 孟丹指出,新华三的NFV核心理念 ...
- robot upstart 问题
1.启动后在记录文件发现左轮节点未启动: 因为左边的类未实例化,不会去订阅消息然后初始化 2.两个节点均可以启动后,发现启动后又死掉 因为在程序里有getenv(“HOME”)然后付给string,g ...
- HtmlEmail实现简单发送邮件
一般发送邮件的话系统项目中可能会用到,像一些通知信息自动发送等,会用到发送邮件的情况,发送邮件有好多种,包括设置各种格式,添加图片附件等,当然今天我们先看一下怎么实现发送成功. 工欲善其事必先利其器, ...
- 预防SQL注入笔记
SQL注入如何预防? 本文参考自owasp,重点是提供清晰,简单,可操作的指导,以防止应用程序中的SQL注入漏洞.不幸的是,SQL注入攻击很常见,这是由于两个因素: SQL注入漏洞的显着流行 目标的吸 ...
- MySQL中数据类型（char(n)、varchar(n)、nchar(n)、nvarchar(n)的区别）（转）
一.第一种 char(n)和varchar(n)的区别: 在这里我们可以清楚的看到他们表面的区别就是前面是否有var,在这里解释一下var是什么意思,var代表“可变的”的意思 下面看个例子: )// ...
- Maven依赖机制理解
假设一个项目需要用到日志组件Log4j,那么有如下方式添加这个组件. 一.传统方式: 1.访问官网https://logging.apache.org/log4j/2.x/download.html, ...