fullcalendar，fullcalendar的简单实用
这篇文章给大家聊聊关于fullcalendar，以及fullcalendar的简单实用对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
fullcalendar的月视图可以改成横向的吗
鼠标单击滑列鼠标单击或者滑历某元素调函数callback属性描述 dayClick单击历某触发callback用：$('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view){ do something...}}); date点击day间(agenda view,包含间)月view点击allDaytrueagenda模式点击all-day窄条allDaytrue点击其 agenda viewday则falsejsEvent普通javascript事件包含click事件基础信息 eventClick点击历某程（事件）触发操作用：$('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view){ do something...}}); event程（事件）象jsEventjavascript事件view前视图象 eventMouseover鼠标划事件用参数同 eventMouseout鼠标离事件用参数同
php怎么调用fullcalendar
FullCalendar是一款基于jQuery的日历插件，适用于各种日程安排、工作计划等场景，您可以很方便的查看查看待办事项，标记重要事项以及绑定点击和拖动事件，能快速的整合到您的项目中，本文将简单介绍FullCalendar的使用。
查看演示下载源码
HTML
首先第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能，就还需要加入jQuery ui插件。
<link rel="stylesheet" type="text/css" rel="external nofollow" href="css/fullcalendar.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
然后，在页面的body里加入div#calendar，用来放置日历主体。
<div id='calendar'></div>
jQuery
现在我们需要在页面加载完成后，调用FullCalendar插件初始化日历，使用jQuery代码：
$(document).ready(function(){
//页面加载完初始化日历
$('#calendar').fullCalendar({
//设置选项和回调
})
});
然后保存并浏览页面，你会发现页面中已经显示一个很大的日历表了。当然这还只是一个初步的日历，FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件，可以很方便的扩展，打造你想要的日历表，先来做一下简单了解。
Options
FullCalendar官方文档中提供了丰富的操作选项设置，比如是否在日历中显示周末等等，使用方法：
$('#calendar').fullCalendar({
weekends: false//不显示周末，将会隐藏周六和周日
});
Callbacks
当点击或者拖动等事件发生时，可以调用相关函数，比如点击某一天时，弹出提示框：
$('#calendar').fullCalendar({
dayClick: function(){
alert('a day has been clicked!');
}
});
Methods
FullCalendar提供了很多方法可以调用，诸如进入下一个月视图等，代码可以这样写：
$('#calendar').fullCalendar('next');
以上代码调用了next方法后，日历视图切换到下一月（周、日）的视图。
fullcalendar的简单实用
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='fullcalendar.css' rel='stylesheet'/>
</head>
<body>
<div id='calendar'></div>
</body>
<script src='jquery.js'></script>
<script src='moment.min.js'></script>
<script src='fullcalendar.js'></script>
<script src='zh-cn.js'></script>
<script type="text/javascript">
<!--数据传输格式为[{"title":"张康大","start":"2019-12-05 09:20:00","end":"2019-12-07 09:20:00"}]-->
$('#ename1').change( function(){
var eid=$("#ename1 option:selected").val()
var events={
url:"/appoint/selectTids",
type:'post',
data:{
"eid":eid
}
}
$('#calendar').fullCalendar('removeEventSource', events)
$('#calendar').fullCalendar('addEventSource', events)
$('#calendar').fullCalendar('refetchEvents')
}).change()
</script>
</html>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='fullcalendar.css' rel='stylesheet'/>
<style>
#top{
background:#eee;
border-bottom: 1px solid#ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar{
margin: 40px auto;
padding: 0 10px;
}
.done:before{
content:"【已完成】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
.doing:before{
content:"【未完成】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
<script src='jquery.js'></script>
<script src='moment.min.js'></script>
<script src='fullcalendar.js'></script>
<script src='zh-cn.js'></script>
<script type="text/javascript">
$(document).ready(function(){
var initialLangCode='en';
$('#calendar').fullCalendar({
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
weekends: true,
weekMode:'liquid',
defaultView:'month',
allDayText:'全天',
businessHours: true,
defaultEventMinutes: 120,
eventLimit: true,
dayClick: function(date,id){
console.log('dayClick触发的时间为：', date.format());
var da=new Date(date);
var b=da.getHours()-8;
var date1=new Date(da.setHours(b));
var a=da.getMinutes()+30;
alert(date1);
var date2=new Date(date1.setMinutes(a));
alert(date2);
alert(id);
alert(data-date);
},
//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
unselectAuto: true,
select: function( start, end){
console.log('select触发的开始时间为：', start.format());
console.log('select触发的结束时间为：', end.format());
},
eventClick: function( event){
console.log('eventClick中选中Event的id属性值为：', event.id);
console.log('eventClick中选中Event的title属性值为：', event.title);
console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的color属性值为：', event.color);
console.log('eventClick中选中Event的className属性值为：', event.className);
},
eventMouseover: function( event){
console.log('鼠标经过...');
console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
},
eventMouseout: function( event){
console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
console.log('鼠标离开...');
},
//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,
eventDrop: function( event, dayDelta, revertFunc){
//do something here...
console.log('eventDrop--- start---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if(dayDelta._days!= 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds!= 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
console.log('eventDrop--- end---');
},
eventResize: function( event, dayDelta, revertFunc){
console.log('--- start--- eventResize');
console.log('eventResize被执行，Event的title属性值为：', event.title);
if(dayDelta._days!= 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds!= 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventResize被执行，Event的start和end时间没有改变！');
}
console.log('--- end--- eventResize');
},
});
//初始化语言选择的下拉菜单值
$.each($.fullCalendar.langs, function(langCode){
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode== initialLangCode)
.text(langCode)
);
});
//当选择一种语言时触发
$('#lang-selector').on('change', function(){
if(this.value){
$('#calendar').fullCalendar('option','lang', this.value);
}
});
events: [
{
id: 1,
title:'这是一个all-day数据',
allDay: true,
start:'2018-12-11'
},
{
id: 2,
title:'开始时间为12PM',
start:'2018-12-11 12:00'
},
{
id: 3,
title:'给一点颜色',
start:'2018-12-4',
color:'red'
},
{
id: 4,
title:'使用className:done',
start:'2018-12-10 09:00',
end:'2018-12-11 18:00',
color:'blue',
className:'done'
},
{
id: 5,
title:'使用className:doing',
start:'2018-12-11 09:00',
end:'2018-12-12 18:00',
color:'green',
className:'doing'
},
{
id: 6,
title:'使用URL和字体颜色',
start:'2019-12-4',
color:'pink',
url:'http://foreknow.com',
className:'doing',
textColor:'black'
},
{
id: 7,
title:'使用backgroundColor和borderColor',
start:'2018-12-11 09:00',
end:'2018-12-12 18:00',
backgroundColor:'gray',
borderColor:'red',
className:'done'
},
]
});
</script>
</html>
文章分享到这里，希望我们关于fullcalendar的内容能够给您带来一些新的认识和思考。如果您还有其他问题，欢迎继续探索我们的网站或者与我们交流，我们将尽力为您提供满意的答案。