js/web 日程管理插件

最新推荐文章于 2024-06-02 20:45:59 发布

「已注销」

最新推荐文章于 2024-06-02 20:45:59 发布

阅读量1w

点赞数 1

fullcalendar是一款jQuery日程管理控件，提供了丰富的属性设置和方法调用，官网下载地址http://fullcalendar.io/download，目前最新版本是2.3.2。
只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。
events和eventSources是数据源配置项，存储数组对象，可以是Arrays/Functions/URLs，点击详情。如

[javascript]view plaincopy 
    
 $('#calendar').fullCalendar({  
     events: {  
         url: 'http://<数据源路径>',  
         type: 'post'  
     }  
 });  

eventSources和events类似，不过eventSources用于多个数据源的情况，是events数组，点击详情。如

[javascript]view plaincopy 
    
 $('#calendar').fullCalendar({  
     eventSources: [  
         '/feed1.php',  
         '/feed2.php'  
     ]  
 });  

select是时间段选择事件，当选择某个时间段时触发，用于新建日程，点击详情。

eventClick是日程点击事件，当某个日程被点击是触发，用户查看或者更新日程，点击详情。

[html]view plaincopy 
    
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
   
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
     <title>日程管理</title>  
       
     <script src='../lib/jquery/jquery-1.11.2.min.js'></script>  
       
     <!--   
         日期控件  
         http://xdsoft.net/jqplugins/datetimepicker/  
      -->  
     <link href='../lib/datetimepicker/jquery.datetimepicker.css' rel='stylesheet' type="text/css" />  
     <script src='../lib/datetimepicker/jquery.datetimepicker.js'></script>    
       
     <!-- 日程管理样式及JS -->  
     <link href='../lib/fullcalendar/fullcalendar.css' rel='stylesheet' type="text/css" />  
     <script src='../lib/fullcalendar/lib/moment.min.js'></script>     
     <script src='../lib/fullcalendar/fullcalendar.min.js'></script>   
     <script src='../lib/fullcalendar/lang/zh-cn.js'></script>  
       
     <!--   
         rhui  
         http://git.oschina.net/accountwcx/rhui  
     -->  
     <link href='../lib/rhui/css/rhui.css' rel='stylesheet' type="text/css" />  
     <script src='../lib/rhui/rhui-all.js'></script>  
       
     <style type="text/css">  
         #mycalendar{  
             display: block;  
             position: relative;  
             width: 900px;  
             margin: 15px auto;  
             padding: 0;  
         }  
           
         .fc button{  
             height: 27px;  
         }  
           
         .fc-center>h2{  
             font-size: 20px;  
             line-height: 27px;  
         }  
           
         .fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{  
             border-color: #bed5f3;  
         }  
           
         .fc-unthemed .fc-divider, .fc-unthemed .fc-popover .fc-header,.fc-widget-header,.fc-axis{  
             background-color: #e5effe;  
         }  
           
         .fc th, .fc td{  
             font-size: 14px;  
             line-height: 25px;  
         }  
           
         .rhui-field{  
             width: 250px;  
             margin-bottom: 10px;  
         }  
           
         .field-label{  
             width: 70px;  
             line-height: 23px;  
             vertical-align: top;  
         }  
     </style>  
 </head>  
   
 <body>  
     <div id="mycalendar"></div>  
       
     <!-- 新建日程窗口 -->  
     <div class="rhui-window" id="addCalendarWin" style="display:none;">  
         <div class="rhui-panel-body">  
             <table style="margin-left:25px;">  
                 <tr>  
                     <td class="field-label">日程标题：</td>  
                     <td><input class="rhui-field" name="title" type="text" /></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">日程内容：</td>  
                     <td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">开始时间：</td>  
                     <td><input class="rhui-field" name="start" type="text"/></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">结束时间：</td>  
                     <td><input class="rhui-field" name="end" type="text"/></td>  
                 </tr>  
             </table>  
         </div>  
     </div>  
     <!-- end 新建日程窗口 -->  
       
     <!-- 修改日程窗口 -->  
     <div class="rhui-window" id="editCalendarWin" style="display:none;">  
         <div class="rhui-panel-body">  
             <!-- 日程id -->  
             <input type="hidden" name="id" />  
             <table style="margin-left:25px;">  
                 <tr>  
                     <td class="field-label">日程标题：</td>  
                     <td><input class="rhui-field" name="title" type="text" /></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">日程内容：</td>  
                     <td><textarea class="rhui-field" name="content" style="height:62px;"></textarea></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">开始时间：</td>  
                     <td><input class="rhui-field" name="start" type="text"/></td>  
                 </tr>  
                 <tr>  
                     <td class="field-label">结束时间：</td>  
                     <td><input class="rhui-field" name="end" type="text"/></td>  
                 </tr>  
             </table>  
         </div>  
     </div>  
     <!-- end 修改日程窗口 -->     
       
     <script type="text/javascript">  
         $(function(){  
             //初始化FullCalendar  
             $('#mycalendar').fullCalendar({  
                 //日历初始化默认视图，可选agendaWeek、agendaDay、month  
                 defaultView: 'agendaWeek',  
                   
                 /*  
                     设置日历头部信息  
                     头部信息包括left、center、right三个位置，分别对应头部左边、头部中间和头部右边。  
                     头部信息每个位置可以对应以下配置：  
                         title: 显示当前月份/周/日信息  
                         prev: 用于切换到上一月/周/日视图的按钮  
                         next: 用于切换到下一月/周/日视图的按钮  
                         prevYear: 用于切换到上一年视图的按钮  
                         nextYear: 用于切换到下一年视图的按钮  
                     如果不想显示头部信息，可以设置header为false  
                 */  
                 header: {  
                     left: 'prev,next today',  
                     center: 'title',  
                     right: 'month,agendaWeek,agendaDay'  
                 },  
                   
                 //设置日历头部的日期格式  
                 titleFormat: {  
                     month: 'YYYY年MM月',  
                     week: 'YYYY年MM月DD日',  
                     day: 'YYYY年MM月DD日 dddd'  
                 },  
                   
                 //日历高度  
                 height: $(window).height() - 40,  
                   
                 //显示周末，设为false则不显示周六和周日。  
                 weekends: true,  
                   
                 /*  
                     在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。  
                     fixed：固定显示6周高，日历高度保持不变  
                     liquid：不固定周数，高度随周数变化  
                     variable：不固定周数，但高度固定  
                 */  
                 weekMode: 'liquid',  
                   
                 //日历上显示全天的文本  
                 allDayText: '全天',  
                   
                 //允许用户通过单击或拖动选择日历中的对象，包括天和时间。  
                 selectable: true,  
                   
                 //当点击或拖动选择时间时，显示默认加载的提示信息，该属性只在周/天视图里可用。  
                 selectHelper: true,  
                   
                 //当点击页面日历以外的位置时，自动取消当前的选中状态。  
                 unselectAuto: true,  
                   
                 /*  
                 events: {  
                     url: '',  
                     type: 'post'  
                 },  
                 */  
                   
                 /*  
                     添加日程事件  
                     start: 被选中区域的开始时间  
                     end: 被选中区域的结束时间  
                     jsEvent: jascript对象  
                     view: 当前视图对象  
                 */  
                 select: function(start, end, jsEvent, view){  
                     //添加日程事件  
                     var $win = $('#addCalendarWin');  
                     $win.find('input[name="start"]').val(start.format('YYYY-MM-DD HH:mm'));  
                     $win.find('input[name="end"]').val(end.format('YYYY-MM-DD HH:mm'));  
                     $win.rhui('window').show();  
                 },  
                   
                 /*  
                     修改日程事件  
                     当点击日历中的某一日程时，触发此事件  
                     data: 日程信息  
                     jsEvent: jascript对象  
                     view: 当前视图对象  
                 */  
                 eventClick: function(data, jsEvent, view){  
                     //修改日程事件  
                     var $win = $('#editCalendarWin');  
                     $win.find('input[name="id"]').val(data.id);  
                     $win.find('input[name="title"]').val(data.title);  
                     $win.find('textarea[name="content"]').val(data.cntent);  
                     $win.find('input[name="start"]').val(data.start.format('YYYY-MM-DD HH:mm'));  
                     $win.find('input[name="end"]').val(data.end.format('YYYY-MM-DD HH:mm'));  
                     $win.rhui('window').show();  
                 }  
             });  
               
             //初始化新建日程窗口  
             (function(){  
                 var $win = $('#addCalendarWin');  
                   
                 //初始化日期控件  
                 $win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});  
                 $win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});  
                   
                 $win.rhui('window', {  
                     title: '新建日程',  
                     width: 400,  
                     height: 265,  
                     buttons: [{  
                         text: '确定',  
                         cls: 'rhui-btn-primary',  
                         click: function(toolbar, win){  
                             alert('日程已新建');  
                         }  
                     },{  
                         text: '取消',  
                         click: function(toolbar, win){  
                             win.hide();  
                         }  
                     }]  
                 }).hide();                
             })();  
               
             //初始化修改日程窗口  
             (function(){  
                 var $win = $('#editCalendarWin');  
                   
                 //初始化日期控件  
                 $win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});  
                 $win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});  
                   
                 $win.rhui('window', {  
                     title: '修改日程',  
                     width: 400,  
                     height: 265,  
                     buttons: [{  
                         text: '确定',  
                         cls: 'rhui-btn-primary',  
                         click: function(toolbar, win){  
                             alert('日程已修改');  
                         }  
                     },{  
                         text: '删除',  
                         cls: 'rhui-btn-danger',  
                         click: function(toolbar, win){  
                             alert('日程已删除');  
                         }  
                     },{  
                         text: '取消',  
                         click: function(toolbar, win){  
                             win.hide();  
                         }  
                     }]  
                 }).hide();  
             })();  
         });  
     </script>  
 </body>  
   
 </html>  

「已注销」

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
4
评论
js/web 日程管理插件

fullcalendar是一款jQuery日程管理控件，提供了丰富的属性设置和方法调用，官网下载地址http://fullcalendar.io/download，目前最新版本是2.3.2。只要调用$('#calendar').fullcalendar(options)即可初始化，初始化配置中events、eventSources、select和eventClick是必须设置项。event
复制链接

扫一扫