fullcalendar で外部イベントをドラッグ アンド ドロップするソリューションを見てきました。ただし、このデモでは、すべての外部イベントの期間が 2 時間です (defaultEventMinutes パラメーターが 120 に設定されているため)。さまざまな期間のイベントを管理するために、このデモを変更しようとしています。たとえば、「私のイベント 1」の長さは 45 分、「私のイベント 2」は 165 分などです。
最初は、eventObject に期間を格納する属性があるかもしれないと思いましたが、ドキュメントによると、そうではありません。そこで、イベントのドラッグ開始時の「defaultEventMinutes」の値を変更できるのではないかと考えました。しかしどうやら、カレンダー全体を再構築しないとできないようです。
あなたによると、この要件を満たすための最良の手段は何ですか? 事前にアドバイスをありがとう...
これにも取り組み、fullCalendar に表示される期間を次のように解決しました。
カスタム setOptions のコードは次のとおりです。
...
function Calendar(element, options, eventSources) {
var t = this;
// hack for setting options that updates
function setOptions(new_options, refresh) {
$.extend(options, new_options);
if (refresh) {
var viewName = currentView.name;
changeView(viewName, true);
}
}
// exports ...
t.setOptions = setOptions;
...
fullCalendar で「dragMinutes」オプションを処理するコードは次のとおりです。
/* External Dragging
--------------------------------------------------------------------------------*/
function dragStart(_dragElement, ev, ui) {
hoverListener.start(function (cell) {
clearOverlays();
if (cell) {
if (cellIsAllDay(cell)) {
renderCellOverlay(cell.row, cell.col, cell.row, cell.col);
} else {
var d1 = cellDate(cell);
if (opt('dragMinutes'))
var d2 = addMinutes(cloneDate(d1), opt('dragMinutes'));
else
var d2 = addMinutes(cloneDate(d1), opt('defaultEventMinutes'));
renderSlotOverlay(d1, d2);
}
}
}, ev);
}
そして、イベントをドラッグ可能にして「dragMinutes」を更新する方法は次のとおりです。
// make the event draggable using jQuery UI
$(this).draggable({
containment: 'document',
// return a custom styled elemnt being dragged
helper: function (event) {
return $('<div class="uv-planning-dragging"></div>').html($(this).html());
},
opacity: 0.70,
zIndex: 10000,
appendTo: 'body',
cursor: 'move',
revertDuration: 0,
revert: true,
start: function (e, ui) {
// set the "dragMinutes" option in fullCalendar so shown interval about to be added is correct.
var data = $(this).data('eventObject');
if (data) {
var min = data.jsonProps.durationMsec / 1000 / 60;
if (macroCalendar.calendar) {
macroCalendar.calendar.fullCalendar('setOptions', { dragMinutes: Math.round(min) }, false);
}
}
},
stop: function (e, ui) {
// further process
}
});
それが役に立てば幸い。
現在、私が見つけた最善の解決策は、イベント オブジェクトに期間属性を追加することです。次に、fullCalendar を作成するコードは次のようになります。
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// HERE I force the end date based on the start date + duration
copiedEventObject.end = new Date(date.getTime() + copiedEventObject.duration * 60 * 1000);
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
唯一の欠点は、イベントをドラッグしているとき、イベントの期間が実際の期間ではなくdefaultEventMinutesのように見えることですが、それを修正する方法がわかりません
これらの特別なプロパティは、提供されたイベント オブジェクトで指定するか、スタンドアロンのデータ属性にすることができます。
<!-- DURATION OF 3 hours EVENT WILL PROPAGATE TO CALENDAR WHEN DROPPED -->
<div class='draggable' data-event='1' data-duration='03:00' />
外部イベント以外の場合は、fullcalendar 設定を使用できます。
defaultTimedEventDuration: (hours+':00:00'),
forceEventDuration: true,
// defaultEventMinutes: hours*60, // not needed
また、イベント データで end プロパティを設定しない (または null にする):
eventData = {
title: title,
start: start,
// end: end, // MUST HAVE no end for fixedduration
color: '#00AA00',
editable: true, // for dragging
};
参照: http://fullcalendar.io/docs/event_data/defaultTimedEventDuration/
ヒント: が原因で可能なイベントのサイズ変更を防止したい場合は、editable: trueCSS を使用してハンドルを非表示にすることができます。.fc-resizer.fc-end-resizer { display:none; }
v4 以降、上記のオプションの一部がまったく機能しません。私が直面していた問題は次のとおりです。
終日アイテムには期間がありますが、開始時刻はありません。ドラッグして開始時刻を選択すると、開始時刻が設定されますが、終了日を設定するとすぐに (上記の回答と同様に行われます)、終了日が再びリセットされます.. setDate でバグが発生しています。関数...終了日が設定され、この部分が機能し、それ自体で比較を行って日付間の時間差を見つけますが、日付はシステム自体によってすでに設定されているため、差が0になり、原因となっています再び null に設定される enddate ......
首に大きな痛みがあると言わざるを得ません...タイムライン内にとどまっているときは完璧に機能しますが、それだけです。
eventDrop イベントでこの行を使用してそれを破壊するように、なんとか「修正」しましたが、使用する可能性のある他のイベントでも機能します。
これにより、すべてのイベントが再取得されます。パフォーマンスが大幅に低下するように思えますが、それほど時間はかからないようです。自分で試してみてください。このようにして、私のタイトル、時間などは常に最新の状態になり、カレンダーには正しい終了日が表示されます。
最新のfullcalendar v2.0.2では、オーバーレイを特定の期間にしたい場合は、この関数で更新できますfullcalendar-arshaw.js
function dragStart(_dragElement, ev, ui) {
hoverListener.start(function(cell) {
clearOverlays();
if (cell) {
var seconds = duration_in_minutes * 1000 * 60 ;
// we need to pass seconds into milli-seconds
if (d1.hasTime()) {
d2.add(seconds);
renderSlotOverlay(d1, d2, cell.col);
}
else {
d2.add(calendar.defaultAllDayEventDuration);
renderDayOverlay(d1, d2, true, cell.col);
}
}
}, ev);
}
ここで、期間を外部イベント オブジェクトに渡し、フェッチできるオブジェクトを_dragElementミリ秒に変換して に渡しd2.add(seconds)ます。これにより、そのカレンダーにそのミリ秒の影が作成されます。