预览模式: 普通 | 列表

HTML5 video标签属性和事件用法大全

1、video 属性

XML/HTML代码
  1. <!-- video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg -->  
  2.   <video src="test.mp4" controls width="400" height="300"></video>  
  3.   
  4.   <!-- 禁止下载 -->  
  5.   <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>  
  6.   
  7.   <!-- 禁止下载,禁止全屏 -->  
  8.   <video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video>  
  9.   
  10.   <!-- 自动播放 (不同浏览器的表现不一样) -->  
  11.   <video src="test.mp4" controls autoplay width="400" height="300"></video>  
  12.   
  13.   <!-- 默认静音播放(可手动点开继续播放) -->  
  14.   <video src="test.mp4" controls muted width="400" height="300"></video>  
  15.   
  16.   <!-- 循环播放 -->  
  17.   <video src="test.mp4" controls loop width="400" height="300"></video>  
  18.   
  19.   <!-- 预加载 -->  
  20.   <video src="test.mp4" controls preload width="400" height="300"></video>  
  21.   
  22.   <!-- 贴图 -->  
  23.   <video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video>  
  24.   
  25.   <!-- 音量控制 -->  
  26.   <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>  
  27.   <script>  
  28.     var video = document.getElementById('_volume')  
  29.     video.volume = 2 // 取值范围:0 到 1,0 是静音,0.5 是一半的音量,1 是最大音量(默认值)  
  30.   </script>  
  31.   
  32.   <!-- 播放时间控制 -->  
  33.   <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>  
  34.   <script>  
  35.     var video = document.getElementById('_time')  
  36.     console.log(video.currentTime)  // 视频当前正在播放的时间(单位:s),进度条拖到哪就显示当前的时间  
  37.     video.currentTime = 60  // 默认从60秒处开始播放  
  38.   </script>  
  39.   
  40.   <!-- 播放地址切换 (常见于切换超清  高清 流畅,不同画质的视频地址不同) -->  
  41.   <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>  
  42.   <script>  
  43.     var video = document.getElementById('_src')  
  44.     console.log(video.src)     // http://127.0.0.1:8001/test.mp4   绝对地址,DOM 中是相对地址  
  45.     // video.src = 'test-2.mp4'   // 直接替换掉了原来的视频src  
  46.     setTimeout(() => {  
  47.       video.src = 'test-2.mp4'  // 播放到第 30s 的时候,自动切换视频  
  48.     }, 30000)  
  49.   </script>  
  50.   
  51.   <!-- 备用地址切换 -->  
  52.   <video controls autoplay width="400" height="300" id="_source">  
  53.     <source src="test3.mp4" type="video/mp4" />  
  54.     <source src="test9.mp4" type="video/mp4" />  
  55.     <source src="test-2.mp4" type="video/mp4" />  
  56.   </video>  
  57.   <script>  
  58.     var video = document.getElementById('_source')  
  59.     setTimeout(() => {  
  60.       console.log(video.currentSrc)     // http://127.0.0.1:8001/test.mp4  
  61.     }, 1000)  
  62.   
  63.     // HTTP 载入失败,状态码 404。媒体资源 http://127.0.0.1:8001/test3.mp4 载入失败。  
  64.     // HTTP 载入失败,状态码 404。媒体资源 http://127.0.0.1:8001/test9.mp4 载入失败。  
  65.     // http://127.0.0.1:8001/test-2.mp4  
  66.     // 当第一段视频加载失败时,自动加载下一段视频  

2、video 事件

