FullCalendar(日程管理控件)

长平狐 发布于 2013/01/06 11:34
阅读 20K+
收藏 5

(以下是我学习FullCalendar控件时,网络上收集的一些资料)

第一部分(官方资料)

jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/

jquery.fullCalendar英文文档: http://arshaw.com/fullcalendar/docs/

jquery.fullCalendar下载:http://arshaw.com/fullcalendar/download/

第二部分(官方文档的翻译)

http://blog.csdn.net/lgg201/article/details/4818941

第三部分(视频教程)

http://www.verycd.com/topics/2782321/(一共两集)

第四部分(实战)

(自己做了一个日程管理)




主要的代码如下:

[javascript]   view plain copy
  1. <script type='text/javascript'>  
  2.     $(document).ready(function() {  
  3.         artDialog.notice = function (options) {    
  4.             var opt = options || {},    
  5.                 api, aConfig, hide, wrap, top,    
  6.                 duration = 800;    
  7.                     
  8.             var config = {    
  9.                 id: 'Notice',    
  10.                 left: '100%',    
  11.                 top: '100%',    
  12.                 fixed: true,    
  13.                 drag: false,    
  14.                 resize: false,    
  15.                 follow: null,    
  16.                 lock: false,    
  17.                 init: function(here){    
  18.                     api = this;    
  19.                     aConfig = api.config;    
  20.                     wrap = api.DOM.wrap;    
  21.                     top = parseInt(wrap[0].style.top);    
  22.                     hide = top + wrap[0].offsetHeight;    
  23.                         
  24.                     wrap.css('top', hide + 'px')    
  25.                         .animate({top: top + 'px'}, duration, function () {    
  26.                             opt.init && opt.init.call(api, here);    
  27.                         });    
  28.                 },    
  29.                 close: function(here){    
  30.                     wrap.animate({top: hide + 'px'}, duration, function () {    
  31.                         opt.close && opt.close.call(this, here);    
  32.                         aConfig.close = $.noop;    
  33.                         api.close();    
  34.                     });    
  35.                         
  36.                     return false;    
  37.                 }    
  38.             };      
  39.                 
  40.             for (var i in opt) {    
  41.                 if (config[i] === undefined) config[i] = opt[i];    
  42.             };    
  43.                 
  44.             return artDialog(config);    
  45.         };    
  46.         var date = new Date();  
  47.         var d = date.getDate();  
  48.         var m = date.getMonth();  
  49.         var y = date.getFullYear();       
  50.         $('#calendar').fullCalendar({  
  51.             theme: true,  
  52.             header: {  
  53.                 left: 'prev,next today',  
  54.                 center: 'title',  
  55.                 right: 'month,agendaWeek,agendaDay'  
  56.             },  
  57.             //fullcalendar本地化  
  58.             //timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.  
  59.             monthNames: ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"],    
  60.             monthNamesShort: ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"],    
  61.             dayNames: ["周日""周一""周二""周三""周四""周五""周六"],    
  62.             dayNamesShort: ["周日""周一""周二""周三""周四""周五""周六"],    
  63.             today: ["今天"],    
  64.             firstDay: 1,    
  65.             buttonText: {    
  66.                 today: '今天',    
  67.                 month: '月',    
  68.                 week: '周',    
  69.                 day: '日',    
  70.                 prev: '上一月',    
  71.                 next: '下一月'    
  72.             },    
  73.             allDaySlot:false,  
  74.             selectable: true,  
  75.             selectHelper: true,   
  76.             aspectRatio:2.7,  
  77.             editable: false,  
  78.             allDayDefault:false,  
  79.             viewDisplay: function(view) {    
  80.             var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH🇲🇲ss");  
  81.             var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd HH🇲🇲ss");    
  82.             $("#calendar").fullCalendar('removeEvents');    
  83.             $.getJSON('http://localhost:8080/pnote/schedule/listevents.action',{start:viewStart,end:viewEnd},function(data) {    
  84.                for(var i=0;i<data.length;i++) {    
  85.                    var obj = new Object();    
  86.                    obj.id = data[i].id;    
  87.                    obj.title = data[i].title;                   
  88.                    obj.description = data[i].description;            
  89.                    obj.color = data[i].color;  
  90.                    obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);  
  91.                    obj.messagenotice = data[i].messagenotice;  
  92.                    obj.description = data[i].description;  
  93.                    obj.start = $.fullCalendar.parseDate(data[i].start);                   
  94.                    obj.end = $.fullCalendar.parseDate(data[i].end);   
  95.                    $("#calendar").fullCalendar('renderEvent',obj,true);                     
  96.                }    
  97.              }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示  
  98.            },  
  99.            eventMouseover: function(event, jsEvent, view){                
  100.                 showDetail(event, jsEvent);                   
  101.            },  
  102.             eventMouseout: function(event, jsEvent, view){  
  103.                 $('#tip').remove();  
  104.             },  
  105.             //日程点击:添加日程  
  106.             dayClick: function(date, allDay, jsEvent, view) {  
  107.                  var obj =new Object();   
  108.                  art.dialog.open('newschedule.html',{  
  109.                     title: '添加日程',  
  110.                     lock: true,  
  111.                     width:300,  
  112.                     height:400,  
  113.                     fixed: true//固定定位  
  114.                     //background: '#600', // 背景色  
  115.                     opacity: 0.6,   // 透明度  
  116.                     // 在open()方法中,init会等待iframe加载完毕后执行  
  117.                     init: function () {  
  118.                         var iframe = this.iframe.contentWindow;  
  119.                         //var top = art.dialog.top;// 引用顶层页面window对象  
  120.                         var start = iframe.document.getElementById('form-start');                     
  121.                         start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd HH🇲🇲ss");                              
  122.                      },  
  123.                      okVal:'提交日程',  
  124.                      ok: function () {  
  125.                         var iframe = this.iframe.contentWindow;  
  126.                         if (!iframe.document.body) {  
  127.                             alert('iframe还没加载完毕呢');  
  128.                             return false;  
  129.                         };  
  130.                           
  131.                         var start = iframe.document.getElementById('form-start').value;  
  132.                         var end = iframe.document.getElementById('form-end').value;  
  133.                         var remindertime = iframe.document.getElementById('form-remindertime').value;  
  134.                         obj.title = iframe.document.getElementById('form-title').value;  
  135.                         obj.description = iframe.document.getElementById('form-description').value;  
  136.                         obj.start = $.fullCalendar.parseDate(start);  
  137.                         obj.end = $.fullCalendar.parseDate(end);                                      
  138.                         obj.color = iframe.document.getElementById('form-color').value;  
  139.                         if (obj.title== '') {  
  140.                             alert("标题不能为空");  
  141.                             return false;  
  142.                          }else if(start== '') {  
  143.                             alert("开始日期不能为空");  
  144.                             return false;  
  145.                          }else if(end == '') {  
  146.                             alert("结束日期不能为空");  
  147.                             return false;  
  148.                          }else if(iframe.document.getElementById('form-messagenotice').checked) {                          
  149.                                 if(remindertime == '') {  
  150.                                     alert("短信提醒时间不能为空");  
  151.                                     return false;  
  152.                                 }  
  153.                                 obj.messagenotice = 1;  
  154.                                 obj.remindertime = $.fullCalendar.parseDate(remindertime);  
  155.                             }else {  
  156.                                 obj.messagenotice = 0;  
  157.                                 obj.remindertime = null;  
  158.                             }             
  159.                           
  160.                          $.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台,保存到数据库       
  161.                             title: obj.title,       
  162.                             start:start,       
  163.                             end:end,  
  164.                             description:obj.description,                             
  165.                             remindertime:remindertime,  
  166.                             color:obj.color,  
  167.                             messagenotice:obj.messagenotice  
  168.                             },  
  169.                             function (data, textStatus){  
  170.                                 obj.id = data[0].id;  
  171.                             }, "json"  
  172.                           );                          
  173.                           $('#calendar').fullCalendar('renderEvent', obj);  //核心的更新代码  
  174.                           $('#calendar').fullCalendar('unselect');  
  175.                           art.dialog.notice({  
  176.                                 title: '笔记之家',  
  177.                                 width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩  
  178.                                 content: '日程已添加至后台!',  
  179.                                 icon: 'face-smile',  
  180.                                 time: 3  
  181.                             });  
  182.                           return true;                                
  183.                        },  
  184.                         cancel: true  
  185.                     });   
  186.             },  
  187.             eventClick:function(calEvent, jsEvent, view){       
  188.                 art.dialog.open('newschedule.html', {  
  189.                     title: '更新日程',  
  190.                     lock: true,  
  191.                     width:300,  
  192.                     height:400,  
  193.                     //background: '#600', // 背景色  
  194.                     opacity: 0.6,   // 透明度  
  195.                     // 在open()方法中,init会等待iframe加载完毕后执行  
  196.                     init: function () {  
  197.                         var iframe = this.iframe.contentWindow;  
  198.                         //var top = art.dialog.top;// 引用顶层页面window对象  
  199.                         iframe.document.getElementById('form-start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd HH🇲🇲ss");                     
  200.                         iframe.document.getElementById('form-end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd HH🇲🇲ss");  
  201.                         iframe.document.getElementById('form-description').value = calEvent.description;  
  202.                         iframe.document.getElementById('form-title').value = calEvent.title;  
  203.                         if(calEvent.messagenotice == 1) {  
  204.                             iframe.document.getElementById('form-messagenotice').checked = true;                              
  205.                             iframe.document.getElementById('form-remindertime').value =  $.fullCalendar.formatDate(calEvent.remindertime,"yyyy-MM-dd HH🇲🇲ss");  
  206.                             iframe.document.getElementById('showtxt').style.display='block';  
  207.                         }else {                           
  208.                         }  
  209.                         iframe.document.getElementById('form-color').value = calEvent.color;                          
  210.                     },  
  211.                     okVal:'修改日程',  
  212.                     ok: function () {  
  213.                         var iframe = this.iframe.contentWindow;  
  214.                         if (!iframe.document.body) {  
  215.                             alert('iframe还没加载完毕呢')  
  216.                             return false;  
  217.                         };  
  218.                           
  219.                         var start = iframe.document.getElementById('form-start').value;  
  220.                         var end = iframe.document.getElementById('form-end').value;  
  221.                         var remindertime = iframe.document.getElementById('form-remindertime').value;  
  222.                         calEvent.title = iframe.document.getElementById('form-title').value;  
  223.                         calEvent.description = iframe.document.getElementById('form-description').value;  
  224.                         calEvent.start = $.fullCalendar.parseDate(start);  
  225.                         calEvent.end = $.fullCalendar.parseDate(end);                                     
  226.                         calEvent.color = iframe.document.getElementById('form-color').value;  
  227.                         if (calEvent.title== '') {  
  228.                             alert("标题不能为空");  
  229.                             return false;  
  230.                          }else if(start== '') {  
  231.                             alert("开始日期不能为空");  
  232.                             return false;  
  233.                          }else if(end == '') {  
  234.                             alert("结束日期不能为空");  
  235.                             return false;  
  236.                          }else if(iframe.document.getElementById('form-messagenotice').checked) {                          
  237.                                 if(remindertime == '') {  
  238.                                     alert("短信提醒时间不能为空");  
  239.                                     return false;  
  240.                                 }  
  241.                                 calEvent.messagenotice = 1;  
  242.                                 calEvent.remindertime = $.fullCalendar.parseDate(remindertime);  
  243.                             }else {  
  244.                                 calEvent.messagenotice = 0;  
  245.                                 calEvent.remindertime = null;  
  246.                             }                           
  247.                         $.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台,保存到数据库  
  248.                                 id:calEvent.id,  
  249.                                 title: calEvent.title,       
  250.                                 start:start,       
  251.                                 end:end,  
  252.                                 description:calEvent.description,                                 
  253.                                 color:calEvent.color,  
  254.                                 remindertime:remindertime,  
  255.                                 messagenotice:calEvent.messagenotice  
  256.                             }                                         
  257.                         );     
  258.                         $('#calendar').fullCalendar('updateEvent', calEvent);  
  259.                         //弹出提示  
  260.                         art.dialog.notice({  
  261.                             title: '笔记之家',  
  262.                             width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩  
  263.                             content: '日程已更新!',  
  264.                             icon: 'face-smile',  
  265.                             time: 3  
  266.                         });  
  267.                         return true;                              
  268.                     },  
  269.                     cancel: true,  
  270.                   //删除日程,保存到数据库  
  271.                     button: [{  
  272.                         name: '删除日程',  
  273.                         callback: function () {  
  274.                             //this.content('你同意了').time(2);  
  275.                              $.post("http://localhost:8080/pnote/schedule/deleteevents",{  
  276.                                 id:calEvent.id  
  277.                              });                     
  278.                             $('#calendar').fullCalendar('removeEvents',calEvent.id);  
  279.                             art.dialog.notice({  
  280.                                 title: '笔记之家',  
  281.                                 width: 150,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩  
  282.                                 content: '日程已删除!',  
  283.                                 icon: 'face-smile',  
  284.                                 time: 3  
  285.                             });  
  286.                             return true;  
  287.                          }            
  288.                          }]  
  289.                    });  
  290.                 }  
  291.             });               
  292.         });  
  293.   
  294.     function showDetail(obj, e){  
  295.         var str;  
  296.         if(obj.messagenotice == 1)  str = "短信提醒时间:"+$.fullCalendar.formatDate(obj.remindertime,"yyyy-MM-dd HH🇲🇲ss");  
  297.         else {str = "短信提醒未启动";}  
  298.         var eInfo = '<div id="tip"><ul>';  
  299.         eInfo += '<li class="clock">' + '开始:'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH🇲🇲ss") +'</br>结束:'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd HH🇲🇲ss")+ '</li>';  
  300.         eInfo += '<li class="message">' +'日志:'+ obj.description + '<br/> </li>';  
  301.         //eInfo += '<li>分类:' + obj.title + '</li>';  
  302.         eInfo += '<li class="postmessage">' + str + '<br/> </li>';  
  303.         eInfo += '</ul></div>';  
  304.         $(eInfo).appendTo($('body'));  
  305.         $('#tip').css({"opacity":"0.4""display":"none""left":(e.pageX + 20) + "px""top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);  
  306.         //鼠标移动效果  
  307.         $('.fc-event-inner').mousemove(function(e){  
  308.             $('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});  
  309.         });  
  310.     }     
  311.       
  312. </script>  
  313. <style type='text/css'>  
  314.   
  315.     body {  
  316.         margin-top: 10px;  
  317.         text-align: center;  
  318.         font-size: 13px;  
  319.         font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;  
  320.         }  
  321.       
  322.     /********************************************** 鼠标悬停tip提示  ************************************************/  
  323.     #tip{  
  324.         position: absolute;  
  325.         width: 250px;  
  326.         max-width: 400px;  
  327.         text-align: left;  
  328.         padding: 4px;  
  329.         border: #87CEEB solid 7px;  
  330.         border-radius: 5px;  
  331.         background: #00BFFF;  
  332.         z-index: 1000;  
  333.         behavior: url('/css/css3/pie.htc');  
  334.     }  
  335.     #tip ul{  
  336.         margin: 0;  
  337.         padding: 0;  
  338.     }  
  339.     #tip ul li{  
  340.         font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;  
  341.         font-size:15px;  
  342.         list-style: none;  
  343.         padding-left: 40px;  
  344.     }  
  345.     .clock{  
  346.         /*line-height: 60px;*/  
  347.         background: url('./fullcalendar/images/clock.png') no-repeat;  
  348.         background-size:40px 40px;  
  349.     }  
  350.     .postmessage{  
  351.         /*line-height: 60px; 
  352.         font-size: 12px;*/  
  353.         background: url('./fullcalendar/images/message.png') no-repeat;  
  354.         background-size:40px 40px;  
  355.     }  
  356.     .message{  
  357.         /*margin-top: 5px;*/  
  358.         /*line-height: 60px;*/  
  359.         background: url('./fullcalendar/images/text.png') no-repeat;  
  360.         background-size:40px 40px;  
  361.     }  
  362. </style>  
  363. </head>  
  364. <body>  
  365.     <div id="container">  
  366.         <div id='selectdate'></div>  
  367.         <div id='calendar'></div>     
  368.     </div>      
  369. </body>  
  370. </html>  

原文链接:http://blog.csdn.net/sd0902/article/details/8394122
加载中
0
进击的代码
进击的代码
如果一开始设置成display:none,然后再显示出来,数据不会显示出来,bug一枚~
返回顶部
顶部