0
角型UIカレンダーをアプリにフルカレンダーで追加しました。私は角度UIカレンダーサイトのサンプルコードを使用して初期化しました：https://angular-ui.github.io/ui-calendar/角型UIカレンダー/完全なカレンダードラッグイベントが機能しない（編集） - クロム内
私の問題は、イベントをドラッグできないことです。ドラッグ開始は決して起こらない。 Clickイベントのコールバックの動作、 "編集可能な"設定オプションはtrueに設定されています。ドキュメントとGoogleとSOを使って高値と低値を検索しました。イベント、私のカレンダーが表示されている
<!-- DataTables/JQuery -->
<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.11,af-2.1.1,b-1.1.2,b-colvis-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,r-2.0.2,rr-1.1.1,sc-1.4.1,se-1.1.2/datatables.min.js"></script>
<script type="text/javascript" src="plugins/datatables/dataTables.colResize.js"></script>
<!-- Bootstrap 3.3.5 -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script type="text/javascript" src="plugins/jQueryUI/jquery-ui.js"></script>
<!-- Growl -->
<script type="text/javascript" src="plugins/bootstrap-growl-master/jquery.bootstrap-growl.min.js"></script>
<!-- Bootstrap Switch -->
<script type="text/javascript" src="plugins/bootstrap-switch/bootstrap-switch.js"></script>
<!-- Slimscroll -->
<script type="text/javascript" src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script type="text/javascript" src="plugins/fastclick/fastclick.min.js"></script>
<!-- Pace Loading -->
<script type="text/javascript" src="plugins/pace/pace.js"></script>
<!-- AdminLTE App -->
<script type="text/javascript" src="bootstrap/js/app.min.js"></script>
<!-- Ion Slider -->
<script type="text/javascript" src="plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- ANGULAR JS -- MAKE SURE CDN ANGULAR FILES VERSIONS MATCH -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-resource.js"></script>
<!-- Angular-Datatables -->
<script type="text/javascript" src="plugins/datatables/angular-datatables.min.js"></script>
<!-- Angular-Sortable -->
<script type="text/javascript" src="plugins/jQueryUI/sortable.js"></script>
<!-- Angular-UI-Bootstrap -->
<script type="text/javascript" src="plugins/AngularUI/ui.bootstrap.min.js"></script>
<!-- Moment -->
<script type="text/javascript" src="plugins/Moment/moment.min.js"></script>
<!-- Full Calendar -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.0/fullcalendar.min.js"></script>
<!-- Angular-UI-Calendar -->
<script type="text/javascript" src="plugins/AngularUI/calendar.js"></script>
<script type="text/javascript" src="assets/js/Controllers/calendarController.js"></script>
（注* jqueryの[v.2.2.0]は最初を示すDataTableのCDNてパッケージ化されている）：私は、私が確認しているものの中にロードし、次のjsファイルを正しい順序されていポピュレートしていますが、私は成功した変更でモデルを操作できますが、イベントをドラッグすることはできません。より具体的には、私は外のイベントをドロップしようとしていません。単に既存のイベントを別の日に移動するだけです。
html： *親ページでappが宣言されています。これはng-view ///コントローラがルートプロバイダを通じて宣言されています。
<section class="content-header">
<h1>Calendar</h1>
<ol class="breadcrumb">
<li><a href="#/"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Calendar</li>
</ol>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Calendar</h3>
<div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
<h4>{{alertMessage}}</h4>
</div>
</div>
<div class="box-body">
<div class="calendar" ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources"></div>
</div>
</div>
</div>
</div>
</section>
レンダリングされたビュー=>カレンダーレンダリングのPIC：
は、任意の助けいただければ幸いです！
編集：私はいくつかのより広範なテストを行ってとドラッグのみChromeブラウザに失敗したことを発見した...エッジ、IE：角UIカレンダーサイトからサンプルコードと同じです*
app.controller('CalendarController', ['$scope', '$window', '$http', 'DTOptionsBuilder', '$log', '$uibModal', 'uiCalendarConfig', '$compile', '$timeout', function($scope, $window, $http, DTOptionsBuilder, $log, $uibModal, uiCalendarConfig, $compile, $timeout) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
$scope.events = [
{title: 'All Day Event',start: new Date(y, m, 1)},
{title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
{id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
{title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
var s = new Date(start).getTime()/1000;
var e = new Date(end).getTime()/1000;
var m = new Date(start).getMonth();
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
$scope.calEventsExt = {
color: '#f00',
textColor: 'yellow',
events: [
{type:'party',title: 'Lunch',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
{type:'party',title: 'Lunch 2',start: new Date(y, m, d, 12, 0),end: new Date(y, m, d, 14, 0),allDay: false},
{type:'party',title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
]
};
/* alert on eventClick */
$scope.alertOnEventClick = function(date, jsEvent, view){
$scope.alertMessage = (date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Dropped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1);
canAdd = 1;
}
});
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
className: ['openSesame']
});
};
/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view,calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalender = function(calendar) {
$timeout(function() {
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
/* Render Tooltip */
$scope.eventRender = function(event, element, view) {
element.attr({'tooltip': event.title,
'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.changeLang = function() {
if($scope.changeTo === 'Hungarian'){
$scope.uiConfig.calendar.dayNames = ["Vasárnap", "Hétfő", "Kedd", "Szerda", "Csütörtök", "Péntek", "Szombat"];
$scope.uiConfig.calendar.dayNamesShort = ["Vas", "Hét", "Kedd", "Sze", "Csüt", "Pén", "Szo"];
$scope.changeTo= 'English';
} else {
$scope.uiConfig.calendar.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$scope.uiConfig.calendar.dayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
$scope.changeTo = 'Hungarian';
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
}]);
EDITを私のコントローラを追加しました、Firefox、Operaが期待どおりに動作していますが、それでも理由はわかりません。
私はタッチスクリーンコンピュータを持っている：//フラグと無効化は、私のために
ソーストリックはなかった
「タッチイベントを有効にする」を。あなたの提案は、すべてのサイトで私のブラウザのタッチスクリーンを壊す...最終的にはまだ検索している – KyleM