jQuery fullcalendarプラグインでタイムスロット範囲を無効にする
私はwebappを開発していて、 jQuery fullcalendar plugin を使用しています。
特定のタイムスロットをどうにかして無効にする必要があります。
私が使用している現在の方法は、無効にしたいタイムスロットのイベントを追加し、イベントのオーバーラップを禁止することです。
これを行うより良い方法はありますか？イベントの重複を許可しません。
私は上記の問題の解決策に耐えることができます：黒のタイムスロットを追加し、それらの領域にタイムスロットを追加することを許可しません。
それにもかかわらず、私にはもっと差し迫った問題があります。特定の時間範囲でスロットの背景色を変更できるようにする必要があります。理想的には、これをeventSourcesと同じ方法で使用します。 URLをポイントして、色付きの範囲をajax/jsonで送り返すだけです。
私が追加しようとしている賞金は、この最後の問題に対するものです（色分けされたスロット範囲、および日と週のビューで）。誰かが私に別の解決策を提案することができれば、これを行うことができる完全なカレンダー、それも問題ありません。
ところで、Selectコールバックでチェックしてみませんか？
select: function( start, end, allDay, jsEvent, view ) {
if( /*start is the disabled time*/ )
return false;
else{
// Proceed with the normal flow of your application
// You might show a popup to get info from user to create
// a new event here
}
}
Fullcalendarを使用して、私のコードには次のようなものがあります：
var availablePeriods = [["8:00", "12:00"], ["13:00", "17:00"]]; //these are the time intervals when the slots are OPEN
if (availablePeriods !== undefined) {
slots = $element.find('.fc-agenda-slots tr');
/* first add 'closed' class to all slots, and then remove class from 'open' slotts */
slots.addClass('experdscheduler_closedSlot');
if (jQuery.isArray(availablePeriods)) {
/* only in weekview and dayview */
currentView = plugin.getView();
if (currentView === 'agendaWeek' || currentView === 'agendaDay') {
numberOfAvailablePeriods = availablePeriods.length;
scheduleStartTime = timeToFloat($element.fullCalendar( 'option', 'minTime'));
scheduleSlotSize = $element.fullCalendar( 'option', 'slotMinutes') /60;
/* function to calculate slotindex for a certain time (e.g. '8:00') */
getSlotIndex = function(time) {
time = timeToFloat(time);
return Math.round((time-scheduleStartTime)/scheduleSlotSize);
}
/* remove 'closed' class of open slots */
for (i=0; i<numberOfAvailablePeriods; i++) {
startOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][0]));
endOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][1]));
for (j=startOfPeriodSlot; j<endOfPeriodSlot; j++) {
slots.eq(j).removeClass('experdscheduler_closedSlot');
}
}
}
}
}
/**
* Helper function: Converts a given time to a float, e.g. '8:15' becomes 8.25
* @param mixed time A integer, float or a string. Valid strings: '8:15', '20:15', '8:15am', '8:15pm', '8.15', etc.
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
* @author Koos van der Kolk <koosvdkolk at gmail dot com>
* @return float
**/
function timeToFloat(time) {
var returnValue, timeAsArray, separator, i, timeSeparators = [':', '.'], numberOfSeparators;
/* is time an integer or a float? */
if (parseInt(time, 10) === time || parseFloat(time) === time) {
returnValue = time;
} else {
/* time will be considered a string, parse it */
time = time.toString();
numberOfSeparators = timeSeparators.length;
for (i = 0; i < numberOfSeparators; i = i + 1) {
separator = timeSeparators[i];
if (time.indexOf(separator) > 0) {
timeAsArray = time.split(separator);
returnValue = parseInt(timeAsArray[0], 10) + parseInt(timeAsArray[1], 10) / 60;
/* does string contain 'p' or 'pm'? */
if (time.indexOf('p') > 0 && returnValue <= 12) {
returnValue = returnValue + 12;
}
}
}
}
return returnValue;
}
上記のコードは私が作成したプラグインの一部のコンパイルなので、直接動作しない可能性があります。自由に連絡してください。
私はついに、この利用可能なスロットを1日あたり動作させるようにしました。
日ごとに使用可能なスロットが異なるようにkoosvdkolkの回答を調整：
function adjustWorkHourSlotSize(day_num) {
$(".day"+day_num+"slot").width($(".fc-col"+day_num).width()-2);
}
function addWorkHours2(availablePeriods, calendar_element) {
if (availablePeriods !== undefined) {
numberOfAvailablePeriods = availablePeriods.length;
//slots.addClass('nySchedule_unavailable_slots');
//iterate trough days and get avail periods for each day of week
currentView = calendar_element.fullCalendar('getView');
currentView = currentView.name;
if (currentView === 'agendaWeek' || currentView === 'agendaDay') {
scheduleStartTime = timeToFloat(calendar_element.fullCalendar( 'option', 'minTime'));
scheduleSlotSize = calendar_element.fullCalendar( 'option', 'slotMinutes') /60;
/* function to calculate slotindex for a certain time (e.g. '8:00') */
getSlotIndex = function(time) {
time = timeToFloat(time);
return Math.round((time-scheduleStartTime)/scheduleSlotSize);
}
slots_content = calendar_element.find('.fc-agenda-slots tr .ui-widget-content div');
for (var i=0; i!=numberOfAvailablePeriods; i++) {
if (currentView === 'agendaWeek') {
slots_content.append("<div class='day"+i+"slot dayslot'></div>");
$(".day"+i+"slot").addClass('unavailable');
adjustWorkHourSlotSize(i);
}
dayPeriodsLength=availablePeriods[i].length;
for (var j=0; j!=dayPeriodsLength; j++) {
start=availablePeriods[i][j][0];
end=availablePeriods[i][j][1];
startOfPeriodSlot = getSlotIndex(timeToFloat(start));
endOfPeriodSlot = getSlotIndex(timeToFloat(end));
for (k=startOfPeriodSlot; k<endOfPeriodSlot; k++) {
$(".day"+i+"slot").eq(k).removeClass("unavailable");
}
}
}
}
}
}
今すぐ電話してください：
var availablePeriods = [ [["8:00", "16:00"],["3:00", "5:00"]], [["9:00", "14:00"]] ];
addWorkHours2(availablePeriods, $("#calendar"));
そしてCSSクラスを忘れないでください：
.dayslot {
float: left;
margin-left: 2px;
}
.fc-agenda-slots .unavailable{
background-color: #e6e6e6;
}
Googleコードのこのスレッド を使用すると、この種の問題の進展を追跡できます。実際には忙しい時間の色についてですが、それは直接リンクされています
また、 this guy は、この種のコードでフルカレンダーを使用しながら、この目的を管理するための非常に便利な方法を実装しました
$('#calendar').fullCalendar({
....
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
}
],
annotations: [{
start: new Date(y, m, d, 13, 0),
end: new Date(y, m, d, 15, 30),
title: 'My 1st annotation', // optional
cls: 'open', // optional
color: '#777777', // optional
background: '#eeeeff' // optional
}]
});
スクリーンショット を確認してください
Fullcalendarには、カレンダーの特定の時間枠を強調する組み込み関数businessHoursがあります。
businessHours: [ // specify an array instead
{
dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
start: '08:00', // 8am
end: '18:00' // 6pm
},
{
dow: [ 4, 5 ], // Thursday, Friday
start: '10:00', // 10am
end: '16:00' // 4pm
}
]