在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 遍历的用法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
