正文
张康javascript,张康黎
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
fullcalendar的简单实用
1.
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleTitle/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"
titleTitle/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: '',
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
