Bamboo lath　日々の記録

fullcalendar.jsで予定が重なったときの表示順番を指定する

すごく優秀なfullcalendar.js。

元々の「fullcalendar.js」では予定が重なった場合に
タイトルを比較してどちらを左に出すのか決めているみたい。

これだと予定に色をつけた場合にタイトルで左右が
決まってしまうから同じ色の予定でも左右バラバラに
表示されて美しくない。

ということでfullcalendar.jsを変更。

function compareSlotSegs(seg1, seg2) {
    return seg1.start - seg2.start || // earlier start time goes first
        (seg2.end - seg2.start) - (seg1.end - seg1.start) || // tie? longer-duration goes first
        (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title
}

もともと週表示では↑のようになっているので

function compareSlotSegs(seg1, seg2) {
    return seg1.start - seg2.start || // earlier start time goes first
        (seg2.end - seg2.start) - (seg1.end - seg1.start) || // tie? longer-duration goes first
        (seg1.event.color || '').localeCompare(seg2.event.color) ||
        (seg1.event.title || '').localeCompare(seg2.event.title); // tie? alphabetically by title
}

↑このように変更。
タイトルで比較する前にcolorプロパティで比較するのを追加。
登録順とかも気にする場合はidとかで比較するのもいいかも。

// A cmp function for determining which segments should appear higher up
function compareDaySegments(a, b) {
    return (b.rightCol - b.leftCol) - (a.rightCol - a.leftCol) || // put wider events first
        b.event.allDay - a.event.allDay || // if tie, put all-day events first (booleans cast to 0/1)
        a.event.start - b.event.start || // if a tie, sort by event start date
        (a.event.title || '').localeCompare(b.event.title) // if a tie, sort by event title
}

↑月表示側も

// A cmp function for determining which segments should appear higher up
function compareDaySegments(a, b) {
    return (b.rightCol - b.leftCol) - (a.rightCol - a.leftCol) || // put wider events first
        b.event.allDay - a.event.allDay || // if tie, put all-day events first (booleans cast to 0/1)
        a.event.start - b.event.start || // if a tie, sort by event start date
        (a.event.color || '').localeCompare(b.event.color) ||
        (a.event.title || '').localeCompare(b.event.title) // if a tie, sort by event title
}

↑同じ感じで修正

■参考URL

jQuery fullcalendar integration with PHP and MySQL

FullCalendarの日本語化やオプションいろいろ

FullCalendarの導入からカレンダー毎の色指定まで