fullCalendar超帅的无刷新响应式日历演示

支持移动端响应式,颜色选择,按照月、日、周排序,并且可指定到具体时间。可实时编辑、添加、拖动的fullCalendar日历插件。代码很简单,而且数据表已建好。
基于ace模板的#calendar
<div id="calendar" class="fc fc-ltr"></div>
//编辑修改 
function editEvent(id, title, start, end, code) { 
start = DateUtil.Format("yyyy/MM/dd hh:mm:ss", start); 
if (end == null) { 
end = start; 
} else { 
end = DateUtil.Format("yyyy/MM/dd hh:mm:ss", end); 

$.post(getUrl("Canlendar/postEvent"), {id: id, title: title, start: start, end: end, code: code}, function(data) { 
}, "json") 

// code类型: 拖动resize (延长或缩短天数) ,drop 整体延长或缩短天数 
function daysEvent(id, days, code) { 
$.post(getUrl("Canlendar/daysEvent"), {id: id, days: days, code: code}, function(data) { 

}) 

//删除 
function delEvent(id) { 
$.post(getUrl("Canlendar/delEvent"), {id: id}, function(data) { 

}) 

//添加 
function addEvent(title, start, end, code) { 
if (title == null || title == '') { 
return false; 

start = DateUtil.Format("yyyy/MM/dd hh:mm:ss", start); 
if (end == null) { 
end = start; 
} else { 
end = DateUtil.Format("yyyy/MM/dd hh:mm:ss", end); 

var allDay = getAllDay(start, end); 
$.post(getUrl("Canlendar/postEvent"), {id: 0, title: title, start: start, end: end, code: code}, function(data) { 
$('#calendar').fullCalendar('renderEvent', {title: title, start: start, end: end, allDay: allDay, id: data.id, className: code}, true); 
}, "json"); 
}

更多资料、代码下载:http://www.erdangjiade.com/js/846.html

转载于:https://my.oschina.net/u/3200119/blog/818953

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值