一款很好的日程安排插件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# ...
随机推荐
- hdu 4939 2014 Multi-University Training Contest 7 1005
Stupid Tower Defense Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/ ...
- linux之Deamon进程创建及其进程exit,_exit,return之间的区别
Dameon进程又被称做守护进程,一般来说他有以下2个特点: 1.生命周期非常长,一旦启动,一般不会终止,直到系统推出,不过dameon进程可以通过stop或者发送信号将其杀死 2.在后台执行,不跟任 ...
- 模块化开发(seajs)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js-数字渐增到指定的数字，在指定的时间内完成（有动画效果哦）插件jquery.animateNumber.js
本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好. 但是,最终效果不理想! Why? 最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个 ...
- android添加桌面悬浮窗
1. 添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> 2. ...
- spring boot教程（一）：入门篇（非原创，总结笔记性质）
一,什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发 ...
- GitBook一个专注于帮助文档的工具
官网:https://www.gitbook.com GitHub组织:https://github.com/gitbookio GitBook一个专注于帮助文档的工具,比如: 1.简单的左侧列表右侧 ...
- 唤醒你的大脑 --- javascript冒泡排序
var a; a = [1, 2, 3, 11, 55, 5, 0, 44]; (function bubbleSort() { for (var i = 0; i <= a.length - ...
- TIdHTTPServer制作REST中间件
TIdHTTPServer制作REST中间件 使用DELPHI7+INDY9开发 // 陈新光 2017-2-21// LIS数据同步服务器// 浏览器输入:http://127.0.0.1:8000 ...
- Android 沉浸式全屏
Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 “身临其境” 的体验. A ...