この質問が尋ねられたのを見たことがありますが、答えは見ていません。特定の範囲から色background-colorを付けたいだけです..TD
午前 9 時から午後 9 時までの 15 分ごとのスロット分があるカレンダーがあるとします。午前 10 時から午後 3 時までだけ色を変えたいとします。
この情報はフィードから取得されますが、それは問題ではありません。TDカレンダー内の設定された時間に関連する sが見つかりません。おそらく私は何かを逃しましたか？:)私はかなり新しいjQueryですfullCalendar。
また、主要な質問とは関係のない別の簡単な質問:
idを起動したカレンダーを取得することは可能ですか? ガント ビューのようなものをシミュレートするために、ページに複数のカレンダーがあります。これにより、適切なフィードを取得し、適切なイベントを設定できるようになります。最初の質問に対する機能リクエストは次のとおり です 。ありがとう
この種の機能を実行するための簡単な注釈サポートを作成しました。
https://github.com/elhigu/fullcalendar
うまくいけば、それはある時点で公式の支店に統合されるようになるでしょう
注釈は次のように追加できます。
$('#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
}, { next annotation }, ...]
});
})
アノテーションの使用方法の完全な例は、 https ：//github.com/elhigu/fullcalendar/blob/master/demos/annotations.htmlにあります。
現在取り組んでいるプロジェクトでこの機能が必要です。これは学校のプロジェクトで、その日が休日のイベントと週末の場合、背景を赤色で強調する必要があります。ここではすべての土曜日が休日ではないことに注意してください。一部の学校では第 2 土曜日のみが休日であり、一部の学校では無作為に土曜日が勤務日として選択されます。
エレガントな解決策ではありませんが、何とかこの問題を克服しました。
バージョン 1.5.1 の行番号 2291 で、この行を追加します。
var refDate = typeof(window.holidays)!='undefined'?window.holidays:[]; //Quick and dirty fix
2300 から 2304 までの行を次のコードに置き換えます
if (+date == +today) {
cell.addClass(tm + '-state-highlight fc-today');
}else if($.inArray(+date, refDate)!=-1){ //Added by me
cell.addClass(tm + '-state-error'); //Added by me
}else{
cell.removeClass(tm + '-state-highlight fc-today');
cell.removeClass(tm + '-state-error'); //Added by me
}
完全なカレンダーを呼び出す前に、次のように、js 日付オブジェクトに変換された日付の配列を作成し、その前に + 記号を追加して長整数に変換する必要があります。
var holidayArray = ['2011-06-26','2011-07-03','2011-07-10','2011-07-17','2011-07-24','2011-07-31'];
window.holidays = [];
for(var i=0; i<holidayArray.length;i++){
holidays.push(+(mysqlDateToJSDate(holidayArray[i])));
}
最後に、mysql の日付を js の日付オブジェクトに変換する js 関数を見つけました。
function mysqlDateToJSDate(date) {
var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9])$/;
var parts=date.replace(regex,"$1 $2 $3").split(' ');
return new Date(parts[0],parts[1]-1,parts[2],0,0,0);
}
フル カレンダーを呼び出した後、グローバル変数を削除することを忘れないでください。
グローバル変数を作成するのは良いことではないことはわかっています。しかし、完全なカレンダーは頻繁なバグ修正と新機能で非常に活発であることを考えると、コードにあまり干渉したくありません. 変数をオプションとして渡し、必要な場所に簡単に取得する方法がわかりません。
これは月表示でのみ行われています。他のビューでも同じことをする必要があります...
プレビューは投稿できませんが、ここで見ることができます。
これは、週表示の最新バージョンの「agenda-views.html」デモ ファイルで動作する、簡単で汚れた概念実証です。time.js (TimeSpan 用) を含む datejs が必要であり、現在スクロールでは機能しませんが、簡単に微調整できます。全ページの要旨も参照してください: https://gist.github.com/3005635
var resAvail = [
{
DayOfWeek: 0,
Start: new Date(y, m, d, 10, 0),
End: new Date(y, m, d, 17, 30)
},
{
DayOfWeek: 1,
Start: new Date(y, m, d, 9, 0),
End: new Date(y, m, d, 19, 30)
},
{
DayOfWeek: 4,
Start: new Date(y, m, d, 12, 0),
End: new Date(y, m, d, 20, 00)
}
]
var view = calendar.fullCalendar('getView');
var slotHeight = view.getSlotHeight();
var slotMins = calendar.fullCalendar('option', 'slotMinutes');
var minTime = calendar.fullCalendar('option', 'minTime');
var slotTop = $('.fc-agenda-slots').offset().top - $('.fc-agenda-days').offset().top;
// rip through days of week
for (i = 0; i < 7; i++) {
for (r = 0; r < resAvail.length; r++) {
var currentRes = resAvail[r];
if (currentRes.DayOfWeek == i) {
addAvailBlock(currentRes);
}
}
}
function addAvailBlock(currentRes) {
var dayColumn = getDayColumn(i);
var $availBlock = $('<div class="avail-block"></div>');
dayColumn.append($availBlock);
$availBlock.css('width', $availBlock.parent().css('width'));
// Where we start the availability block
var dayStart = Date.parse(currentRes.Start.toString('MM/dd/yyyy') + ' ' + minTime);
var startOffsetSpan = new TimeSpan(currentRes.Start - dayStart);
var startOffsetMins = startOffsetSpan.getMinutes() + (startOffsetSpan.getHours() * 60);
var startOffsetSlots = startOffsetMins / slotMins;
var startOffsetHeight = startOffsetSlots * slotHeight;
var blockSpan = new TimeSpan(currentRes.End - currentRes.Start);
var blockMins = blockSpan.getMinutes() + (blockSpan.getHours() * 60);
var blockSlots = blockMins / slotMins;
var blockHeight = blockSlots * slotHeight;
$availBlock.css('top', slotTop + startOffsetHeight).css('height', blockHeight);
}
function getDayColumn(dayOfWeek) {
switch (dayOfWeek) {
case 0:
return $('.fc-sun');
case 1:
return $('.fc-mon');
case 2:
return $('.fc-tue');
case 3:
return $('.fc-wed');
case 4:
return $('.fc-thu');
case 5:
return $('.fc-fri');
case 6:
return $('.fc-sat');
}
}
@Jegatheesh の解決策を採用し、グローバル変数にアクセスせず、組み込みの書式設定を使用するように変更しました。これは 1.5.3 に対するものです
--- i/fullcalendar.js
+++ w/fullcalendar.js
@@ -29,6 +29,7 @@ var defaults = {
right: 'today prev,next'
},
weekends: true,
+ holidays: [],
// editing
//editable: false,
@@ -2301,8 +2302,11 @@ function BasicView(element, calendar, viewName) {
}
if (+date == +today) {
cell.addClass(tm + '-state-highlight fc-today');
+ cell.removeClass(tm + '-holiday');
+ }else if ($.inArray(formatDate(date, 'yyyy-MM-dd'), calendar.options.holidays) != -1) {
+ cell.addClass(tm + '-holiday');
}else{
- cell.removeClass(tm + '-state-highlight fc-today');
+ cell.removeClass(tm + '-state-highlight fc-today ' + tm + '-holiday');
}
cell.find('div.fc-day-number').text(date.getDate());
if (dowDirty) {
fc-holiday要素にcss クラスを導入しtdます。
$.inArray(+date, calendar.options.holidays)休日の配列項目をタイムスタンプにフォーマットしてから代わりに呼び出すと、パフォーマンスが向上する可能性があります。
バージョン 2.2 以降、 Background Eventsを使用できます
$('#calendar').fullCalendar({
defaultDate: '2014-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2014-11-10T10:00:00',
end: '2014-11-10T16:00:00',
rendering: 'background'
}
]
});