js/web 日程管理 插件

fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,目前最新版本是2.3.2。
只要调用$('#calendar').fullcalendar(options)即可初始化,初始化配置中events、eventSources、select和eventClick是必须设置项。
events和eventSources是数据源配置项,存储数组对象,可以是Arrays/Functions/URLs, 点击详情。如
[javascript]  view plain  copy
  1. $('#calendar').fullCalendar({  
  2.     events: {  
  3.         url: 'http://<数据源路径>',  
  4.         type: 'post'  
  5.     }  
  6. });  

eventSources和events类似,不过eventSources用于多个数据源的情况,是events数组, 点击详情。如
[javascript]  view plain  copy
  1. $('#calendar').fullCalendar({  
  2.     eventSources: [  
  3.         '/feed1.php',  
  4.         '/feed2.php'  
  5.     ]  
  6. });  

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

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

[html]  view plain  copy
  1. >  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6.     <title>日程管理title>  
  7.       
  8.     <script src='../lib/jquery/jquery-1.11.2.min.js'>script>  
  9.       
  10.       
  11.     <link href='../lib/fullcalendar/fullcalendar.css' rel='stylesheet' type="text/css" />  
  12.     <script src='../lib/fullcalendar/lib/moment.min.js'>script>     
  13.     <script src='../lib/fullcalendar/fullcalendar.min.js'>script>   
  14.     <script src='../lib/fullcalendar/lang/zh-cn.js'>script>  
  15.       
  16.       
  17.     <div class="rhui-window" id="addCalendarWin" style="display:none;">  
  18.         <div class="rhui-panel-body">  
  19.             <table style="margin-left:25px;">  
  20.                 <tr>  
  21.                     <td class="field-label">日程标题:td>  
  22.                     <td><input class="rhui-field" name="title" type="text" />td>  
  23.                 tr>  
  24.                 <tr>  
  25.                     <td class="field-label">日程内容:td>  
  26.                     <td><textarea class="rhui-field" name="content" style="height:62px;">textarea>td>  
  27.                 tr>  
  28.                 <tr>  
  29.                     <td class="field-label">开始时间:td>  
  30.                     <td><input class="rhui-field" name="start" type="text"/>td>  
  31.                 tr>  
  32.                 <tr>  
  33.                     <td class="field-label">结束时间:td>  
  34.                     <td><input class="rhui-field" name="end" type="text"/>td>  
  35.                 tr>  
  36.             table>  
  37.         div>  
  38.     div>  
  39.       
  40.       
  41.       
  42.     <div class="rhui-window" id="editCalendarWin" style="display:none;">  
  43.         <div class="rhui-panel-body">  
  44.               
  45.             <input type="hidden" name="id" />  
  46.             <table style="margin-left:25px;">  
  47.                 <tr>  
  48.                     <td class="field-label">日程标题:td>  
  49.                     <td><input class="rhui-field" name="title" type="text" />td>  
  50.                 tr>  
  51.                 <tr>  
  52.                     <td class="field-label">日程内容:td>  
  53.                     <td><textarea class="rhui-field" name="content" style="height:62px;">textarea>td>  
  54.                 tr>  
  55.                 <tr>  
  56.                     <td class="field-label">开始时间:td>  
  57.                     <td><input class="rhui-field" name="start" type="text"/>td>  
  58.                 tr>  
  59.                 <tr>  
  60.                     <td class="field-label">结束时间:td>  
  61.                     <td><input class="rhui-field" name="end" type="text"/>td>  
  62.                 tr>  
  63.             table>  
  64.         div>  
  65.     div>  
  66.          
  67.       
  68.     <script type="text/javascript">  
  69.         $(function(){  
  70.             //初始化FullCalendar  
  71.             $('#mycalendar').fullCalendar({  
  72.                 //日历初始化默认视图,可选agendaWeek、agendaDay、month  
  73.                 defaultView: 'agendaWeek',  
  74.                   
  75.                 /*  
  76.                     设置日历头部信息  
  77.                     头部信息包括left、center、right三个位置,分别对应头部左边、头部中间和头部右边。  
  78.                     头部信息每个位置可以对应以下配置:  
  79.                         title: 显示当前月份/周/日信息  
  80.                         prev: 用于切换到上一月/周/日视图的按钮  
  81.                         next: 用于切换到下一月/周/日视图的按钮  
  82.                         prevYear: 用于切换到上一年视图的按钮  
  83.                         nextYear: 用于切换到下一年视图的按钮  
  84.                     如果不想显示头部信息,可以设置header为false  
  85.                 */  
  86.                 header: {  
  87.                     left: 'prev,next today',  
  88.                     center: 'title',  
  89.                     right: 'month,agendaWeek,agendaDay'  
  90.                 },  
  91.                   
  92.                 //设置日历头部的日期格式  
  93.                 titleFormat: {  
  94.                     month: 'YYYY年MM月',  
  95.                     week: 'YYYY年MM月DD日',  
  96.                     day: 'YYYY年MM月DD日 dddd'  
  97.                 },  
  98.                   
  99.                 //日历高度  
  100.                 height: $(window).height() - 40,  
  101.                   
  102.                 //显示周末,设为false则不显示周六和周日。  
  103.                 weekends: true,  
  104.                   
  105.                 /*  
  106.                     在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。  
  107.                     fixed:固定显示6周高,日历高度保持不变  
  108.                     liquid:不固定周数,高度随周数变化  
  109.                     variable:不固定周数,但高度固定  
  110.                 */  
  111.                 weekMode: 'liquid',  
  112.                   
  113.                 //日历上显示全天的文本  
  114.                 allDayText: '全天',  
  115.                   
  116.                 //允许用户通过单击或拖动选择日历中的对象,包括天和时间。  
  117.                 selectable: true,  
  118.                   
  119.                 //当点击或拖动选择时间时,显示默认加载的提示信息,该属性只在周/天视图里可用。  
  120.                 selectHelper: true,  
  121.                   
  122.                 //当点击页面日历以外的位置时,自动取消当前的选中状态。  
  123.                 unselectAuto: true,  
  124.                   
  125.                 /*  
  126.                 events: {  
  127.                     url: '',  
  128.                     type: 'post'  
  129.                 },  
  130.                 */  
  131.                   
  132.                 /*  
  133.                     添加日程事件  
  134.                     start: 被选中区域的开始时间  
  135.                     end: 被选中区域的结束时间  
  136.                     jsEvent: jascript对象  
  137.                     view: 当前视图对象  
  138.                 */  
  139.                 select: function(start, end, jsEvent, view){  
  140.                     //添加日程事件  
  141.                     var $win = $('#addCalendarWin');  
  142.                     $win.find('input[name="start"]').val(start.format('YYYY-MM-DD HH:mm'));  
  143.                     $win.find('input[name="end"]').val(end.format('YYYY-MM-DD HH:mm'));  
  144.                     $win.rhui('window').show();  
  145.                 },  
  146.                   
  147.                 /*  
  148.                     修改日程事件  
  149.                     当点击日历中的某一日程时,触发此事件  
  150.                     data: 日程信息  
  151.                     jsEvent: jascript对象  
  152.                     view: 当前视图对象  
  153.                 */  
  154.                 eventClick: function(data, jsEvent, view){  
  155.                     //修改日程事件  
  156.                     var $win = $('#editCalendarWin');  
  157.                     $win.find('input[name="id"]').val(data.id);  
  158.                     $win.find('input[name="title"]').val(data.title);  
  159.                     $win.find('textarea[name="content"]').val(data.cntent);  
  160.                     $win.find('input[name="start"]').val(data.start.format('YYYY-MM-DD HH:mm'));  
  161.                     $win.find('input[name="end"]').val(data.end.format('YYYY-MM-DD HH:mm'));  
  162.                     $win.rhui('window').show();  
  163.                 }  
  164.             });  
  165.               
  166.             //初始化新建日程窗口  
  167.             (function(){  
  168.                 var $win = $('#addCalendarWin');  
  169.                   
  170.                 //初始化日期控件  
  171.                 $win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});  
  172.                 $win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});  
  173.                   
  174.                 $win.rhui('window', {  
  175.                     title: '新建日程',  
  176.                     width: 400,  
  177.                     height: 265,  
  178.                     buttons: [{  
  179.                         text: '确定',  
  180.                         cls: 'rhui-btn-primary',  
  181.                         click: function(toolbar, win){  
  182.                             alert('日程已新建');  
  183.                         }  
  184.                     },{  
  185.                         text: '取消',  
  186.                         click: function(toolbar, win){  
  187.                             win.hide();  
  188.                         }  
  189.                     }]  
  190.                 }).hide();                
  191.             })();  
  192.               
  193.             //初始化修改日程窗口  
  194.             (function(){  
  195.                 var $win = $('#editCalendarWin');  
  196.                   
  197.                 //初始化日期控件  
  198.                 $win.find('input[name="start"]').datetimepicker({format: 'Y-m-d H:i'});  
  199.                 $win.find('input[name="end"]').datetimepicker({format: 'Y-m-d H:i'});  
  200.                   
  201.                 $win.rhui('window', {  
  202.                     title: '修改日程',  
  203.                     width: 400,  
  204.                     height: 265,  
  205.                     buttons: [{  
  206.                         text: '确定',  
  207.                         cls: 'rhui-btn-primary',  
  208.                         click: function(toolbar, win){  
  209.                             alert('日程已修改');  
  210.                         }  
  211.                     },{  
  212.                         text: '删除',  
  213.                         cls: 'rhui-btn-danger',  
  214.                         click: function(toolbar, win){  
  215.                             alert('日程已删除');  
  216.                         }  
  217.                     },{  
  218.                         text: '取消',  
  219.                         click: function(toolbar, win){  
  220.                             win.hide();  
  221.                         }  
  222.                     }]  
  223.                 }).hide();  
  224.             })();  
  225.         });  
  226.     script>  
  227. body>  
  228.   
  229. html>  

js/web 日程管理 插件_第1张图片

js/web 日程管理 插件_第2张图片

js/web 日程管理 插件_第3张图片

你可能感兴趣的:(js,div+css,jsp)