在anguler項目中引用fullCalendar
1.css文件引用
<link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件的樣式-->
2.JS文件引用javascript
<script src="fullcalendar/JS/fullcalendar.js"></script>
<script src="fullcalendar/JS/moment.min.js"></script>
<script src="fullcalendar/JS/myFullcalendar.js"></script>
<!--引用文件有前後順序，框架的js要在初始化fullCalendar以前-->
3.建立DOM元素css
<div id="calendar" class="lz-full-height"></div>
4.html
$("#calendar").fullCalendar({
//右側新建及設置按鈕
customButtons: {
NewSchedule: {
text: "新建日程",
click: function () {
if ($scope.scheVar.typeList.length <= 0) {
opacityAlert("請新建分類日程!", "glyphicon glyphicon-exclamation-sign");
return false;
}
//初始化肯定按鈕狀態
$scope.scheVar.saveBtnStau = true;
//清空數據
$scope.scheFun.clearData();
//日程狀態爲新建
$scope.scheVar.scheState = "add";
//初始化時間 結束時間比開始時間多1小時
$scope.scheModel.starttime = new Date();
var str = new Date().getTime() + 3600000;
$scope.scheModel.endtime = new Date(str);
$scope.scheFun.showModal("modal_schedule_event.html");
}
},
//設置按鈕
setSchedule: {
text: "設置",
click: function () {
$scope.scheFun.openSchSetOper();
}
},
},
//頭部顯示的按鈕
header: {
//日 周 月 列表 今天
left: 'agendaDay,agendaWeek,month,listMonth today',
center: 'prev title next',
right: 'NewSchedule setSchedule'
},
buttonText: { today: '今天', month: '月', week: '周', day: '日', listMonth: "列表" },
defaultView: "agendaDay",//進入組件默認渲染的視圖爲天，默認爲month
firstDay: 1, //視圖從每週幾開始，默認0爲週日，1爲周1，2爲周2，依此類推
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
dayNames: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
dayNamesShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],//設置周簡稱
allDayDefault: false,
allDaySlot: true,//視圖在周視圖、日視圖頂部顯示「全天」信息，默認true顯示全天
allDayText: "全天",//自定義全天視圖的名稱
slotLabelFormat: "H:mm",//設置日曆y軸上顯示的時間文本格式。
fixedWeekCount: false, //月視圖下，顯示6周（不夠的顯示下個月的）true；默認true
nowIndicator: true,//周/日視圖中顯示今天當前時間點（以紅線標記），默認false不顯示
timeFormat: "HH:mm",//設置的是添加的具體的日程上顯示的時間
slotEventOverlap: true, //相同時間段的多個日程視覺上是否容許重疊，默認true容許
noEventsMessage: "暫無數據", //listview視圖下，無數據時顯示提示'
weekNumbers: false,//是否在視圖左邊顯示這是第多少周，默認false
businessHours: {},//設置哪些時間段重點標記顏色
weekNumberTitle: "周",//周的國際化,默認爲"W"
height: 1000,//組件高度，默認aspectRatio即縱橫比；parent父容器大小；auto自動不帶滾動條；支持數字和函數返回像素；支持$('#calendar').fullCalendar('option', 'height', 700);
contentHeight: 800, //組件中的內容高度，默認aspectRatio即縱橫比；auto自動不帶滾動條；支持數字和函數返回像素；支持$('#calendar').fullCalendar('option', 'contentHeight', 700);
aspectRatio: 2.0, //寬度:高度 比例，默認1.35，可自定義
views: {//月 周 日 日期顯示格式
month: {
titleFormat: "YYYY年M月D日",
columnFormat: "dddd",
},
week: {
titleFormat: "YYYY年M月D日",
columnFormat: "dddd M/D"
},
day: {
titleFormat: "YYYY年M月D日 dddd",
columnFormat: "M/D dddd"
}
},
//在視圖被渲染時觸發（切換視圖也觸發） 參數view爲視圖對象，參數element爲Jquery的視圖Dom
viewRender: function (view, element, event) {
//設置視圖標題
if ($("#calendar h2")[0]) {
$("#calendar h2")[0].innerHTML = view.title;
}
$scope.scheVar.viewType = view.type;//當前視圖所在類型
//用於查詢 哪一天（獲取到當前的視圖時間作處理）
$scope.scheVar.queryschlist.stime = "";// 開始日期
$scope.scheVar.queryschlist.etime = "";// 結束日期
//查詢日/今天
if ($scope.scheVar.viewType == "agendaDay" || $scope.scheVar.viewType == "today") {
var str = view.title.match(/\d{4}.\d{1,2}.\d{1,2}/mg).toString();
$scope.scheVar.queryschlist.stime = str.replace(/[^0-9]/mg, '-');
$scope.scheVar.queryschlist.etime = $scope.scheVar.queryschlist.stime;
} else {//周 月 列表
//組織開始及結束日期賦值
var strarr = view.title.split(""), str = "";
for (var i = 0; i < strarr.length; i++) {
var re = /^[0-9]+.?[0-9]*$/;
if (strarr[i] != " ") {
if (!re.test(strarr[i])) {
if (strarr[i] == "–") {
strarr[i] = ",";
} else {
strarr[i] = "-";
}
}
if (i != strarr.length - 1) {
str += strarr[i];
}
}
}
var arrindex = str.indexOf(",");
$scope.scheVar.queryschlist.stime = str.substr(0, arrindex);
$scope.scheVar.queryschlist.etime = str.substr(arrindex + 1, strarr.length - 1 - arrindex);
//var etimestr = new Date($scope.scheVar.queryschlist.stime),
var etimestr = $scope.scheFun.ieFormatDate($scope.scheVar.queryschlist.stime);
eyearstr = etimestr.getFullYear();
if ($scope.scheVar.queryschlist.etime.length < 3) {
var emonstr = etimestr.getMonth() + 1;
$scope.scheVar.queryschlist.etime = eyearstr + "-" + emonstr + "-" + $scope.scheVar.queryschlist.etime;
} else {
$scope.scheVar.queryschlist.etime = eyearstr + "-" + $scope.scheVar.queryschlist.etime;
}
}
//全部的視圖在第一次點擊時自動調用events，第二次點擊已渲染過的視圖不會調用了，這裏咱們本身去調用刷新
if ($scope.scheVar.viewTypeList.indexOf($scope.scheVar.viewType) > 0) {
$('#calendar').fullCalendar('refetchEvents');
}
//已經點過的類型
if ($scope.scheVar.viewTypeList.indexOf($scope.scheVar.viewType) < 0) {
$scope.scheVar.viewTypeList.push($scope.scheVar.viewType);
}
//從新渲染頁面新增的視圖
if ($scope.scheVar.daylist.length > 0) {
$("#calendar").fullCalendar('removeEventSource', $scope.scheVar.daylist);
}
},
//相似viewRender，在視圖被銷燬時觸發
//viewDestroy : function(view, element){},
//日期格式Render鉤子函數
dayRender: function (date, cell) {
},
//瀏覽器窗體變化時觸發
windowResize: function (arguments) {
//計算內容的高度，控制滾動
var viewheigth = $("#main-viewport").height();
$('#calendar').fullCalendar('option', 'contentHeight', viewheigth - 70);
},
slotDuration: "00:30:00", //一格時間槽表明多長時間，默認00:30:00（30分鐘）
slotLabelInterval: "01:00:00", //日期視圖左邊那一列多長間隔顯示一條日期文字(默認跟着slotDuration走的，可自定義)
snapDuration: "01:00:00",//其實就是動態建立一個日程時，默認建立多長的時間塊
//scrollTime : "06:00:00", //多遠開始往下滾動，默認6小時，這個沒看懂
//minTime : "02:00:00", //周/日視圖左邊時間線顯示的最小日期，默認00:00:00
//maxTime : "08:00:00", //周/日視圖左邊時間線顯示的最大日期，默認24:00:00
slotEventOverlap: false, //相同時間段的多個日程視覺上是否容許重疊，默認true容許
listDayFormat: "M月D日 dddd",//listview視圖下，天天的分割區，[左邊]的標題顯示日期格式，false表示無標題
listDayAltFormat: false, //listview視圖下，天天的分割區，[右邊]的標題顯示日期格式，false表示無標題
defaultDate: $filter("date")(new Date(), "yyyy-MM-dd"),//默認顯示那一天的日期視圖
//locale : "zh-cn", //國際化，前提引用lang-all.js，參見官方demo-->languages.html
//columnFormat : "", //頂部日期顯示格式'ddd' like 'Mon','ddd M/D' like 'Mon 9/7','dddd' like 'Monday'
//displayEventTime: false, //每個日程塊中是否顯示時間，默認true顯示
//displayEventEnd: true, //是否顯示日程塊中的「結束時間」，默認true，若是false則只顯示開始時間
eventLimit: true, //數據條數太多時，限制各自裏顯示的數據條數（多餘的以「+2more」格式顯示），默認false不限制,支持輸入數字設定固定的顯示條數
eventLimitText: "更多", //當一塊區域內容太多以"+2 more"格式顯示時，這個more的名稱自定義（應該與eventLimit: true一併用）
dayPopoverFormat: "YYYY年M月D日", //點開"+2 more"彈出的小窗口標題，與eventLimitClick能夠結合用
// eventLimitClick:"day",接eventLimit屬性，多餘的內容點擊事件，默認有一套彈窗格式，支持跳轉到不一樣視圖
navLinks: true, // 「xx周」是否能夠被點擊，默認false，若是爲true則周視圖「周幾」被點擊以後進入日視圖。
//依賴navLinks : true ， 點擊頂部「日」時觸發
//navLinkDayClick: function(date, jsEvent) { },
//依賴navLinks : true ， 點擊頂部「周」時觸發
//navLinkWeekClick: function(weekStart, jsEvent) { },
//查詢並渲染列表
events: function (start, end, timezone, callback) {
var event = [];
if ($scope.scheVar.visiblerange) {//有權限
$scope.scheFun.querySchList(function (data) {
if (data && data.length > 0) {
for (var i = 0; i < data.length; i++) {
var eventobj = data[i];
eventobj._id = data[i].id;
eventobj.id = new Date(data[i].SrModel.starttime).getTime();//時間戳作爲惟一標識（編輯單個）
//全天結束時間+1天
if (eventobj.allDay) {
var endstr = new Date(eventobj.end).getTime() + 86400000;
eventobj.end = new Date(endstr);
}
var typelist = $scope.scheVar.typeList;
//查詢的是別人的數據
if (!$scope.scheVar.queryschlist.ismeuid) {
typelist = $scope.scheVar.othertypeList;
}
//匹配類型顏色
for (var j = 0; j < typelist.length; j++) {
if (data[i].SrModel.scid == typelist[j].scid) {
eventobj.className = typelist[j].sccolor;
eventobj.SrModel.scname = typelist[j].scname;
event.push(eventobj);
break;
}
}
}
} else {
var list = $("#calendar").fullCalendar('clientEvents');
$("#calendar").fullCalendar('removeEventSource', list);
}
if ($scope.scheVar.schList.length > 0) {
$("#calendar").fullCalendar('removeEventSource', $scope.scheVar.schList);
}
$scope.scheVar.schList = event;
callback(event);
});
} else {
var list = $("#calendar").fullCalendar('clientEvents');
$("#calendar").fullCalendar('removeEventSource', list);
callback(event);
}
},
//當Event對象開始渲染時觸發
eventRender: function (event, element, view) {
},
//列表 單擊時觸發 編輯
eventClick: function (calEvent, jsEvent, view) {
if ($scope.scheVar.signPropModel.isShowEdit) {
$scope.calEvent = calEvent;
if (calEvent.SrModel.srid) {
//詳情
$scope.scheFun.editSche();
}
}
},
dayClick: function (date, allDay, jsEvent, view) {//空白的日期區，單擊時觸發
//默認時間賦值
var _this = this;
$scope.scheFun.clearData();
$scope.scheVar.scheState = "add";
var starttime = $.fullCalendar.formatDate(date, "YYYY-MM-DD"), endtime = starttime;
var date = new Date(), Hours = date.getHours(), Min = date.getMinutes();
starttime += " " + Hours + ":" + Min;
endtime += " " + Hours + ":" + Min;
var str = $scope.scheFun.ieFormatDate(endtime);
//初始化時間 結束時間比開始時間多1小時
endtime = new Date(str.getTime() + 3600000);
$scope.scheModel.endtime = $filter("date")(endtime, "yyyy-MM-dd H:mm");
$scope.scheModel.starttime = $filter("date")(starttime, "yyyy-MM-dd H:mm");
//新建日程彈窗
$scope.scheFun.showModal("modal_schedule_event.html");
},
//鼠標在日程區塊上時觸發
eventMouseover: function (calEvent, jsEvent, view) {
//顯示小彈窗
var startday = $filter("date")(calEvent.SrModel.starttime, "MM月dd日 H:mm");
var endday = $filter("date")(calEvent.SrModel.endtime, "MM月dd日 H:mm");
$scope.$apply(function () {
$scope.scheVar.signPropModel.title = calEvent.title;
$scope.scheVar.signPropModel.des = startday + " - " + endday;//開始及結束時間
$scope.scheVar.signPropModel.iconColor = calEvent.className;
if (calEvent.className instanceof Array) {
$scope.scheVar.signPropModel.iconColor = calEvent.className[0];//分類顏色
}
$scope.scheVar.signPropModel.scname = calEvent.SrModel.scname;//分類名稱
$scope.scheVar.signDetaileModel = calEvent.SrModel;//詳情model
$scope.calEvent = calEvent;
//本身的日程可編輯
$scope.scheVar.signPropModel.isShowEdit = false;
if ($scope.scheVar.queryschlist.uid == app.session.user.uid) {
$scope.scheVar.signPropModel.isShowEdit = true;
}
var menuobj = $("#showmouseover");
if (menuobj) {
var leftv = jsEvent.clientX, topv = jsEvent.clientY,
wheight = $(".main-viewport").height(),
wwidth = $(".main-viewport").width();
if (jsEvent.clientY + 276 > wheight) {
topv = jsEvent.clientY - 100;
}
if (113 + jsEvent.clientX > wwidth) {
leftv = wwidth - 113;
if (jsEvent.clientY + 276 > wheight) {
topv = jsEvent.clientY - 113;
}
}
}
$("#showmouseover").css({ 'left': leftv, 'top': topv });
$scope.scheFun.toggleClass("#showmouseover", "show");
});
},
//鼠標從日程區塊離開時觸發
eventMouseout: function (calEvent, jsEvent, view) {
$scope.scheFun.toggleClass("#showmouseover", "hidden");
},
selectable: false,//容許用戶能夠長按鼠標選擇多個區域(好比月視圖，能夠選中多天；日視圖能夠選中多個小時)，默認false不能選擇多區域的
selectHelper: true,//接selectable，周/日視圖在選擇時是否預先畫出「日程區塊」的樣式出來
unselectAuto: true, //是否點擊頁面上的其餘地方會致使當前的選擇被清除，默認true
unselectCancel: "", //一種方法來指定元素，會忽略unselectauto選項，默認''
selectOverlap: true, //肯定用戶是否被容許選擇被事件佔用的時間段，默認true可佔用時間段
//selectConstraint : , //限制用戶選擇指定時間段的日程數據：an event ID, "businessHours", object
selectAllow: function (selectInfo) { //精確的編程控制用戶能夠選擇的地方，返回true則表示可選擇，false表示不可選擇
},
select: function (start, end, jsEvent, view) { //點擊空白區域/選擇區域內容觸發
},
unselect: function (view, jsEvent) {//選擇操做取消時觸發
},
/**Event Object配置start */
// allDayDefault : null, //是否默認將日程所有顯示在「全天」裏面(boolean or null)，默認爲undefined，即根據event時間值智能判斷，這個屬性太強悍，不敢用
//startParam:"start", //Event Object中定義[開始時間]的變量，默認是start，可自定義變量名以防衝突
//endParam:"end", //Event Object中定義[結束時間]的變量，默認是end，可自定義變量名以防衝突
//timezoneParam : "timezone", //Event Object中定義[時區]的變量，默認是本地時區，可自定義變量名以防衝突，可更改時區如（ "America/Chicago" or "UTC"）
lazyFetching: true, //是否啓用懶加載技術--即只取當前條件下的視圖數據，其它數據在切換時觸發，默認true只取當前視圖的，false是取全視圖的
defaultTimedEventDuration: "01:00:00", //在Event Object中若是沒有end參數時使用，如start=7:00pm，則該日程對象時間範圍就是7:00~9:00
defaultAllDayEventDuration: { days: 1 }, //默認1天是多長，（有的是採用工做時間模式，因此支持自定義）
// forceEventDuration : false, //默認false
// eventDataTransform : function(eventData){return [events...]}, //當從第三方取數不規則時（以下面的JSON或google），可經過此鉤子函數進行數據整理，轉換爲fullcalendar識別的event object
loading: function (isLoading, view) { //視圖數據加載中、加載完成觸發
$scope.scheVar.loadingCalendar = isLoading;
},
// nextDayThreshold : "09:00:00", //當一個事件的結束時間跨越到另外一天，最短的時間，它必須爲它的渲染，若是它在這一天。
eventOrder: "title",//多個相同的日程數據排序方式，String / Array / Function, 默認值: "title"
eventAfterRender: function (event, element, view) {
var _this = this;
var iconColor = event.className;
if (event.className instanceof Array) {
iconColor = event.className[0];//分類顏色
}
//數據增長html結構
if (element[0].className.indexOf("fc-time-grid-event") != -1 ||
element[0].className.indexOf("fc-day-grid-event") != -1) {
if (element.has('.fc-time-grid-event').length == 0) {
element.prepend('<div class=' + '"' + "fc-event-bg " + iconColor + '"' + '></div>');
}
}
},
//當Event對象結束渲染時觸發
// eventAfterAllRender: function (view) { console.log("eventAfterAllRender();"); }, //當全部Event對象渲染完成時觸發
// eventDestroy : function( event, element, view ) { } //一個Event DOM銷燬時觸發
/**Event Object配置end */
/**Event Rendering配置(一些樣式等配置) start*/
// eventColor: '#378006', //不解釋，全部的日程區塊生效，如要對指定數據源生成參見EventSource，如要對指定Event生效，參見EventObject
// eventBackgroundColor:"", //同上，不解釋
// eventBorderColor:"", //同上，不解釋
// eventTextColor:"" //同上，不解釋
/**Event Rendering配置 end*/
editable: $scope.scheVar.iseditable,//支持Event日程拖動修改，默認false
eventStartEditable: true, //Event日程開始時間能夠改變，默認true，若是是false其實就是指日程塊不能隨意拖動，只能上下拉伸改變他的endTime
eventDurationEditable: false, //Event日程的開始結束時間距離是否能夠改變，默認true，若是是false則表示開始結束時間範圍不能拉伸，只能拖拽
// dragRevertDuration : 500, //拖拽取消恢復花費時間，單位毫秒，這個就用默認的差很少了
dragOpacity: 0.5, //拖拽時不透明度，0.0~1.0之間，數字越小越透明
dragScroll: true, //是否在拖拽時自動移動容器，默認true
eventOverlap: true, //拖拽時是否重疊
eventConstraint: { //限制拖拽拖放的位置（即限制有些地方拖不進去）：an event ID, "businessHours", object
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [1, 2, 3, 4] // days of week. an array of zero-based day of week integers (0=Sunday) (Monday-Thursday in this example)
},
longPressDelay: 1000, //面向可touch設備（如移動設備），長按多少毫秒便可拖動,默認1000毫秒（1S）
eventDragStart: function (event, jsEvent, ui, view) {//日程開始拖拽時觸發
},
eventDragStop: function (event, jsEvent, ui, view) {//日程拖拽中止時觸發
},
//日程拖拽中止而且已經拖拽到其它位置了
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
if ($scope.scheVar.signPropModel.isShowEdit) {
var stimestr = (new Date(event.start._i)).getTime();
var etimestr = (new Date(event.end._i)).getTime();
if ($scope.scheVar.viewType == "month") {//月
var datestr = delta._days * 86400000;
stimestr += datestr;
etimestr += datestr;
} else {
stimestr += delta._milliseconds;
etimestr += delta._milliseconds;
}
$scope.scheModel = event.SrModel;
$scope.scheModel.starttime = $filter("date")(new Date(stimestr), "yyyy-MM-dd H:mm");
$scope.scheModel.endtime = $filter("date")(new Date(etimestr), "yyyy-MM-dd H:mm");
$scope.scheVar.scheState = "drop";
$scope.scheFun.saveAPI("false");
} else {
//view.options.editable = false;
// $scope.scheVar.iseditable = false;
}
},
eventResizeStart: function (event, jsEvent, ui, view) { //日程大小調整開始時觸發
},
eventResizeStop: function (event, jsEvent, ui, view) { //日程大小調整中止時觸發
},
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) { //日程大小調整完成並已經執行更新時觸發
},
});
相關文章
- 1. 在項目中引用CefSharp
- 2. 在項目中引入angularJS
- 3. 在項目中引用GreenDroid庫
- 4. 如何在vue項目中引用Iview
- 5. vue項目中vue-fullcalendar的使用（行程日曆）
- 6. 【vue-引用】vue項目中 axios引用
- 7. vue項目中引用jquery
- 8. Maven項目中引用PageOffice
- 9. 在nuxt.js項目中引入echarts
- 10. 在react項目中引入iconfont圖標
- 更多相關文章...
- • 在Spring中使用Redis - Redis教程
- • Mozilla 項目 - 瀏覽器信息
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 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）
歡迎關注本站公眾號,獲取更多信息
