fullcalendar 使用教程
$('#calendar')
.fullCalendar(
{
header : {
left : 'today prev,next',
center : 'title',
right : 'month,basicWeek'
},
buttonText : {
month : '月视图',
week : '周',
day : '日视图'
},
defaultDate : date,
eventPhase : 5,
editable : false,// 可以拖动
selectable : true,
eventLimit : true,
.fullCalendar( 'removeEvents' [, idOrFilter ] )
// 注意：这里有两种实现方法，下面是一种，还有一种 是通过url，如events:'/data.json'
// events : [ {
// title : 'All Day Event',
// start : '2016-05-01'
// }, {
// title : 'Long Event',
// start : '2016-05-07',
// end : '2016-05-10'
// }, {
// id : 999,
// title : 'Repeating Event',
// start : '2016-05-09'
// }, {
// id : 999,
// title : 'Repeating Event',
// start : '2016-05-16'
// }, {
// title : 'Conference',
// start : '2016-05-11',
// end : '2016-05-13'
// }, {
// title : 'Meeting',
// start : '2016-05-12',
// end : '2016-05-12'
// }, {
// title : 'Lunch',
// start : '2016-05-12'
// }, {
// title : 'Meeting',
// start : '2016-05-12'
// }, {
// title : 'Happy Hour',
// start : '2016-05-12'
// }, {
// title : 'Dinner',
// start : '2016-05-12'
// }, {
// title : 'Birthday Party',
// start : '2016-05-13'
// }, {
// title : 'Click for Google',
// url : 'http://google.com/',
// start : '2016-05-28'
// } ],
dayClick : function(date, allDay, jsEvent, view) {
var selDate = date.format();// 获取当前点击日期
$("#datetimepicker").val(selDate);
$("#taskModal").modal();
},
eventClick : function(calEvent, jsEvent, view) {
var today = calEvent.start.format();
switch (calEvent.data.type) {
case 'video':
$(".view-audio").hide();
$(".view-picture").hide();
$(".view-video").show();
myPlayer.play();
$("#viewModal").modal();
break;
case 'audio':
$(".view-video").hide()
$(".view-picture").hide();
$(".view-audio").show();
music.play();
$("#viewModal").modal();
break;
case 'picture':
$(".view-video").hide()
$(".view-audio").hide();
$(".view-picture").show();
$('.carousel-inner').empty();
var html = "";
var count = 0;
for (var i = 0; i < calEvent.source.events.length; i++) {
var type = calEvent.source.events[i].data.type;
var currentDay = calEvent.source.events[i].start.format();
if (type == 'picture' && today == currentDay) {
if (count == 0) {
html += '<div class="item active"><img src="'
+ calEvent.source.events[i].data.img_url
+ '"></div>';
} else {
html += '<div class="item"><img src="'
+ calEvent.source.events[i].data.img_url
+ '"></div>';
}
count++;
}
}
if (count == 1) {
$('.carousel-control').hide()
} else {
$('.carousel-control').show()
}
$('.carousel-inner').append(html)
$("#viewModal").modal();
$('#myCarousel').carousel({
pause : true,
interval : false
});
break;
case 'course':
$(this).attr('target', '_blank')
break;
case 'other':
break;
}
}
});
$(".body-left .file-list").each(
function(index) {
var fileName = $(this).find('.fileName').text();
var dataType = $(this).find('.fileName').attr('data-type');
if (!dataType)
return;
var eventData = {
title : fileName,
start : datetimepicker,
backgroundColor : 'transparent',
textColor : '#03A9F4',
borderColor : '#fff',
seq: Math.round(Math.random() * 9 + 1)
}
switch (dataType) {
case 'video':
eventData.className = 'icon-video-sm';
eventData.data = {
type : 'video'
};
break;
case 'audio':
eventData.className = 'icon-audio-sm';// 这里可以设置此action的样式,
eventData.data = {
type : 'audio'
};
break;
case 'picture':
eventData.className = 'icon-picture-sm';// 这里可以设置此action的样式,
eventData.data = {
type : 'picture',
img_url : '/resources/img/myCalendar/'
+ Math.round(Math.random() * 5 + 1) + '.png'
};
break;
case 'course':
eventData.className = 'icon-course-sm';// 这里可以设置此action的样式,
eventData.data = {
type : 'course'
};
eventData.url = 'http://www.baidu.com';
break;
case 'other':
eventData.className = 'icon-other-sm';// 这里可以设置此action的样式,
eventData.data = {
type : 'other'
};
break;
}
$('#calendar').fullCalendar('renderEvent', eventData, true);
})
fullcalendar 使用教程的更多相关文章
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- github上最全的资源教程-前端涉及的所有知识体系【转】
github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...
- 终极教程【zhong】
just for a better future! 资源教程 aiim 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...
- FullCalendar v5.3.2版本制作一个航班日历Demo
今天一个新需求是制作一个航班日历来订舱.然后我就各种找,最后找到FullCalendar,过程非常煎熬,网上例子大部分没用,大部分没有完整版.官网教程又不是很详细.搞了几天才彻底搞好这个航班日历,有需 ...
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
随机推荐
- 生成学习算法(Generative Learning algorithms)
一.引言 前面我们谈论到的算法都是在给定\(x\)的情况下直接对\(p(y|x;\theta)\)进行建模.例如,逻辑回归利用\(h_\theta(x)=g(\theta^T x)\)对\(p(y|x ...
- 混沌分形之逻辑斯蒂（Logistic）映射系统
前几天,有个同事看到我生成的一幅逻辑斯蒂分岔图像后,问我:“这是咪咪吗?”我回答:“淫者见淫.”好吧,这里将生成几种分岔映射图形,包括逻辑斯蒂映射系统,正弦映射系统和曼德勃罗映射系统.实际上这几种图形 ...
- 一次问题追查----短字符串签名算法引发的bug
近期开发代码, 出现了一些诡异现象.追查原因是公司使用的签名函数出现的问题. 问题: 代码使用的签名库函数, 对于<=4字节的字符串, 签名就是本身. #include<stdio.h&g ...
- Mysql 高可用方案
1 mysql分布式数据库,如 mycat https://www.cnblogs.com/zzsdream/articles/6650690.html 2 读写分离,mysql主从复制+mysql ...
- SQL SERVER 的用户数，连接，连接池 license
SQL SERVER 理论上有32767个逻辑连接,SQL SERVER根据系统自行调配连接池. 首先 ,操作系统的用户数:即同时通过网络连接到这台电脑上面的用户限制,以5用户操作系统,搭建的文件服务 ...
- Redis学习手册(主从复制)(转)
一.Redis的Replication: 这里首先需要说明的是,在Redis中配置Master-Slave模式真是太简单了.相信在阅读完这篇Blog之后你也可以轻松做到.这里我们还是先列出一些理论性的 ...
- Java提高篇（转）
http://www.cnblogs.com/mfrank/category/1118474.html Day1 抽象类 Day2 接口 Day3 抽象类与接口的比较 Day4 Java中的回调 Da ...
- mysql的水平拆分和垂直拆分 （转）
http://www.cnblogs.com/sns007/p/5790838.html 1,水平分割: 例:QQ的登录表.假设QQ的用户有100亿,如果只有一张表,每个用户登录的时候数据库都要从这1 ...
- CreateFont函数为什么改变不了字体？该怎么解决
CreateFont函数为什么改变不了字体?CFont * f; f = new CFont; f-> CreateFont( ...
- [Functional Programming] Running though a serial number prediction functions for tagging, pairing the result into object
Let's we have some prediction functions, for each prediction function has a corresponding tag: const ...