Jquery實現超酷的日程安排插件
這是一款功能超強大的插件，它可以自由管理自己的日程安排，有3種模式，分別為日，周，月，這樣的話管理起來就非常清晰，如果想要保存數據，那就要配合后臺程序了，方便網友們二次開發，不多說了，先看效果
效果如下：
主要代碼如下：
<script type="text/javascript">
$(document).ready(function() {
//[id,title,start,end，全天日程，跨日日程,循環日程,theme,'','']
var view="week";
? __CURRENTDATA=[['6147','你好啊',new Date(1338427800000),new Date(1338431400000),0,0,1,0,1,'','']];
var op = {
view: view,
theme:3,
showday: new Date(),
EditCmdhandler:Edit,
DeleteCmdhandler:Delete,
ViewCmdhandler:View,
onWeekOrMonthToDay:wtd,
onBeforeRequestData: cal_beforerequest,
onAfterRequestData: cal_afterrequest,
onRequestDataError: cal_onerror,
url: "calendar.php?mode=get" ,
quickAddUrl: "calendar.php?mode=quickadd" ,
quickUpdateUrl: "calendar.php?mode=quickupdate" ,
quickDeleteUrl: "calendar.php?mode=quickdelete" //快速刪除日程的
/* timeFormat:" hh:mm t", //t表示上午下午標識,h 表示12小時制的小時，H表示24小時制的小時,m表示分鐘
tgtimeFormat:"ht" //同上 */
};
var $dv = $("#calhead");
var _MH = document.documentElement.clientHeight;
var dvH = $dv.height() + 2;
op.height = _MH - dvH;
op.eventItems =__CURRENTDATA;
var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
$("#caltoolbar").noSelect();
$("#hdtxtshow").datepicker({ picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),
onReturn:function(r){
var p = $("#gridcontainer").BCalGoToday(r).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
}
});
function cal_beforerequest(type)
{
var t="正在加載數據...";
switch(type)
{
case 1:
t="正在加載數據...";
break;
case 2:
case 3:
case 4:
t="正在處理請求...";
break;
}
$("#errorpannel").hide();
$("#loadingpannel").html(t).show();
}
function cal_afterrequest(type)
{
switch(type)
{
case 1:
$("#loadingpannel").hide();
break;
case 2:
case 3:
case 4:
$("#loadingpannel").html("操作成功!");
window.setTimeout(function(){ $("#loadingpannel").hide();},2000);
break;
}
}
function cal_onerror(type,data)
{
$("#errorpannel").show();
}
function Edit(data)
{
var eurl="";
if(data)
{
var url = StrFormat(eurl,data);
OpenModelWindow(url,{ width: 600, height: 400, caption:"管理日程",onclose:function(){
$("#gridcontainer").BCalReload();
}});
}
}
function View(data)
{
var vurl="";
if(data)
{
var url = StrFormat(vurl,data);
OpenModelWindow(url,{ width: 600, height: 400, caption: "查看日程"});
}
}
function Delete(data,callback)
{
$.alerts.okButton="確定";
$.alerts.cancelButton="取消";
hiConfirm("是否要刪除該日程?", '確認',function(r){ r && callback(0);});
}
function wtd(p)
{
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
$("#caltoolbar div.fcurrent").each(function() {
$(this).removeClass("fcurrent");
})
$("#showdaybtn").addClass("fcurrent");
}
//顯示日視圖
$("#showdaybtn").click(function(e) {
//document.location.href="#day";
$("#caltoolbar div.fcurrent").each(function() {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").BCalSwtichview("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//顯示周視圖
$("#showweekbtn").click(function(e) {
//document.location.href="#week";
$("#caltoolbar div.fcurrent").each(function() {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").BCalSwtichview("week").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//顯示月視圖
$("#showmonthbtn").click(function(e) {
//document.location.href="#month";
$("#caltoolbar div.fcurrent").each(function() {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").BCalSwtichview("month").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
$("#showreflashbtn").click(function(e){
$("#gridcontainer").BCalReload();
});
//點擊新增日程
$("#faddbtn").click(function(e) {
var url ="";
OpenModelWindow(url,{ width: 500, height: 400, caption: "新增日程"});
});
//點擊回到今天
$("#showtodaybtn").click(function(e) {
var p = $("#gridcontainer").BCalGoToday().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//上一個
$("#sfprevbtn").click(function(e) {
var p = $("#gridcontainer").BCalPrev().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//下一個
$("#sfnextbtn").click(function(e) {
var p = $("#gridcontainer").BCalNext().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
$("#changetochinese").click(function(e){
location.href="?lang=zh-cn";
});
$("#changetoenglish").click(function(e){
location.href="?lang=en-us";
});
$("#changetoenglishau").click(function(e){
location.href="?lang=en-au";
});
});
</script> 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！