xgCalendarはASP.NETでの使用
15822 ワード
1.wdCalendarフォルダをプロジェクトに入れる
2.ページに参照を追加します.3のheadラベルで定義します.
3.xgCalendarを構成し、2つのコードを一緒に置くと完全なページになります.
4.jquery.calendar.jsの変更:
$.fn.bcalendar=function(option){var def={後に属性定義を追加:DIYquickAspx:";同時に追加:
ここで関数を呼び出し、属性を取得するには:option....quickAddHandler.コール形式で行います.
jqueryでcalendar.jsで伝達情報を取得する方法:
カスタマイズされたこのクイック追加により、カスタマイズされた追加ウィンドウがポップアップされ、選択された時間が設定されます.さらに、追加のコントロールを追加できます.具体的にはコードを参照してください.
実測運転通過:VS 2013+MySQL
2.ページに参照を追加します.3のheadラベルで定義します.
3.xgCalendarを構成し、2つのコードを一緒に置くと完全なページになります.
body>
<div>
<div></div>
<div id="calhead" style="padding-left: 1px; padding-right: 1px;">
<div class="cHead">
<div class="ftitle"> </div>
<div id="loadingpannel" class="ptogtitle loadicon" style="display: none;"> ...</div>
<div id="errorpannel" class="ptogtitle loaderror" style="display: none;"> ， ， </div>
</div>
<div id="caltoolbar" class="ctoolbar">
<div id="faddbtn" class="fbutton">
<%--<div> *******************
<span title='Click to Create New Event' class="addcal">
</span>
</div>--%>
</div>
<div class="btnseparator"></div>
<div id="showtodaybtn" class="fbutton">
<div>
<span title='Click to back to today ' class="showtoday">Today</span>
</div>
</div>
<div class="btnseparator"></div>
<div id="showdaybtn" class="fbutton">
<div><span title='Day' class="showdayview"> </span></div>
</div>
<div id="showweekbtn" class="fbutton fcurrent">
<div><span title='Week' class="showweekview"> </span></div>
</div>
<div id="showmonthbtn" class="fbutton">
<div><span title='Month' class="showmonthview"> </span></div>
</div>
<div class="btnseparator"></div>
<div id="showreflashbtn" class="fbutton">
<div><span title='Refresh view' class="showdayflash"> </span></div>
</div>
<div class="btnseparator"></div>
<div id="sfprevbtn" title="Prev" class="fbutton">
<span class="fprev"></span>
</div>
<div id="sfnextbtn" title="Next" class="fbutton">
<span class="fnext"></span>
</div>
<div class="fshowdatep fbutton">
<div>
<input type="hidden" name="txtshow" id="hdtxtshow" />
<span id="txtdatetimeshow">Loading</span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div style="padding: 1px;">
<div class="t1 chromeColor">
</div>
<div class="t2 chromeColor">
</div>
<div id="dvCalMain" class="calmain printborder">
<div id="gridcontainer" style="overflow-y: visible;">
</div>
</div>
<div class="t2 chromeColor">
</div>
<div class="t1 chromeColor">
</div>
</div>
</div>
</body><head id="Head1">
<title> </title> //**********************************
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="wdCalendar/css/dailog.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/calendar.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/dp.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/alert.css" rel="stylesheet" type="text/css" />
<link href="wdCalendar/css/main.css" rel="stylesheet" type="text/css" />
<script src="wdCalendar/src/jquery.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/Common.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/datepicker_lang_US.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.datepicker.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.alert.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/wdCalendar_lang_US.js" type="text/javascript"></script>
<script src="wdCalendar/src/Plugins/jquery.calendar.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var view = "week";
var DATA_FEED_URL = "datafeed.ashx"; //*****************
var op = {
view: view,
theme: 3,
showday: new Date(),
EditCmdhandler: Edit,
DeleteCmdhandler: Delete,
ViewCmdhandler: View,
onWeekOrMonthToDay:wtd,
DIYquickAspx: "edit.aspx", // 、 ， quickAddUrl 。 ：bug quickAdd //Hand ， 。 jQuery.Calendar.js
onBeforeRequestData: cal_beforerequest,
onAfterRequestData: cal_afterrequest,
onRequestDataError: cal_onerror,
autoload: true,
enableDrag: false, // ， false
extParam: [],
url: DATA_FEED_URL + "?method=list",
//quickAddUrl: DATA_FEED_URL + "?method=add",// ， DIYquickAspx ， / //
quickUpdateUrl: DATA_FEED_URL + "?method=update",
quickDeleteUrl: DATA_FEED_URL + "?method=remove"
};
//********************************** op ， ：$("#gridcontainer").BcalGetOp().DIYquickAspx
var $dv = $("#calhead");
var _MH = document.documentElement.clientHeight;
var dvH = $dv.height() + 2;
op.height = _MH - dvH;
op.eventItems = [];
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").gotoDate(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("Success!");
window.setTimeout(function () { $("#loadingpannel").hide(); }, 2000);
break;
}
}
function cal_onerror(type, data) {
$("#errorpannel").show();
}
function Edit(data) {
var eurl = $("#gridcontainer").BcalGetOp().DIYquickAspx+"?id={0}&start={2}&end={3}&isallday={4}&title={1}";
if (data) {
var url = StrFormat(eurl, data);
OpenModelWindow(url, {
width: 600, height: 400, caption: "Manage The Calendar", onclose: function () {
$("#gridcontainer").reload();
}
});
}
}
function View(data) {
var str = "";
$.each(data, function (i, item) {
str += "[" + i + "]: " + item + "
";
});
document.write(str);
}
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");
}
//to show day view
$("#showdaybtn").click(function (e) {
//document.location.href="#day";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//to show week view
$("#showweekbtn").click(function (e) {
//document.location.href="#week";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("week").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//to show month view
$("#showmonthbtn").click(function (e) {
//document.location.href="#month";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("month").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//
$("#showreflashbtn").click(function (e) {
$("#gridcontainer").reload();
});
//Add a new event
$("#faddbtn").click(function (e) {
var url = $("#gridcontainer").BcalGetOp().DIYquickAspx;
OpenModelWindow(url, { width: 500, height: 400, caption: "Create New Calendar" });
});
//go to today
$("#showtodaybtn").click(function (e) {
var p = $("#gridcontainer").gotoDate().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//previous date range
$("#sfprevbtn").click(function (e) {
var p = $("#gridcontainer").previousRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//next date range
$("#sfnextbtn").click(function (e) {
var p = $("#gridcontainer").nextRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
});
</script>
</head>4.jquery.calendar.jsの変更:
$.fn.bcalendar=function(option){var def={後に属性定義を追加:DIYquickAspx:";同時に追加:
//
function quickadd(start, end, isallday, pos) {
if ((!option.quickAddHandler && option.quickAddUrl == "") || option.readonly) {
/********************************* ************************************************/
var startTime = dateFormat.call(start, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm");
var endTime = dateFormat.call(end, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"); // edit.aspx //
var url = option.DIYquickAspx+"?startTime=" + startTime + "&endTime=" + endTime;
OpenModelWindow(url, { width: 500, height: 400, caption: "Create New Calendar" });
/********************************* ************************************************/
return;
}ここで関数を呼び出し、属性を取得するには:option....quickAddHandler.コール形式で行います.
jqueryでcalendar.jsで伝達情報を取得する方法:
function dayshow(e, data) {
if (data == undefined) {
data = getdata($(this));
}
alert(data[0]);}カスタマイズされたこのクイック追加により、カスタマイズされた追加ウィンドウがポップアップされ、選択された時間が設定されます.さらに、追加のコントロールを追加できます.具体的にはコードを参照してください.
実測運転通過:VS 2013+MySQL