XML/HTML代码
  1. <video src="test.mp4" controls width="400" height="300" id="video"></video>  
  2.     
  3.   <script>  
  4.     var video = document.getElementById('video')  
  5.   
  6.     // 1、loadstart:视频查找。当浏览器开始寻找指定的音频/视频时触发,也就是当加载过程开始时  
  7.     video.addEventListener('loadstart', function(e) {  
  8.       console.log('提示视频的元数据已加载')  
  9.       console.log(e)  
  10.       console.log(video.duration)            // NaN  
  11.     })  
  12.   
  13.     // 2、durationchange:时长变化。当指定的音频/视频的时长数据发生变化时触发,加载后,时长由 NaN 变为音频/视频的实际时长  
  14.     video.addEventListener('durationchange', function(e) {  
  15.       console.log('提示视频的时长已改变')  
  16.       console.log(e)  
  17.       console.log(video.duration)           // 528.981333   视频的实际时长(单位:秒)  
  18.     })  
  19.   
  20.     // 3、loadedmetadata :元数据加载。当指定的音频/视频的元数据已加载时触发,元数据包括:时长、尺寸(仅视频)以及文本轨道  
  21.     video.addEventListener('loadedmetadata', function(e) {  
  22.       console.log('提示视频的元数据已加载')  
  23.       console.log(e)  
  24.     })  
  25.   
  26.     // 4、loadeddata:视频下载监听。当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时触发  
  27.     video.addEventListener('loadeddata', function(e) {  
  28.       console.log('提示当前帧的数据是可用的')  
  29.       console.log(e)  
  30.     })  
  31.   
  32.     // 5、progress:浏览器下载监听。当浏览器正在下载指定的音频/视频时触发  
  33.     video.addEventListener('progress', function(e) {  
  34.       console.log('提示视频正在下载中')  
  35.       console.log(e)  
  36.     })  
  37.   
  38.     // 6、canplay:可播放监听。当浏览器能够开始播放指定的音频/视频时触发  
  39.     video.addEventListener('canplay', function(e) {  
  40.       console.log('提示该视频已准备好开始播放')  
  41.       console.log(e)  
  42.     })  
  43.   
  44.     // 7、canplaythrough:可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发  
  45.     video.addEventListener('canplaythrough', function(e) {  
  46.       console.log('提示视频能够不停顿地一直播放')  
  47.       console.log(e)  
  48.     })  
  49.   
  50.     // 8、play:播放监听  
  51.     video.addEventListener('play', function(e) {  
  52.       console.log('提示该视频正在播放中')  
  53.       console.log(e)  
  54.     })  
  55.   
  56.     // 9、pause:暂停监听  
  57.     video.addEventListener('pause', function(e) {  
  58.       console.log('暂停播放')  
  59.       console.log(e)  
  60.     })  
  61.   
  62.     // 10、seeking:查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发  
  63.     video.addEventListener('seeking', function(e) {  
  64.       console.log('开始移动进度条')  
  65.       console.log(e)  
  66.     })  
  67.   
  68.     // 11、seeked:查找结束。当用户已经移动/跳跃到视频中新的位置时触发  
  69.     video.addEventListener('seeked', function(e) {  
  70.       console.log('进度条已经移动到了新的位置')  
  71.       console.log(e)  
  72.     })  
  73.   
  74.     // 12、waiting:视频加载等待。当视频由于需要缓冲下一帧而停止,等待时触发  
  75.     video.addEventListener('waiting', function(e) {  
  76.       console.log('视频加载等待')  
  77.       console.log(e)  
  78.     })  
  79.   
  80.     // 13、playing:当视频在已因缓冲而暂停或停止后已就绪时触发  
  81.     video.addEventListener('playing', function(e) {  
  82.       console.log('playing')  
  83.       console.log(e)  
  84.     })  
  85.   
  86.     // 14、timeupdate:目前的播放位置已更改时,播放时间更新  
  87.     video.addEventListener('timeupdate', function(e) {  
  88.       console.log('timeupdate')  
  89.       console.log(e)  
  90.     })  
  91.   
  92.     // 15、ended:播放结束  
  93.     video.addEventListener('ended', function(e) {  
  94.       console.log('视频播放完了')  
  95.       console.log(e)  
  96.     })  
  97.   
  98.     // 16、error:播放错误  
  99.     video.addEventListener('error', function(e) {  
  100.       console.log('视频出错了')  
  101.       console.log(e)  
  102.     })  
  103.   
  104.     // 17、volumechange:当音量更改时  
  105.     video.addEventListener('volumechange', function(e) {  
  106.       console.log('volumechange')  
  107.       console.log(e)  
  108.     })  
  109.   
  110.     // 18、stalled:当浏览器尝试获取媒体数据,但数据不可用时  
  111.     video.addEventListener('stalled', function(e) {  
  112.       console.log('stalled')  
  113.       console.log(e)  
  114.     })  
  115.   
  116.     // 19、ratechange:当视频的播放速度已更改时  
  117.     video.addEventListener('ratechange', function(e) {  
  118.       console.log('ratechange')  
  119.       console.log(e)  
  120.     })  
  121.   </script>  

