java fullcalendar,fullcalendar的简单实用

1.

Title

$('#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()

效果图

2.

Title

#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;

}

$(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(

$('')

.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'

},

]

});

效果图