基於fullcalendar的平常安排實例
話很少說直接上代碼javascript
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="日程安排,FullCalendar,jquery實例"> <meta name="description" content="Helloweba，在線演示HTML、CSS、jquery、PHP示例DEMO。"> <title>演示：日程安排FullCalendar</title> <link rel="stylesheet" type="text/css" href="http://www.helloweba.com/demo/css/main.css"> <link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> <style type="text/css"> #calendar{width:960px; margin:20px auto 10px auto} </style> <script src='js/jquery-1.9.1.min.js'></script> <script src='js/jquery-ui-1.10.2.custom.min.js'></script> <script src='js/fullcalendar.min.js'></script> <script type="text/javascript"> $(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, firstDay:1, editable: true, timeFormat: 'H:mm', axisFormat: 'H:mm', events: [ { title: '全天計劃\r\n#####\r\n寫代碼', start: new Date(y, m, 1) }, { title: '張家界四日遊', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: '電話回訪客戶', start: new Date(y, m, d-6, 16, 0), allDay: false }, { id: 999, title: '電話回訪客戶', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: '視頻會議', start: new Date(y, m, d, 10, 30), allDay: false }, { title: '中秋放假', start: '2013-09-19', end: '2013-09-21', }, { title: '午餐', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false }, { title: '生日聚會', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false }, { title: '訪問Helloweba主頁', start: new Date(y, m, 28), end: new Date(y, m, 29), url: 'http://helloweba.com/' }, { title: '實戰訓練課', start: new Date(y, m, d+23) }, ] }); }); </script> </head> <body> <div id="header"> <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首頁">helloweba</a></h1></div> </div> <div id="main" style="width:1060px"> <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-230.html">日程安排FullCalendar</a></h2> <div id='calendar'></div> <div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/> </div> <div id="footer"> <p>Powered by helloweba.com 容許轉載、修改和使用本站的DEMO，但請註明出處：<a href="http://www.helloweba.com">www.helloweba.com</a></p> </div> <p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p> </body> </html>
運行結果如圖所示css
再說幾個觸發事件,使用方法是直接在Event方法後面直接寫html
一、日期點擊java
dayClick: function (date, allDay, jsEvent, view) { alert("日期點擊") }）
二、事件點擊（有時須要雙擊才行，只是個BUG，沒找到問題所在）jquery
eventClick: function (event) { alert("事件點擊") })
三、事件拖動web
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { alert("事件拖動") })
如下內容是我本身寫的擴展ajax
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="日程安排,FullCalendar,jquery實例">
<meta name="description" content="Helloweba，在線演示HTML、CSS、jquery、PHP示例DEMO。">
<title>演示：日程安排FullCalendar</title>
<link href="../../script/Plugins/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../../script/Plugins/helloweba_fullcalendar/css/fullcalendar.css">
<script src='../../script/Plugins/helloweba_fullcalendar/js/jquery-1.9.1.min.js'></script>
<script src='../../script/Plugins/helloweba_fullcalendar/js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='../../script/Plugins/helloweba_fullcalendar/js/fullcalendar.min.js'></script>
<link href="../../script/Plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<script src="../../script/Plugins/sweetalert/sweetalert-dev.js" charset="gb2312"></script>
<link href="../../script/Plugins/select2/select2.css" rel="stylesheet" />
<link rel="stylesheet" href="../../script/Plugins/hDialog/css/common.css" /><!-- 基本樣式 -->
<link rel="stylesheet" href="../../script/Plugins/hDialog/css/animate.min.css" /> <!-- 動畫效果 -->
<script src="../../script/Common/appConfig.js"></script>
<script src='../../script/Plugins/My97DatePicker/WdatePicker.js'></script>
<script src="../../script/Plugins/select2/select2.js"></script>
<script src="../../script/Plugins/select2tree-master/select2tree.js"></script>
<script type="text/javascript">
var doUrl = ""; var id = ""; $(function () { bindAllDay(); var orgId=GetQueryString("OrgId"); var $el = $('.dialog'); $el.hDialog(); $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', //right: 'month,agendaWeek,agendaDay'
right: 'month' }, firstDay: 1, editable: true, timeFormat: 'H:mm', axisFormat: 'H:mm', height: 550, events: function (start, end, callback) { var url = appConfig.sysInfo.sysServiceUrl + 'NoticeManagemnetService.asmx/GetNoticeListByOrgId'; var para = { OrgId: orgId }; $.ajax({ data: JSON.stringify(para), url: url, type: "POST", global: true, cache: true, async: false, dataType: 'text', beforeSend: function (xhr) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); }, cache: false, success: function (data) { data = $.parseJSON($.parseJSON(data).d); if (data.Flag != "-1") { data = data.Result; var events = []; //alert("進入到events內部")
$.each(data, function (key, value) { events.push({ title: value.TITLE, start: value.STARTDATE, end: value.ENDDATE, confcolor: '#fff', allDay: value.ALLDAY == "0" ? false : true, topic: value.TITLE, id: value.ID, orgid: value.ORGID, //userid: value.USERID
}); }); } callback(events); }, error: function (xml, status) { } }); }, //日期點擊
dayClick: function (date, allDay, jsEvent, view) { //bindUserSel("");
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); $(this).hDialog({ modalHide: false }); doUrl = appConfig.sysInfo.sysServiceUrl + 'NoticeManagemnetService.asmx/AddNotice'; //清空內容
$("#btnDel").hide(); $("#userId").val("").select2();
}, //事件點擊
eventClick: function (event) { //bindUserSel(event.userid);
var fstart = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm"); id = event.id; //$(this).hDialog({ modalHide: false });
$(this).hDialog({ modalHide: false, beforeShow: function () { //回填內容
$("#startTime").val(fstart); $("#endTime").val(fend); //$("#userId").val(event.userid);
$("#userId").val(event.userid).select2(); $("#title").val(event.title); $("#btnDel").show(); var allday = event.allDay == false ? "0" : "1"; $("#isAllDay").val(allday).select2(); } });
doUrl = appConfig.sysInfo.sysServiceUrl + 'NoticeManagemnetService.asmx/UpdNotice'; }, //事件拖動
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) { var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"); var id = event.ID; var para = { ID: event.id, STARTDATE: $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm:ss"), ENDDATE: $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm:ss"), ORGID: event.orgid, TITLE: event.title, //USERID: event.userid,
ALLDAY: event.allDay == false ? "0" : "1" } var url = appConfig.sysInfo.sysServiceUrl + 'NoticeManagemnetService.asmx/UpdNotice'; var json = { json: JSON.stringify(para) }; $.ajax({ data: JSON.stringify(json), url: url, type: "POST", global: true, cache: true, async: false, dataType: 'text', beforeSend: function (xhr) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); }, cache: false, success: function (data) { data = $.parseJSON($.parseJSON(data).d); if (data.Flag != "-1") { swal({ title: "保存成功！", type: "success", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }); } else { swal({ title: "保存失敗！", type: "error", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }); } }, error: function (xml, status) { } }); } }); }); </script>
</head>
<body>
<div id="main" style="width:98%">
<div id='calendar'></div>
</div>
<div id="HBox">
<form action="" method="post" onsubmit="return false;">
<ul class="list">
<li>
<strong>開始時間<font color="#ff0000">*</font></strong>
<div class="fl"><input type="text" class="ipt datapicker" id="startTime" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" />
</div>
</li>
<li>
<strong>結束時間<font color="#ff0000">*</font></strong>
<div class="fl"><input type="text" class="ipt" id="endTime" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" /></div>
</li>
<!-- <li>
<strong>人 員<font color="#ff0000">*</font></strong>
<div class="fl">
<select id="userId" class="select2" style="width: 100%;">
</select>
</div>
</li> -->
<li>
<strong>工做內容<font color="#ff0000">*</font></strong>
<div class="fl"><textarea class="ipt" id="title" rows="3"></textarea></div>
<!-- <input type="text" class="ipt" id="title" /> -->
</li>
<li>
<strong>是否全天 <font color="#ff0000">*</font></strong>
<div class="fl">
<select id="isAllDay" class="select2" style="width: 100%;">
</select>
</div>
</li>
<li><input type="button" value="確認提交" id="btnSub" style="background-color: deepskyblue;color: #FFF;height: 30px;" />
<input type="button" value="取消日程" id="btnDel" style="background-color: deepskyblue;color: #FFF;height: 30px;" /></li>
</ul>
</form>
</div><!-- HBox end -->
<script src="../../script/Plugins/hDialog/js/jquery.hDialog.min.js"></script>
<script src="../../script/Plugins/moment/moment.js"></script>
<script src="../../script/Plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
<script> $("#btnSub").on('click', function () { if ($("#startTime").val() == "" || $("#endTime").val() == "" || $("#title").val() == "" || $("#isAllDay").val() == "") { $("#HCloseBtn").click(); swal({ title: "全部必填項均不能爲空", type: "error", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }); return false; } var doSub = { ID: id, STARTDATE: $("#startTime").val(), ENDDATE: $("#endTime").val(), //ORGID: event.orgid,
TITLE: $("#title").val(), ORGID: GetQueryString("OrgId"), ALLDAY: $("#isAllDay").val() } var json = { json: JSON.stringify(doSub) }; $.ajax({ data: JSON.stringify(json), url: doUrl, type: "POST", global: true, cache: true, async: false, dataType: 'text', beforeSend: function (xhr) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); }, cache: false, success: function (data) { data = $.parseJSON($.parseJSON(data).d); if (data.Flag != "-1") { $("#HCloseBtn").click(); swal({ title: "保存成功！", type: "success", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }, function () { location.href = location.href; }); } else { swal({ title: "保存失敗！", type: "error", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }); } }, error: function (xml, status) { } }); }) $("#btnDel").on('click', function () { var url = appConfig.sysInfo.sysServiceUrl + 'NoticeManagemnetService.asmx/DelNoticeByID'; var para = { ID: id }; $.ajax({ data: JSON.stringify(para), url: url, type: "POST", global: true, cache: true, async: false, dataType: 'text', beforeSend: function (xhr) { xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); }, cache: false, success: function (data) { $("#HCloseBtn").click(); data = $.parseJSON($.parseJSON(data).d); if (data.Flag != "-1") { swal({ title: "刪除成功！", type: "error", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }, function () { location.href = location.href; }); } else { swal({ title: "刪除失敗！", type: "error", text: "2秒後自動關閉。", timer: 2000, showConfirmButton: true }, function () { location.href = location.href; }); } }, error: function (xml, status) { } }); }) //判斷參數
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } //綁定是否全天下拉
function bindAllDay() { var d = []; d.push({ id: 1, text: "是" },{ id: 0, text: "否" }); $('#isAllDay').empty(); $('#isAllDay').select2({ data: d, allowClear: true, minimumResultsForSearch: Infinity });
}
</script>
</body>
</html>
效果以下json
fullcalendar+hDialog資源下載地址：https://download.csdn.net/download/duangufei/12092735bootstrap
相關文章
- 1. 基於h5的Fullcalendar
- 2. 基於FullCalendar插件的簡單個人日程安排系統（1）
- 3. PostgreSQL 基於Docker的多實例安裝
- 4. python 常見排序實例
- 5. vue 中 fullcalendar 使用案例
- 6. 基於webpack的vue實例
- 7. 基於DAG實現的任務編排框架&平臺
- 8. 案例 | 信安運維基於 TKE 平臺的容器技術實踐
- 9. 基於Cortex-M平臺的DSP實例開發
- 10. 常見排序算法基於JS的實現
- 更多相關文章...
- • XML DOM 實例 - XML DOM 教程
- • XML 實例 - XML 教程
- • ☆基於Java Instrument的Agent實現
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