Tags: html5

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 119

jQuery日历插件FullCalendar使用方法

 html代码片段

XML/HTML代码
  1. <head>  
  2. <meta charset='utf-8' />  
  3. <link href='../fullcalendar.css' rel='stylesheet' />  
  4. <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />  
  5. <script src='../lib/moment.min.js'></script>  
  6. <script src='../lib/jquery.min.js'></script>  
  7. <script src='../fullcalendar.min.js'></script>  
  8. </head>  
  9. <div id="calendar"></div>

js代码片段

JavaScript代码
  1. function initdata(){  
  2.     var calendar = $('#calendar').fullCalendar({  
  3.          /**   
  4.              *  默认显示的视图   
  5.              *  month       一页显示一月, 日历样式   
  6.                 basicWeek   一页显示一周, 无特殊样式   
  7.                 basicDay    一页显示一天, 无特殊样式   
  8.                 agendaWeek  一页显示一周, 显示详细的24小时表格   
  9.                 agendaDay   一页显示一天, 显示详细的24小时表格   
  10.                 listYear    年列表(V3.*支持)   
  11.                 listMonth   月列表(V3.*支持)   
  12.                 listWeek    周列表(V3.*支持)   
  13.                 listDay     日列表(V3.*支持)   
  14.              */    
  15.             defaultView:"agendaWeek",   //进入组件默认渲染的视图,默认为month    
  16.             customButtons: {//自定义header属性中按钮[customButtons与header并用]    
  17.                 myCustomButton: {    
  18.                 text: 'custom!',    
  19.                     click: function() {    
  20.   
  21.                     }    
  22.                 }    
  23.             },    
  24.             header: {    
  25.                 left: 'prev,next today',            //上一页、下一页、今天    
  26.                 center: 'title myCustomButton',     //居中:时间范围区间标题    
  27.                 right: 'month,agendaWeek,agendaDay,listWeek'//右边:显示哪些视图    
  28.             },    
  29.             height : 600,//组件高度,默认aspectRatio即纵横比;parent父容器大小;auto自动不带滚动条;  
  30.             contentHeight : 200,//组件中的内容高度,默认aspectRatio即纵横比;auto自动不带滚动条;支持数字和函数返回像素;  
  31. //          aspectRatio : 2,        //宽度:高度 比例,默认1.35,可自定义    
  32.             handleWindowResize : false//组件随浏览器高宽变化自适应,默认true支持自适应    
  33. //          windowResizeDelay : 200,//窗体自适应延迟多少毫秒    
  34.             firstDay : 1, //视图从每周几开始,默认0为周日,1为周1,  
  35.             isRTL : false,//从右到左显示模式,默认false    
  36. //          weekends : false,//是否在视图中显示周六、周日,默认true    
  37. //          hiddenDays: [ 1,5 ],//隐藏星期1、星期5    
  38.             fixedWeekCount : false//月视图下,显示6周(不够的显示下个月的)true;默认true    
  39.             weekNumbers : true//是否在视图左边显示这是第多少周,默认false    
  40. //          businessHours : {}//设置哪些时间段重点标记颜色    
  41.             eventLimit: true,//数据条数太多时,限制各自里显示的数据条数(多余的以“+2more”格式显示),默认false不限制,支持输入数字设定固定的显示条数    
  42. //          eventLimitClick : "day",//接eventLimit属性,多余的内容点击事件,默认有一套弹窗格式,支持跳转到不同视图、也支持自定义function,详情见官方文档    
  43.             viewRender : function(view,element){//在视图被渲染时触发(切换视图也触发) 参数view为视图对象,参数element为Jquery的视图Dom     
  44.             },    
  45. //          viewDestroy : function(view, element){}, //类似viewRender,在视图被销毁时触发    
  46.             windowResize : function(){//浏览器窗体变化时触发    
  47.             },    
  48. //          allDaySlot : false,   //视图在周视图、日视图顶部显示“全天”信息,默认true显示全天    
  49.             allDayText : "全天"//自定义全天视图的名称    
  50.             slotDuration : "01:00:00"//一格时间槽代表多长时间,默认00:30:00(30分钟)    
  51.             slotLabelFormat : "H(:mm)a",//日期视图左边那一列显示的每一格日期时间格式    
  52.             slotLabelInterval : "02:00:00"//日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的,可自定义)    
  53.             snapDuration : "05:00:00",//其实就是动态创建一个日程时,默认创建多长的时间块    
  54. //          scrollTime : "06:00:00",//多远开始往下滚动,默认6小时  
  55. //          minTime : "02:00:00",//周/日视图左边时间线显示的最小日期,默认00:00:00    
  56. //          maxTime : "08:00:00",//周/日视图左边时间线显示的最大日期,默认24:00:00    
  57.             slotEventOverlap : false,//相同时间段的多个日程视觉上是否允许重叠,默认true允许    
  58. //          listDayFormat : false,//listview视图下,每天的分割区,[左边]的标题自定义,false表示无标题    
  59. //          listDayAltFormat : false,//listview视图下,每天的分割区,[右边]的标题自定义,false表示无标题    
  60.             noEventsMessage : "L没数据啊"//listview视图下,无数据时显示提示    
  61.             defaultDate  : '2016-10-13',//默认显示那一天的日期视图    
  62.             nowIndicator : true//周/日视图中显示今天当前时间点(以红线标记),默认false不显示    
  63. //          locale :  "zh-cn", //国际化,前提引用fileinput_locale_zh.js  
  64. //          timeFormat :  "h:mm", //全局的日期显示格式(自定义成如12:00或12am等)    
  65. //          columnFormat : "", //顶部日期显示格式  
  66. //          titleFormat : "",//顶部title区域格式化    
  67.             buttonText : {today:'今天',month:'月',week:'周',day:'日',listWeek:'列表'},  //对应顶部操作按钮的名称自定义    
  68.             monthNames : ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"], //月份自定义命名    
  69.             monthNamesShort: ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"], //月份缩略命名(英语比较实用:全称January可设置缩略为Jan)    
  70.             dayNames: ["周日""周一""周二""周三""周四""周五""周六"],         
  71.             dayNamesShort: ["周日""周一""周二""周三""周四", 周五, "六"],    
  72.             weekNumberTitle : "周",//周的国际化,默认为"W"    
  73. //          displayEventTime : false,//每一个日程块中是否显示时间,默认true显示    
  74. //          displayEventEnd : true,//是否显示日程块中的“结束时间”,默认true,如果false则只显示开始时间    
  75.             eventLimitText  : "更多"//当一块区域内容太多以"+2 more"格式显示时,这个more的名称自定义(应该与eventLimit: true一并用)    
  76.             dayPopoverFormat : "YYYY年M月D日"//点开"+2 more"弹出的小窗口标题,与eventLimitClick可以结合用    
  77.             navLinks : true,// “xx周”是否可以被点击,默认false,如果为true则周视图“周几”被点击之后进入日视图。本地测试:没什么效果    
  78. //          navLinkDayClick: function(date, jsEvent) { //依赖navLinks : true , 点击顶部“日”时触发    
  79. //              return true;    
  80. //          },    
  81. //          navLinkWeekClick: function(weekStart, jsEvent) { //依赖navLinks : true , 点击顶部“周”时触发     
  82.            },    
  83.             dayClick: function(date, jsEvent, view) {//空白的日期区,单击时触发     
  84.             },    
  85.             eventClick: function(calEvent, jsEvent, view) {//日程区块,单击时触  
  86.                 return false;  //return false可以阻止点击后续事件发生(比如event中的url跳转事件)    
  87.             },    
  88.             eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发    
  89.                 $(this).css('background-color''gray');    
  90.             },    
  91.             eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发    
  92.                 $(this).css('background-color''yellow');    
  93.             },    
  94.             selectable: true,//允许用户可以长按鼠标选择多个区域(比如月视图,可以选中多天;日视图可以选中多个小时),默认false不能选择多区域的    
  95.             selectHelper: true,//接selectable,周/日视图在选择时是否预先画出“日程区块”的样式出来    
  96.             unselectAuto : true,//是否点击页面上的其他地方会导致当前的选择被清除,默认true    
  97.             unselectCancel : "",//一种方法来指定元素,会忽略unselectauto选项,默认''    
  98.             selectOverlap : true,//确定用户是否被允许选择被事件占用的时间段,默认true可占用时间段    
  99. //          selectConstraint : ,//限制用户选择指定时间段的日程数据:an event ID, "businessHours", object    
  100.             selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方,返回true则表示可选择,false表示不可选择     
  101.                 return true;    
  102.             },    
  103.             select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发    
  104.             },    
  105.             unselect : function(view, jsEvent){//选择操作取消时触发    
  106.             },    
  107. /**Event Object配置start */    
  108. //          allDayDefault : null,//是否默认将日程全部显示在“全天”里面(boolean or null),默认为undefined,即根据event时间值智能判断,这个属性太强悍,不敢用    
  109. //          startParam:"start",//Event Object中定义[开始时间]的变量,默认是start,可自定义变量名以防冲突    
  110. //          endParam:"end", //Event Object中定义[结束时间]的变量,默认是end,可自定义变量名以防冲突    
  111. //          timezoneParam : "timezone", //Event Object中定义[时区]的变量,默认是本地时区,可自定义变量名以防冲突,可更改时区如( "America/Chicago" or "UTC")    
  112.             lazyFetching : true,        //是否启用懒加载技术--即只取当前条件下的视图数据,其它数据在切换时触发,默认true只取当前视图的,false是取全视图的    
  113.             defaultTimedEventDuration : "02:00:00",     //在Event Object中如果没有end参数时使用,如start=7:00pm,则该日程对象时间范围就是7:00~9:00    
  114.             defaultAllDayEventDuration : { days: 1 },  //默认1天是多长,(有的是采用工作时间模式,所以支持自定义)    
  115. //          forceEventDuration : false,     //诉老夫无能为力,愣是没搞懂什么意思,默认false    
  116. //          eventDataTransform : function(eventData){return [events...]}, //当从第三方取数不规则时(如下面的JSON或google),可通过此钩子函数进行数据整理,转换为fullcalendar识别的event object    
  117.             loading : function(isLoading, view){ //视图数据加载中、加载完成触发    
  118.                 if(isLoading == true){    
  119.                     console.log("view:"+view+",开始加载");    
  120.                 }else if(isLoading == false){    
  121.                     console.log("view:"+view+",加载完成");    
  122.                 }else{    
  123.                     console.log("view:"+view+",除非天塌下来否则不会进这个分支");    
  124.                 }    
  125.             },    
  126. //          nextDayThreshold : "09:00:00",  //当一个事件的结束时间跨越到另一天,最短的时间,它必须为它的渲染,如果它在这一天。    
  127.             eventOrder : "title"//多个相同的日程数据排序方式,String / Array / Function, 默认值: "title"    
  128.             eventRender : function(event, element, view) {//当Event对象开始渲染时触发    
  129.             },    
  130. //          eventAfterRender : function( event, element, view ) { } //当Event对象结束渲染时触发    
  131.             eventAfterAllRender : function(view){  
  132.             },   //当所有Event对象渲染完成时触发    
  133. //          eventDestroy : function( event, element, view ) { }//一个Event DOM销毁时触发    
  134. /**Event Object配置end */    
  135. /**Event Rendering配置(一些样式等配置) start*/    
  136. //          eventColor: '#378006',      //不解释,所有的日程区块生效,如要对指定数据源生成参见EventSource,如要对指定Event生效,参见EventObject    
  137. //          eventBackgroundColor:"",    //同上,不解释    
  138. //          eventBorderColor:"",        //同上,不解释    
  139. //          eventTextColor:""           //同上,不解释    
  140. /**Event Rendering配置 end*/    
  141.             editable: true,//支持Event日程拖动修改,默认false    
  142.             eventStartEditable : true//Event日程开始时间可以改变,默认true,如果是false其实就是指日程块不能随意拖动,只能上下拉伸改变他的endTime    
  143.             eventDurationEditable : false,  //Event日程的开始结束时间距离是否可以改变,默认true,如果是false则表示开始结束时间范围不能拉伸,只能拖拽    
  144. //          dragRevertDuration : 500, //拖拽取消恢复花费时间,单位毫秒,这个就用默认的差不多了    
  145.             dragOpacity:0.2,//拖拽时不透明度,0.0~1.0之间,数字越小越透明    
  146.             dragScroll : true,//是否在拖拽时自动移动容器,默认true    
  147.             eventOverlap : true//拖拽时是否重叠    
  148.             eventConstraint : {//限制拖拽拖放的位置(即限制有些地方拖不进去):an event ID, "businessHours", object    
  149.                 start: '10:00'// a start time (10am in this example)    
  150.                 end: '18:00'// an end time (6pm in this example)    
  151.                 dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday)  (Monday-Thursday in this example)    
  152.             },    
  153.             longPressDelay : 1000,  //面向可touch设备(如移动设备),长按多少毫秒即可拖动,默认1000毫秒(1S)    
  154.             eventDragStart : function(event, jsEvent, ui, view){//日程开始拖拽时触发    
  155.             },    
  156.             eventDragStop : function(event, jsEvent, ui, view){//日程拖拽停止  
  157.             },    
  158.             eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){  //日程拖拽停止并且已经拖拽到其它位置了    
  159.             },    
  160.             eventResizeStart : function( event, jsEvent, ui, view ) {       //日程大小调整开始时触发    
  161.             },    
  162.             eventResizeStop : function(event, jsEvent, ui, view){           //日程大小调整停止时触发    
  163.             },    
  164.             eventResize : function(event, delta, revertFunc, jsEvent, ui, view){    //日程大小调整完成并已经执行更新时触发    
  165.             },    
  166. /*          访问后台URL,动态返回JSON数据的形式,这种是直接集成了jQuery.ajax,其实并不灵活   
  167.             events:  {     
  168.                 url: '/myfeed.php',   
  169.                 type: 'POST',   
  170.                 data: {   
  171.                     custom_param1: 'something',   
  172.                     custom_param2: 'somethingelse'   
  173.                 },   
  174.                 error: function() {   
  175.                     alert('there was an error while fetching events!');   
  176.                 },   
  177.                 color: 'yellow',   // a non-ajax option   
  178.                 textColor: 'black' // a non-ajax option   
  179.             },   
  180. */    
  181. /*          第二种:基于function的数据获取,通常是在切换上一页、下一页、视图切换时触发,非常适合动态数据获取   
  182.             events: function(start, end, timezone, callback) {   
  183.             $.ajax({   
  184.                 url: 'myxmlfeed.php',   
  185.                 dataType: 'xml',   
  186.                 data: {   
  187.                     // our hypothetical feed requires UNIX timestamps   
  188.                     start: start.unix(),   
  189.                     end: end.unix()   
  190.                 },   
  191.                 success: function(doc) {   
  192.                     var events = [];   
  193.                     $(doc).find('event').each(function() {   
  194.                         events.push({   
  195.                             title: $(this).attr('title'),   
  196.                             start: $(this).attr('start') // will be parsed   
  197.                         });   
  198.                     });   
  199.                     callback(events);   
  200.                 }   
  201.             });   
  202.             },   
  203. */    
  204.             events: [//第三种:直接是数组的形式传入    
  205.                 {    
  206.                     title: 'All Day Event',    
  207.                     start: '2016-10-13'    
  208.                 },    
  209.                 {    
  210.                     title: 'Long Event',    
  211.                     start: '2016-10-07',    
  212.                     end: '2016-10-10'    
  213.                 },    
  214.                 {    
  215.                     id: 991,    
  216.                     title: 'Repeating Event',    
  217.                     start: '2016-10-09T16:00:00'    
  218.                 },    
  219.                 {    
  220.                     id: 999,    
  221.                     title: 'Repeating Event',    
  222.                     start: '2016-10-16T16:00:00'    
  223.                 },    
  224.                 {    
  225.                     title: 'Conference',    
  226.                     start: '2016-10-11',    
  227.                     end: '2016-10-13'    
  228.                 },    
  229.                 {    
  230.                     title: 'Meeting',    
  231.                     start: '2016-10-12T10:30:00',    
  232.                     end: '2016-10-12T12:30:00'    
  233.                 },    
  234.                 {    
  235.                     title: 'Lunch',    
  236.                     start: '2016-10-12T12:00:00'    
  237.                 },    
  238.                 {    
  239.                     title: 'Meeting',    
  240.                     start: '2016-10-12T14:30:00'    
  241.                 },    
  242.                 {    
  243.                     title: 'Happy Hour',    
  244.                     start: '2016-10-12T17:30:00'    
  245.                 },    
  246.                 {    
  247.                     title: 'Dinner',    
  248.                     start: '2016-10-12T20:00:00'    
  249.                 },    
  250.                 {    
  251.                     title: 'Birthday Party',    
  252.                     start: '2016-10-13T07:00:00'    
  253.                 },    
  254.                 {    
  255.                     title: 'Click for Google',    
  256.                     url: 'http://google.com/',    
  257.                     start: '2016-10-28'    
  258.                 }    
  259.             ]    
  260.   
  261. /*          多数据源支持:场景可能是从多种模块取数据,比如从会议取会议日程、从计划取计划日程,而且要求会议、计划日程颜色显示不一样,那么就可以用这种   
  262.             eventSources: [   
  263.                 {   
  264.                     events: function(start, end, timezone, callback){...},   
  265.                     color: 'black',     // an option!   
  266.                     textColor: 'yellow' // an option!   
  267.                 },   
  268.                 {   
  269.                     googleCalendarId: 'abcd1234@group.calendar.google.com',   
  270.                     color: 'yellow',   // an option!   
  271.                     textColor: 'black' // an option!   
  272.                 }   
  273.             ]   
  274. */    
  275.   
  276.   
  277.         });    
  278.   
  279. //      日期格式需要遵守fullCalendar引用的moment.js规则:https://fullcalendar.io/docs/utilities/Moment/    
  280.   
  281. //      Event Object 就是一个日程区块,数据元,通常以数组的形式传入option->events中 见 https://fullcalendar.io/docs/event_data/Event_Object/    
  282. //      Event Source Object 不好理解,大概就是一组日程数据源对象吧,可以是一个events、也可以是JSON、还可以是Google Calendar的数据 见 https://fullcalendar.io/docs/event_data/Event_Source_Object/    
  283.   
  284. /* updateEvent更新一个日程对象   
  285. $('#calendar').fullCalendar({   
  286.     eventClick: function(event, element) {   
  287.         event.title = "CLICKED!";   
  288.         //更新日程对象信息   
  289.         $('#calendar').fullCalendar('updateEvent', event);   
  290.     }   
  291. });   
  292. */    
  293.   
  294. //      .fullCalendar( 'clientEvents' [, idOrFilter ] ) ->   Array  从内存中筛选指定的event,[, idOrFilter ]==>省略号删除全部、ID数组删除有ID的日程、也可传入Event对象,建议使用时详细查看官方文档    
  295. //      .fullCalendar( 'removeEvents' [, idOrFilter ] )     删除日程,[, idOrFilter ]参见clientEvents,建议使用时详细查看官方文档    
  296. //      .fullCalendar( 'refetchEvents' )                    刷新所有数据源的日历视图,建议使用时详细查看官方文档    
  297. //      .fullCalendar( 'refetchEventSources', sources )     刷新指定数据源的日历视图(与eventSource有关配合用),建议使用时详细查看官方文档    
  298. //      .fullCalendar( 'addEventSource', source )           动态添加一个数据源(与eventSource有关配合用),建议使用时详细查看官方文档    
  299. //      .fullCalendar( 'removeEventSource', source )        动态删除一组数据源(与eventSource有关配合用),建议使用时详细查看官方文档    
  300. //      .fullCalendar( 'removeEventSources', optionalSourcesArray ) 动态删除多个数据源,如果optionalSourcesArray未指定则删除全部,建议使用时详细查看官方文档    
  301. //      .fullCalendar( 'getEventSources' )                  返回所有的数据源    
  302. //      .fullCalendar( 'getEventSourceById', id )           根据ID获取数据源    
  303.   
  304. //      $('#calendar').fullCalendar('render');  渲染日历视图    
  305. //      $('#calendar').fullCalendar('destory'); 销毁日历视图    
  306.   
  307. //      var view = $('#calendar').fullCalendar('getView'); //获取当前视图对象    
  308. //      console.log("name:"+view.name+"|title:"+view.title+"|start:"+view.start+"|end:"+view.end+"|intervalStart:"+view.intervalStart+"|intervalEnd:"+view.intervalEnd);    
  309. //      $('#calendar').fullCalendar('changeView', "month" ); //切换为其它视图    
  310. //      $('#calendar').fullCalendar('prev'); //切换到当前视图的上一页(类似于顶部的“<”箭头)    
  311. //      $('#calendar').fullCalendar('next'); //切换到当前视图的下一页(类似于顶部的“>”箭头)    
  312. //      $('#calendar').fullCalendar('prevYear') //切换到上一年    
  313. //      $('#calendar').fullCalendar('nextYear') //切换到下一年    
  314. //      $('#calendar').fullCalendar('today');   //日期视图跳转到“今天”    
  315. //      $('#calendar').fullCalendar( 'gotoDate', date );  //日期视图跳转到指定时间    
  316. //      $('#calendar').fullCalendar( 'incrementDate', duration ); //日期视图向前或向后移动固定的时间,duration可以为={ days:1, hours:23, minutes:59 }    
  317.   
  318. //      var moment = $('#calendar').fullCalendar('getDate');      //获取当前视图的日期对象,(如果月视图则返回月初到月末,周视图返回周初到周末)    
  319. //      console.log("The current date of the calendar is " + moment.format());    
  320. //      $('#calendar').fullCalendar( 'select', start, [ end ], [ resource ] ); //js动态选择某个时间段的日程    
  321. //      .fullCalendar( 'unselect' );  //js动态取消选择的日程    
  322.   
  323. //      var locale = $('#calendar').fullCalendar('option', 'locale');        //option支持get,注:不仅限于locale,还包括其它option操作    
  324. //      $('#calendar').fullCalendar('option', {locale: 'fr',isRTL: true});   //option支持set,注:不仅限于locale,还包括其它option操作    
  325.   
  326. //      var calendar = $('#calendar').fullCalendar('getCalendar'); //支持动态绑定/解绑fullcalendar中的事件    
  327. //      calendar.on('dayClick', function(date, jsEvent, view) {console.log('clicked on ' + date.format());});    
  328.   
  329. //      .fullCalendar( 'renderEvent', event [, stick ] );   //渲染一个新的Event,建Demo select方法    
  330. //      .fullCalendar( 'rerenderEvents' )                   //渲染那所有的Event    
  331.   
  332.     });  
  333. }  

 

Tags: jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 99

 广告位

↑返回顶部↑