fullcalendar日曆外掛使用手冊
我是在angularjs框架下使用的,看到下面的程式碼不要一味照搬,不過差別不大,依葫蘆畫瓢即可。
引用
//安裝angular-ui-calendar外掛,目前最新版本是1.0.2,預設該外掛依賴的fullcalendar是2.7.1版本,我實際使用的是3.1.0版本,基本上沒問題,但如果不使用eventAllow等個別方法,使用2.7.1版本即可。
bower install angular-ui-calendar
...
"dependencies": {
"angular-ui-calendar": "^1.0.2",
"fullcalendar": "^3.1.0"
}
介面展示
功能說明:拖拽左側節假日到日曆控制元件,一天不允許有兩個節假日,可以拖拽新增,可以移動,shift+click表示刪除節假日。
html
<div class="row">
<div class="col-md-3">
<div id="external-events">
<h4>節假日</h4>
<div class="fc-event ui-draggable ui-draggable-handle" ng-repeat="holiday in holidaysNameArray" data-color="{{holiday.color}}" style="background-color: {{holiday.color}};">{{holiday.name}}</div>
<!--<div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">元旦</div>
<div class="fc-event ui-draggable ui-draggable-handle" data-color="#e35b5a" style="background-color: #e35b5a;">春節</div>
<div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">My Event 4</div>
<div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">My Event 5</div>-->
</div>
</div>
<div class="col-md-8 col-md-offset-1">
<div ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources"></div>
</div>
</div>
javascript程式碼
$scope.holidaysNameOptions = sessionCache.getHolidayNameGroups();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* alert on eventClick */
$scope.alertOnEventClick = function (date, jsEvent, view) {
$scope.alertMessage = (date.title + ' was clicked ');
};
$scope.eventAllow = function (dropLocation, draggedEvent) {
//好像只能即時返回,在promise的結果裡返回居然被無視
/*$log.debug("event alow...");
$log.debug(dropLocation.start.format('YYYY-MM-DD') + ' ~ ' + dropLocation.end.format());
$log.debug(draggedEvent);
var holidays = {"name": event.title, "theDate": dropLocation.start.format('YYYY-MM-DD')};
HolidaysService.checkExist(holidays).then(function (dto) {
$log.debug('yes you can drop here');
return true;
}, function (msg) {
$log.debug('exist:'+msg)
return false;
});*/
return true;
};
$scope.eventOverlap = function (stillEvent, movingEvent) {
//不需判斷,只要觸發該事件,即表明兩個event在同一天相遇
$log.debug("event overlap...");
return false;
};
/* alert on Drop */
$scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
var newDate = event.start.format("YYYY-MM-DD");
var oldDate = event.start.clone().add(-1 * delta).format("YYYY-MM-DD");
var holidays = {"name": event.title, "newDate": newDate, "oldDate": oldDate};
$log.debug('Event Droped to make dayDelta ' + holidays);
//移動節假日
HolidaysService.reqMoveEvent(holidays).then(function (dto) {
if (dto < 1) {
growl.addErrorMessage("移動出現錯誤", {ttl: 2000});
}
}, function (msg) {
growl.addErrorMessage(msg, {ttl: 2000});
});
};
/* alert on Resize */
$scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* Render Tooltip */
$scope.eventRender = function (event, element, view) {
element.attr({
'tooltip': event.title,
'tooltip-append-to-body': true
});
/*var eventId = new Date().getTime() + "" + Math.random();
if (event.id == null) {
event.id = eventId;
event._id = eventId;
}*/
//$scope.eventId = event; //只有放到作用域裡,ng-click表示式才能取到
element.attr("ng-click", "$event.eventId = '" + event.id + "'; $event.eventName = '" + event.title + "'; $event.eventDate = '" + event.start.format("YYYY-MM-DD") + "'; remove($event);");
$compile(element)($scope);
};
//shift + click 表示刪除event
$scope.remove = function ($event) {
if ($event.altKey === false && $event.ctrlKey === false && $event.shiftKey === true && $event.type === "click") {
var arrayIndex = null;
//刪除節假日
var holidays = {"name": $event.eventName, "theDate": $event.eventDate};
HolidaysService.reqRemoveEvent(holidays).then(function (dto) {
if (dto < 1) {
growl.addErrorMessage("移除出現錯誤", {ttl: 2000});
} else {
$(calendar).fullCalendar('removeEvents', $event.eventId);
}
}, function (msg) {
growl.addErrorMessage(msg, {ttl: 2000});
});
}
};
$scope.dropAccept = function () {
//$log.debug("drop accept...");
//觸發的太早了
return true;
}
$scope.onAddEventDrop = function (date, jsEvent, ui, resourceId) {
//drop 比 eventReceive 先觸發,不過還沒生成具體的event
//console.log('drop', date.format("YYYY-MM-DD"));
};
$scope.eventReceive = function (event) {
var newDate = event.start.format("YYYY-MM-DD");
var name = event.title;
var holidays = {"name": name, "theDate": newDate};
$log.debug('first Event Drag Droped ' + holidays);
//新增節假日
HolidaysService.reqAddEvent(holidays).then(function (dto) {
var id = "FC_" + dto;
event._id = event.id = id;
$(calendar).fullCalendar('updateEvent', event);
}, function (msg) {
var result = $(calendar).fullCalendar('removeEvents', event);
$log.debug("remove result: " + result);
growl.addErrorMessage(msg, {ttl: 2000});
});
};
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
/*locale: "zh-cn",*/
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
buttonText: {
today: '今天'
},
eventLimit: 1,
events: function (start, end, timezone, callback) {
var beginDate = start.format("YYYY-MM-DD");
var endDate = end.format("YYYY-MM-DD");
HolidaysService.reqList({"beginDate": beginDate, "endDate": endDate}).then(function (dtoList) {
var eventDtos = [];
if (dtoList != null && dtoList.length > 0) {
dtoList.forEach(function (dto) {
var filterHoliday = HOLIDAY_LOCAL.filter(function (item) {
if (item.name === dto.name) {
return true;
}
});
eventDtos.push({
"id": "FC_" + dto.id,
"title": dto.name,
"start": dto.theDate,
"color": filterHoliday[0].color
});
});
}
callback(eventDtos);
}, function (msg) {
growl.addErrorMessage(msg, {ttl: 2000});
});
},
displayEventTime: false,
eventClick: $scope.alertOnEventClick,
eventAllow: $scope.eventAllow,//好像只能即時返回,在promise的結果裡返回居然被無視
eventOverlap: $scope.eventOverlap, //不需判斷,只要觸發該事件,即表明兩個event在同一天相遇,很好做到不在一天放多個事件
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dropAccept: $scope.dropAccept,
drop: $scope.onAddEventDrop,
eventReceive: $scope.eventReceive
}
};
var HOLIDAY_LOCAL = [
{"code": "01", "name": "週末", "color": "#257e4a"},
{"code": "02", "name": "元旦", "color": "#257e4a"},
{"code": "03", "name": "春節", "color": "#e35b5a"},
{"code": "04", "name": "元宵節", "color": "#af8c38"},
{"code": "05", "name": "清明", "color": "#578ebe"},
{"code": "06", "name": "勞動節", "color": "#8775a7"},
{"code": "07", "name": "青年節", "color": "#8775a7"},
{"code": "08", "name": "端午節", "color": "#44b6ae"},
{"code": "09", "name": "六一兒童節", "color": "#257e4a"},
{"code": "10", "name": "父親節", "color": "#e35b5a"},
{"code": "11", "name": "母親節", "color": "#e35b5a"},
{"code": "12", "name": "中共建黨節", "color": "#e35b5a"},
{"code": "13", "name": "八一建軍節", "color": "#e35b5a"},
{"code": "14", "name": "七夕", "color": "#e35b5a"},
{"code": "15", "name": "教師節", "color": "#af8c38"},
{"code": "16", "name": "中秋節", "color": "#af8c38"},
{"code": "17", "name": "國慶節", "color": "#e35b5a"},
{"code": "18", "name": "重陽節", "color": "#44b6ae"}
];
$scope.holidaysNameOptions.forEach(function (holiday) {
var filterHoliday = HOLIDAY_LOCAL.filter(function (item) {
if (item.code === holiday.lookupKey) {
return true;
}
});
$scope.holidaysNameArray.push({"name": holiday.lookupValue, "color": filterHoliday[0].color});
});
//做適當延時,基本保證在ng-repeat執行後繫結事件
$timeout(
function () {
$('#external-events .fc-event').each(function () {
var eventColor = $(this).data("color");
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true, // maintain when user navigates (see docs on the renderEvent method)
color: eventColor,
id: null
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
},
200
);
相關推薦
fullcalendar日曆外掛使用手冊
我是在angularjs框架下使用的,看到下面的程式碼不要一味照搬,不過差別不大,依葫蘆畫瓢即可。 引用 //安裝angular-ui-calendar外掛,目前最新版本是1.0.2,預設該外掛依賴的fullcalendar是2.7.1版本,我實際使
fullcalendar 日曆外掛3.9.0遇到的坑
var calendar; (function ($) { var language = getCookie("userLanguage"); calendar = $('#calendar').fullCalendar({ firstDay: 0,//設定一
php使用fullcalendar日曆外掛
最近做課程表的專案,找了好多個外掛感覺都不好用,無意間看到了fullcalendar,還挺簡單的,很方便,先貼一張專案頁面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!--
FullCalendar日曆外掛使用說明
1. 準備工作 js <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link href="~/Scripts/fullcalendar/fullca
fullcalendar日曆外掛的使用並實現增刪改查
1、剛進去預設顯示當前月份,查出資料庫的資料並展示,今天是2018年1月19號,所以我給上過的課次顏色變為灰色,而沒上過的課次變為橙色 2、點選特定的日期,新增課次: 點選未上過的課次進行編輯或刪除: 以及課次的拖動,如將1月22號的“08:00-09:00 高數一班”拖動到1月29號:
使用FullCalendar庫,製作活動日曆外掛
概要 本篇介紹使用FullCalendar庫可在kintone列表頁面上進行檢視、建立活動日曆。 可實現kintone標準日曆列表無法實現的如下功能(2016年5月8日的更新版)。 可隨意切換按月/按周/按日顯示的日曆。 在日曆上可更改活動的日期與時間。 從活動的開始到結束的整個
兩款超好用js日曆外掛(fullcalendar和zabuto_calendar)
$('#calendar_arrangement').fullCalendar({ header: { left: 'prev today next ', center: 'title',
jQuery外掛實戰之fullcalendar(日曆外掛)Demo
jQuery的外掛非常多,應用的場景也非常豐富,今天我這裡給大家介紹一款非常實用的日曆頁面開發外掛 - fullcalendar,目前最新版本是1.5.1,使用這款外掛能夠快速幫助你快速程式設計實現基於web的日曆檢視功能,大家可能都使用過outlook的日曆項功能,使用日
基於jQuery日曆外掛製作日曆
這篇文章主要介紹了基於jQuery日曆外掛製作日曆的相關資料,需要的朋友可以參考下 來看下最終效果圖吧: 是長得醜了一點,不要吐槽我-。- 首先來說說這個日曆主要的製作邏輯吧: ·一個月份最多有31天,需要一個7X6的表格去裝載 ·如果知道了某個月份1號是星期幾,這個月份有多少天,一個迴圈就可以顯示某個月的
zaneData PC端日曆外掛
zaneData是一個完全由原生javascript封裝的PC端日曆外掛,不依賴任何第三方外掛,功能全面,使用簡單. 使用方式 瀏覽器端使用 <!-- 引入相應的js和css --> <link href="./dist/zane-calendar
小程式日曆外掛的使用
大家下午好,萍子又來了,今天來分享一個常用的需求,那就是日曆的外掛的使用。大家都知道,在平時開發的過程中,使用前人寫好的一些外掛可以有效的提高開發效率,也給自己省了很多事,確實有些功能自己去寫也稍稍麻煩了一下。最近我們產品給我提的需求就有那麼一條,讓我在小程式中寫一個日曆出來,還要求需要
又一款牛逼哄哄的日曆外掛jeDate橫空出世
原文:http://www.jayui.com/jedate/index.html 下載:http://download.csdn.net/detail/cometwo/9393326 選擇理由 jeDate除了包含日期範圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前
前臺 - 日曆外掛
有一個封裝好的外掛以及例子,自己一看就明白 下載地址 連結:https://pan.baidu.com/s/1XEyARv1Dr9fqG1uyibn6qQ 提取碼:7d33 備註:獲得 layDate 檔案包後,解壓並將 laydate 整個資
JQuery日曆外掛My97DatePicker日期範圍限制
My97DatePicker是一個非常優秀的日曆外掛,不僅支援多種呼叫模式,還支援日期範圍限制。 常規的呼叫比較簡單,如下所示: 1 <input class="Wdate" id="d1" onclick="Wda
JQ支援的日曆外掛My97DatePicker
支援的瀏覽器 IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+ 及以上多版本瀏覽器 1.常規呼叫 <input id="d11
獲取日曆外掛的值
本文使用的是layui的日曆外掛,原理差不多。 HTML部分程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&
jQuery日曆外掛編寫jquery.calendar.js
jQuery日曆外掛編寫(jquery.calendar.js): 目前比較難解決的問題是: 1、面板問題,雖然可以自定義面板,但是使用起來還是有一定的困難。 樣式預覽: 預設面板1: 自定義面板2:(深藍) 自定義面板3:(大紅) 自定義面板4:炫酷黑 呼叫:
react Ant Design 日曆外掛input導致移動裝置彈出鍵盤問題
今天專案修改日曆外掛,改好部署手機後發現,選擇日期後,input會獲得焦點,導致鍵盤彈出,會擋住日曆外掛,總之頁面很難看。查了api等等,都沒有想過屬性可以設定input。我的想法是,disable掉input。但是問題是js怎麼能拿到input呢?日曆外掛部分,在日曆觸發彈
bootstrap-datepicker日曆外掛 與bootstrapValidator驗證同時使用時無效
一、前言 使用bootstrap-datepicker和bootstrapValidator也有一段時間了,在工作中發現兩者同時使用時會出現的一種問題,當選擇完日期後,並不會正確校驗該欄位。為了更加直觀的展現問題,上圖一張。 可以看出,當選擇完日期後,校驗結果並沒有達
實用外掛(九)手機日曆外掛——Mobiscroll
1、點我下載 2、使用方法: <!--日曆外掛3個css--> <link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.