一款很好的日程安排插件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# ...
随机推荐
- 容器中元素的去重——ans.erase(unique(ans.begin(),ans.end()),ans.end());
啊,原来unique()函数,只是处理的连续的元素,比如 -1 -1 -1 1 2 -1 2 就处理成了 -1 1 2 -1 2 -1 -1并且返回5,之后eraser(5,7)剩下了 -1 1 2 ...
- LeetCode OJ--Remove Duplicates from Sorted Array
http://oj.leetcode.com/problems/remove-duplicates-from-sorted-array/ 删除数组中的重复元素,要求为原地算法. 进行一遍遍历,记录下一 ...
- Wireshark如何选择多行
Wireshark如何选择多行 在Wireshark中,用户经常需要选择几行,然后进行批量操作,如导出或者分析.但Wireshark没有提供通过鼠标直接选择多行的功能.这个时候,用户需要采用标记分 ...
- 邁向IT專家成功之路的三十則鐵律 鐵律二十五：IT人屈辱之道-十倍奉還
現代人普遍火氣都很大,與人爭論時只要有一點點感到屈辱,便會開始大聲反擊,甚至於暴力相向.至於企業中的人事相鬥,則是典型的來個明爭暗鬥,直到成為老闆眼中的紅人,在逐漸掌握了權力之後再來個內部大清洗,不久 ...
- Android 测试自定义纯数字软键盘
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- 【android】getDimension()、getDimensionPixelOffset()和getDimensionPixelSize()区别详解
在自定义控件中使用自定义属性时,经常需要使用java代码获取在xml中定义的尺寸,相关有以下三个函数 getDimension() getDimensionPixelOffset() getDimen ...
- Majority Number
题目描写叙述 链接地址 解法 算法解释 题目描写叙述 Given an array of integers, the majority number is the number that occurs ...
- 21. Spring Boot过滤器、监听器【从零开始学Spring Boot】
转载:http://blog.csdn.net/linxingliang/article/details/52069490 上一篇文章已经对定义Servlet 的方法进行了说明,过滤器(Filter) ...
- source insight的查找功能
source insight是一款非常好的c语言的程序编辑器.方便对project管理,方便程序的阅读和编辑. 查找功能使用十分频繁.选项较多,与其他软件的查找功能也类似,以下对英文版的查找功能,做简 ...
- ubuntu boot空间不足
在安装 Ubuntu的时候 , 给/boot文件目录分配空间的时候,是100M,/boot可以单独分成一个区,也可以不单独分,在/(根目录)下也会自动为其创建一个boot目录.顺便提一下,Linux分 ...