| 1：Fullcalendar 日历控件的基本简介 |
Fullcalendar是一款十分强大的开源日历免费控件，提供了丰富的属性设置和方法调用。
官网地址：https://fullcalendar.io/
文档地址：https://fullcalendar.io/docs/
优点：1、设置时区
2、丰富的回调函数
3、支持拖拽 多选
4、支持触摸
5、列表视图
6、年、月、周。日的显示
7、前端展示可自定义
8、有完整的文档
| 2：基本使用方法 |
需要引用的外部支持文件---->>>
<link href="css/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="css/fancybox.css" rel="stylesheet" type="text/css" />
<link media='print' href="css/fullcalendar.print.min.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/fullcalendar.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
HTML代码--------------->>>>
<div id='calendar'></div>
Js进行初始化----------------->>>>>
<script>
$(document).ready(function () { $('#calendar').fullCalendar({
//自定义按钮
customButtons: {
myCustomButton: {
text:'自定义按钮!',
click:function(){
alert('我是自定义按钮');
}}},
//日历头部
header: {
//左边是 前一月/后一月/ 回到今天按钮 自定义按钮
left: 'prev,next today,myCustomButton',
//中间是当前的时间
center: 'title',
//切换日历显示月/周/日视图
right: 'month,agendaWeek,day'
},
//日历底部
footer: {
//左边是 前一月/周/日，后一月/周/日 以及 回到今天按钮
left: 'prev,next today',
//中间是 当前试图的时间
center: 'prevYear,title,nextYear',
//切换日历显示月/周/日视图
right: 'month,agendaWeek'
},
//自定义图标
buttonIcons:{
prev:'left-single-arrow',
next: 'right-single-arrow',
prevYear: 'left-double-arrow',
nextYear: 'right-double-arrow'
},
//设置时区
currentTimezone: 'Asia/Beijing',
//设置每星期的第一天是星期几，0 是星期日
firstDay:0,
//单击日期事
// dayClick:function(){
// alert('a day has been clicked!'
// )},
//设置日期的现实方向 左到右还是右到左 默认左到右
isRTL:false,
//设置是否现实周末 默认现实
weekends:true,
//隐藏某周的某一天
//hiddenDays:[1,2,3],
//设置每月显示的周数 默认true显示六周
fixedWeekCount:true,
//设置周数显示 默认不显示
weekNumbers:true,
//确定月视图周数和基本观点的造型
weekNumbersWithinDays:true,
//工作时间 默认关闭 true显示周末休息
//businessHours:true,
businessHours: {
// 时间段
dow: [1,2,3,4,5],
start:'10:00',
//开始时间 (10am in this example)
end:'18:00'},
//结束时间(6pm in this example)}
//月份外的表格不显示
showNonCurrentDates:false,
//高度设置
height:"700",
//纵横比
aspectRatio:1.6,
//是否自动调整日历大小
handleWindowResize:true,
//当事务大于约定的时候回收缩显示
eventLimit: true,
views: {
agenda: {
eventLimit: 3//最大容纳数量
}
},
//eventLimitClick回调函数
eventLimitClick:
function(cellInfo){
alert("eventLimitClick回调事件");
},
dayClick: function(date, allDay, jsEvent, view) {
var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期
alert(selDate);
$.fancybox({
//调用fancybox弹出层 });
},
//设置月份名称，中英文均可
monthNames: ["一月", "二月", "三月", "四月",
"五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月"
],
//设置月份的简称
monthNamesShort: ["一月", "二月", "三月",
"四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
dayNames: ["周日", "周一", "周二", "周三", //设置星期名称
"周四", "周五", "周六"
],
dayNamesShort: ["周日", "周一", "周二", //设置星期简称
"周三", "周四", "周五", "周六"
],
today: ["今天"], //today 按钮的显示名称
buttonText: { //设置按钮文本
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
theme:false, eventClick: function (event) {
alert(event.title + "按钮被点击了"); },
editable: true, //事项是否可编辑，改变大小、拖拽等 events: [
{
start: '2017-04-06',
end: '2017-04-08',
overlap: false,
rendering: 'background', //背景
color: '#ff9f89'
}, {
title: 'All Day Event',
start: '2017-04-01'
},
{
title: 'Long Event',
start: '2017-04-07',
end: '2017-04-10',
color:'green',
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-04-16T16:00:00'
},
{
title: 'Conference',
start: '2017-04-11',
end: '2017-04-13'
},
{
title: 'Meeting',
start: '2017-04-12T10:30:00',
end: '2017-04-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-04-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-04-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-04-12T17:30:00' },
{
title: 'Dinner',
start: '2017-04-12T20:00:00', },
{
title: 'Birthday Party',
start: '2017-04-13T07:00:00',
color:'blue',
},
{
title: 'Click for Google',
url: 'http://google.com/', //事件
color:'red',
start: '2017-04-28'
}
] }); }); </script>
成果展示：
页面风格是引用的Jq ui 实现的 http://jqueryui.com/themeroller/#!bgImgOpacityHeader=35&bgImgOpacityContent=75&bgImgOpacityDefault=50&bgImgOpacityHover=75&bgImgOpacityActive=40&bgImgOpacityHighlight=80&bgImgOpacityError=50
页面标注的很详细，其中部分是在大神那学到，其余部分是自己看的的官方文档学习的，这些基本使用代码，再仔细看一下文档就可以掌握。