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中提供了依赖注入的概念,使得 ...
随机推荐
- QT中文乱码与国际化支持
QT国际化支持 Qt内部采用的全Unicode编码,这从根本上保证了多国语界面实现的正确性和便捷性.Qt本身提供的linguist工具,用来实现翻译过程十分方便.MFC中利用资源DLL切换资源,或 ...
- 非常好的课程,尤其是有NLP方向的内容,好好学习
课程地址如下: https://mooc.study.163.com/smartSpec/detail/1001319001.htm 有一个非常好的笔记: https://github.com/fen ...
- iOS蓝牙空中升级(固件升级)
空中升级又叫固件升级,指你手机从服务器下载下来的包或者数据,通过蓝牙传输给你的外设升级固件.如果你能把蓝牙的基础搞懂,其实也并不是很难,我在这里只不过提供一下思路. 空中升级略难的地方在于数据处理和交 ...
- iOS开发-自定义UIAlterView(iOS 7)
App中不可能少了弹框,弹框是交互的必要形式,使用起来也非常简单,不过最近需要自定义一个弹框,虽然iOS本身的弹框已经能满足大部分的需求,但是不可避免还是需要做一些自定义的工作.iOS7之前是可以自定 ...
- seleium 鼠标悬停事件
seleium 教程:https://www.yiibai.com/selenium seleium官网:https://www.seleniumhq.org/docs/ 1.鼠标悬停 例如,下图 鼠 ...
- Axure-如何设置圆形组件
--打开Axure软件,在[选择部件库]窗口中找到如图中所示的矩形. --将矩形拖到设计布局中 --将鼠标悬停在矩形上就能看到右上角有一个小圆点 --点击小圆点就能选择不同的形状,如:圆形
- 转:在centos安装与启动mysql
一. 下载与安装过程相录详细 相当详细推荐.digitalocean.com 这个网站的东西,很详细,很专业. https://www.digitalocean.com/community/tutor ...
- 轻松解决vuejs跨域
Vuejs跨域问题实战 有时候,本地使用webpack开启一个node的dev端口,项目中使用vuejs去访问别人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就会报跨域的问题. 如何让我 ...
- wget获取整站
wget -m -e robots=off https://www.baidu.com -m是克隆整个网站,-e robots=off是让wget忽视robots.txt 如果网站有中文路径,最好用以 ...
- 优雅地乱玩Linux-6-Chrome端SSH插件
文章最初发表于szhshp的第三边境研究所转载请注明 优雅地乱玩Linux-6-Chrome端SSH插件 最近注册了个AWS,免费一年,一年内可以各种乱玩~ 从自己的电脑连接云主机一般需要SSH这样的 ...