FullCalendar（日程管理控件）

$(document).ready(function() {

= function (options) {

var opt = options || {},

api, aConfig, hide, wrap, top,

duration = 800;

var config = {

id: 'Notice',

left: '100%',

top: '100%',

fixed: true,

drag: false,

resize: false,

follow: null,

lock: false,

init: function(here){

api = this;

aConfig = ;

wrap = ;

top = parseInt(wrap[0].);

hide = top + wrap[0].offsetHeight;

('top', hide + 'px')

.animate({top: top + 'px'}, duration, function () {

&& (api, here);

});

close: function(here){

({top: hide + 'px'}, duration, function () {

&& (this, here);

= $.noop;

();

});

return false;

}

};

for (var i in opt) {

if (config[i] === undefined) config[i] = opt[i];

};

return artDialog(config);

};

var date = new Date();

var d = ();

var m = ();

var y = ();

$('#calendar').fullCalendar({

theme: true,

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay'

//fullcalendar本地化

//timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.

monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

today: ["今天"],

firstDay: 1,

buttonText: {

today: '今天',

month: '月',

week: '周',

day: '日',

prev: '上一月',

next: '下一月'

allDaySlot:false,

selectable: true,

selectHelper: true,

aspectRatio:2.7,

editable: false,

allDayDefault:false,

viewDisplay: function(view) {

var viewStart = $.(,"yyyy-MM-dd HH:mm:ss");

var viewEnd = $.(,"yyyy-MM-dd HH:mm:ss");

$("#calendar").fullCalendar('removeEvents');

$.getJSON('http://localhost:8080/pnote/schedule/',{start:viewStart,end:viewEnd},function(data) {

for(var i=0;i<;i++) {

var obj = new Object();

= data[i].id;

= data[i].title;

= data[i].description;

= data[i].color;

= $.(data[i].remindertime);

= data[i].messagenotice;

= data[i].description;

= $.(data[i].start);

= $.(data[i].end);

$("#calendar").fullCalendar('renderEvent',obj,true);

}

}); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示

eventMouseover: function(event, jsEvent, view){

showDetail(event, jsEvent);

eventMouseout: function(event, jsEvent, view){

$('#tip').remove();

//日程点击：添加日程

dayClick: function(date, allDay, jsEvent, view) {

var obj =new Object();

('',{

title: '添加日程',

lock: true,

width:300,

height:400,

fixed: true, //固定定位

//background: '#600', // 背景色

opacity: 0.6, // 透明度

// 在open()方法中，init会等待iframe加载完毕后执行

init: function () {

var iframe = this.;

//var top = ;// 引用顶层页面window对象

var start = ('form-start');

= $.(date,"yyyy-MM-dd HH:mm:ss");

okVal:'提交日程',

ok: function () {

var iframe = this.;

if (!) {

alert('iframe还没加载完毕呢');

return false;

};

var start = ('form-start').value;

var end = ('form-end').value;

var remindertime = ('form-remindertime').value;

= ('form-title').value;

= ('form-description').value;

= $.(start);

= $.(end);

= ('form-color').value;

if (== '') {

alert("标题不能为空");

return false;

}else if(start== '') {

alert("开始日期不能为空");

return false;

}else if(end == '') {

alert("结束日期不能为空");

return false;

}else if(('form-messagenotice').checked) {

if(remindertime == '') {

alert("短信提醒时间不能为空");

return false;

}

= 1;

= $.(remindertime);

}else {

= 0;

= null;

}

$.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台，保存到数据库

title: ,

start:start,

end:end,

description:,

remindertime:remindertime,

color:,

messagenotice:

function (data, textStatus){

= data[0].id;

}, "json"

);

$('#calendar').fullCalendar('renderEvent', obj); //核心的更新代码

$('#calendar').fullCalendar('unselect');

({

title: '笔记之家',

width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩

content: '日程已添加至后台！',

icon: 'face-smile',

time: 3

});

return true;

cancel: true

});

eventClick:function(calEvent, jsEvent, view){

('', {

title: '更新日程',

lock: true,

width:300,

height:400,

//background: '#600', // 背景色

opacity: 0.6, // 透明度

// 在open()方法中，init会等待iframe加载完毕后执行

init: function () {

var iframe = this.;

//var top = ;// 引用顶层页面window对象

('form-start').value = $.(,"yyyy-MM-dd HH:mm:ss");

('form-end').value = $.(,"yyyy-MM-dd HH:mm:ss");

('form-description').value = ;

('form-title').value = ;

if( == 1) {

('form-messagenotice').checked = true;

('form-remindertime').value = $.(,"yyyy-MM-dd HH:mm:ss");

('showtxt').='block';

}else {

}

('form-color').value = ;

okVal:'修改日程',

ok: function () {

var iframe = this.;

if (!) {

alert('iframe还没加载完毕呢')

return false;

};

var start = ('form-start').value;

var end = ('form-end').value;

var remindertime = ('form-remindertime').value;

= ('form-title').value;

= ('form-description').value;

= $.(start);

= $.(end);

= ('form-color').value;

if (== '') {

alert("标题不能为空");

return false;

}else if(start== '') {

alert("开始日期不能为空");

return false;

}else if(end == '') {

alert("结束日期不能为空");

return false;

}else if(('form-messagenotice').checked) {

if(remindertime == '') {

alert("短信提醒时间不能为空");

return false;

}

= 1;

= $.(remindertime);

}else {

= 0;

= null;

}

$.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台，保存到数据库

id:,

title: ,

start:start,

end:end,

description:,

color:,

remindertime:remindertime,

messagenotice:

}

);

$('#calendar').fullCalendar('updateEvent', calEvent);

//弹出提示

({

title: '笔记之家',

width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩

content: '日程已更新！',

icon: 'face-smile',

time: 3

});

return true;

cancel: true,

//删除日程，保存到数据库

button: [{

name: '删除日程',

callback: function () {

//('你同意了').time(2);

$.post("http://localhost:8080/pnote/schedule/deleteevents",{

id:

});

$('#calendar').fullCalendar('removeEvents',);

({

title: '笔记之家',

width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩

content: '日程已删除！',

icon: 'face-smile',

time: 3

});

return true;

}

}]

});

}

});

function showDetail(obj, e){

var str;

if( == 1) str = "短信提醒时间："+$.(,"yyyy-MM-dd HH:mm:ss");

else {str = "短信提醒未启动";}

var eInfo = '<div ><ul>';

eInfo += '<li class="clock">' + '开始：'+$.(,"yyyy-MM-dd HH:mm:ss") +'</br>结束：'+$.(,"yyyy-MM-dd HH:mm:ss")+ '</li>';

eInfo += '<li class="message">' +'日志：'+ + '<br/> </li>';

//eInfo += '<li>分类：' + + '</li>';

eInfo += '<li class="postmessage">' + str + '<br/> </li>';

eInfo += '</ul></div>';

$(eInfo).appendTo($('body'));

$('#tip').css({"opacity":"0.4", "display":"none", "left":( + 20) + "px", "top":( + 10) + "px"}).fadeTo(600, 0.9);

//鼠标移动效果

$('.fc-event-inner').mousemove(function(e){

$('#tip').css({'top': ( + 10), 'left': ( + 20)});

});

}

</script>

body {

margin-top: 10px;

text-align: center;

font-size: 13px;

font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;

}

/********************************************** 鼠标悬停tip提示 ************************************************/

#tip{

position: absolute;

width: 250px;

max-width: 400px;

text-align: left;

padding: 4px;

border: #87CEEB solid 7px;

border-radius: 5px;

background: #00BFFF;

z-index: 1000;

behavior: url('/css/css3/');

}

#tip ul{

margin: 0;

padding: 0;

}

#tip ul li{

font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;

font-size:15px;

list-style: none;

padding-left: 40px;

}

.clock{

/*line-height: 60px;*/

background: url('./fullcalendar/images/') no-repeat;

background-size:40px 40px;

}

.postmessage{

/*line-height: 60px;

font-size: 12px;*/

background: url('./fullcalendar/images/') no-repeat;

background-size:40px 40px;

}

.message{

/*margin-top: 5px;*/

/*line-height: 60px;*/

background: url('./fullcalendar/images/') no-repeat;

background-size:40px 40px;

}

</style>

</head>

<body>

</div>

</body>

</html>

秒客网

FullCalendar（日程管理控件）

相关文章