一款很好的日程安排插件fullcalendar 非常适合OA等系统
1、插件下载 http://arshaw.com/fullcalendar/download/
2、
1 <!DOCTYPE html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <html> 4 <head> 5 <link rel='stylesheet' href='cupertino/theme.css' /> 6 <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' /> 7 <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' /> 8 <script src='../jquery/jquery-1.9.1.min.js'></script> 9 <script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script> 10 <script src='../fullcalendar/fullcalendar.min.js'></script> 11 <script> 12 13 $(document).ready(function() { 14 15 var date = new Date(); 16 var d = date.getDate(); 17 var m = date.getMonth(); 18 var y = date.getFullYear(); 19 20 $('#calendar').fullCalendar({ 21 theme: true, 22 header: { 23 left: 'prev,next today', 24 center: 'title', 25 right: 'month,agendaWeek,agendaDay' 26 }, 27 header:{ 28 left:'title', 29 center:'month,basicWeek,basicDay,agendaWeek,agendaDay', 30 right:'prevYear prev today next nextYear' 31 }, 32 buttonText:{ 33 month:'月视图', 34 basicWeek:'周视图', 35 basicDay:'日视图', 36 agendaWeek:'议事周视图', 37 agendaDay:'议事日视图', 38 today:'今天' 39 }, 40 aspectRatio:2, 41 weekMode:'variable',//每周固定，月份高度不固定。fixed固定六周,liquid月份高度固定，每周高度不固定。 42 theme:false, 43 titleFormat:{ 44 month:'yyyy年MMMM', 45 week:"yyyy年MMMd日{'—'[yyyy年][MMM]d日}", 46 day:'yyyy-MM-d dddd' 47 }, 48 buttonIcons:{ 49 50 }, 51 firstDay:1,//作用周视图，默认周几开始，0星期天，1星期一。。。。默认为0 52 weekMode:'variable',//默认fixed总是显示6周的格子。liquid，variable根据月份显示4，5，6周其中一个，liquid的总体高度固定。variable格子高度固定。 53 height:600,//注意不加单位，包括header和主体部分的高度。 54 //timeFormat:'HH:mm',//全部视图使用这个时间样式 55 timeFormat:{ 56 week:'HH:mm{-HH:mm}', 57 day:'HH:mm' 58 }, 59 columnFormat:{//header底下的第一行; 60 month:'dddd', 61 week:'ddd MM-dd', 62 day:'dddd MM-dd' 63 }, 64 allDayText:'全天',//allDay全天事件的文本 65 axisFormat:'HH:mm',//agenda时间轴的格式 66 allDaySlot:true,//是否显示全天，默认为true 67 monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], 68 monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], 69 dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 70 dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'], 71 firstHour:0,//默认是6，只对agenda视图有效果 72 defaultEventMinutes:120,//如果事件没有结束时间，默认120分钟长度 73 viewDisplay:function(view){ 74 //view.visStart是包括灰色的日期 75 //view.start不包括灰色的日期 76 alert(view.visStart+"------"+view.start); 77 }, 78 dayClick:function(date,allDay,jsEvent,view){ //天 点击事件 79 alert("视图名:"+view.name); 80 alert("当前时间:"+date); 81 alert("是否全天事件:"+allDay); 82 alert("javascript针对的事件:"+jsEvent.clientX); 83 }, 84 eventClick:function(event,jsEvent,view){ //时间 点击事件 85 alert("针对点击的事件名称:"+event.title); 86 alert("针对javascript的事件:"+jsEvent.clientX); 87 alert("视图名:"+view.name); 88 if(event.url){//当点击事件的时候，如果时间有url属性，默认跳转到url,通过return false来阻止默认行为。 89 window.open(event.url); 90 return false; 91 } 92 }, 93 eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { 94 alert("你在调整大小"); 95 }, 96 eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { 97 //parent.lookCalendarDetial(event.title,event.start.format("yyyy-MM-dd hh:mm:ss"),event.end.format("yyyy-MM-dd hh:mm:ss")); 98 alert("你在移动日程"); 99 }, 100 101 /*eventMouseover:function(event,jsEvent,view){ 102 alert("鼠标经过某个事件的标题"+event.title); 103 alert("鼠标经过某个事件位置"+jsEvent.clientX); 104 alert("鼠标经过某个事件视图名称"+view.title); 105 }, 106 eventMouseout:functin(event,jsEvent,view){ 107 },*/ 108 selectable:true,//选择的时候高亮 109 selectHelper:true,//只对agenda有效果 110 /* 111 selectHelper:function(start,end){ 112 //alert(start); 113 },*/ 114 unselectAuto:true,//是否清除高度选择的部分。默认为true 115 116 117 editable: true, 118 119 events: [ 120 { 121 title: 'All Day Event房东十分激动司法鉴定收费', 122 start: new Date(y, m, 1) 123 }, 124 { 125 title: 'Long Event', 126 start: new Date(y, m, d-5), 127 end: new Date(y, m, d-2) 128 }, 129 { 130 id: 999, 131 title: 'Repeating Event', 132 start: new Date(y, m, d-3, 16, 0), 133 allDay: false 134 }, 135 { 136 id: 999, 137 title: 'Repeating Event', 138 start: new Date(y, m, d+4, 16, 0), 139 allDay: false 140 }, 141 { 142 title: 'Meeting', 143 start: new Date(y, m, d, 10, 30), 144 allDay: false 145 }, 146 { 147 title: 'Lunch', 148 start: new Date(y, m, d, 12, 0), 149 end: new Date(y, m, d, 14, 0), 150 allDay: false 151 }, 152 { 153 title: 'Birthday Party', 154 start: new Date(y, m, d+1, 19, 0), 155 end: new Date(y, m, d+1, 22, 30), 156 allDay: false 157 }, 158 { 159 title: 'Click for Google', 160 start: new Date(y, m, 28), 161 end: new Date(y, m, 29), 162 url: 'http://google.com/' 163 } 164 ] 165 }); 166 167 }); 168 169 </script> 170 <style> 171 172 body { 173 margin-top: 40px; 174 text-align: center; 175 font-size: 13px; 176 font-family:"微软雅黑"; 177 } 178 179 /*日程宽度*/ 180 #calendar { 181 width: 900px; 182 margin: 0 auto; 183 } 184 185 </style> 186 </head> 187 <body> 188 <div id='calendar'></div> 189 </body> 190 </html>