一款很好的日程安排插件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# ...
随机推荐
- C 语言 文件读写
在ANSI C中,对文件的操作分为两种方式,即流式文件操作和I/O文件操作,下面就分别介绍之.一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下:type ...
- dedecms--后台添加会员栏目（批量添加）
最近在用dedecms二次开发会员功能,一开始做了一个会员添加,但是领导要求可以批量添加,最好是可以输入添加个数:这样我想添加几个就添加几个了 1:会员添加的htm页面 <html> &l ...
- ORA-12514: TNS:listener does not currently know of service requested in connect
https://blog.csdn.net/mchdba/article/details/50166153
- [翻译] NumSharp的数组切片功能 [:]
原文地址:https://medium.com/scisharp/slicing-in-numsharp-e56c46826630 翻译初稿(英文水平有限,请多包涵): 由于Numsharp新推出了数 ...
- Careercup | Chapter 6
6.2 There is an 8x8 chess board in which two diagonally opposite corners have been cut off. You are ...
- QBXT T15214 Day2上午遭遇
题目描述 你是能看到第一题的 friends呢. -- hja ?座楼房,立于城中 . 第?座楼,高度 ℎ?. 你需要一开始选择座楼,跳. 在第 ?座楼准备跳需要 ??的花费. 每次可以跳到任何一个还 ...
- kafka技术分享02--------kafka入门
kafka技术分享02--------kafka入门 1. 消息系统 所谓的Messaging System就是一组规范,企业利用这组规范在不同的系统之间传递语义准确对的消息,实现松耦合的异步数据 ...
- iOS应用崩溃日志揭秘
这篇文章还可以在这里找到 英语 Learn how to make sense of crash logs! 本文作者是 Soheil Moayedi Azarpour, 他是一名独立iOS开发者. ...
- qt实现又一次登录
1.需求 须要实现程序操作过程中的又一次启动,即常常说的又一次登录功能 2.解决 在main函数中检測exec的返回值决定是关闭还是重新启动.使用注冊函数atexit(relogin)来实现这个功能 ...
- IOS开发退出应用程序的代码
IOS 开发中.我知道的两个退出程序的方法: 1. exit(0); 2. if([[UIApplication sharedApplication] respondsToSelector:@sele ...