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中提供了依赖注入的概念,使得 ...
随机推荐
- Sharepoint2013 列表的NewForm 页面添加一个 保存新建 按钮
昨天一同事问我如何在sharepoint2013的NewForm.aspx页面上添加一个 save and new的button.实现save 和new的功能,save的功能和默认的save按钮效果一 ...
- Windbg命令学习15(bp bm bu bl bc ba断点）
以下以skinhgy为例,windbg附加运行 1. bp 命令是在某个地址下断点, 可以 bp 0x7783FEB 也可以 bp MyApp!SomeFunction . 对于后者,WinDBG 会 ...
- iOS 开发-Certificate、App ID和Provisioning Profile之间的关系
模拟器调试的时候有的时候不能检验出程序在真实手机上的差别,如果需要进行真机测试或者发布应用到App Store上去的时候, 公司如果没有开发过App,你可以从头开始弄,大部分都是后来接手的,那么当我们 ...
- protobuf Protocol Buffers 简介 案例 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- SQL Server 2005 Integration Services (SSIS)数据源之MySQL
一安装MySQL数据库的ODBC驱动 下载MySQL Connector ODBC 3.51.rar 单击setup按默认安装即可! 如下图所示,在ODBC数据源管理器中看到“MySQL ODBC 3 ...
- java判断一个字符串是否包含某个字符
一.contains方法 1:描述 java.lang.String.contains() 方法返回true,当且仅当此字符串包含指定的char值序列 2:声明 public boolean cont ...
- Linux动态链接库的使用
1.前言 在实际开发过程中,各个模块之间会涉及到一些通用的功能,比如读写文件,查找.排序.为了减少代码的冗余,提高代码的质量,可以将这些通用的部分提取出来,做出公共的模块库.通过动态链接库可以实现多个 ...
- PHP构造函数的重载
由于PHP是弱类型语言,因此函数的输入参数类型无法确定(可以使用类型暗示,但是类型暗示无法用在诸如整型,字符串之类的标量类型上),并且对于一个函数,比如只定义了3个输入参数,PHP却运行调用的时候输入 ...
- jquery效果 窗口弹出案例
效果 ①基本效果:show().hide().toggle() ②滑动 slideDown().slideUp().slideToggle() 划上:$("p").slideUp( ...
- jQuery 发送验证码倒计时按钮 复制代码
<!DOCTYPE html> <html> <head> <title></title> <script src="../ ...