tips blog

FullCallenderのイベントの順番を操作する

2021年5月30日

1. FullCallenderのイベントの縦並びの順番はスタート日が早いイベントが優先して上にいくが、時分秒は順番には反映しない仕様のため、時分秒も反映するように機能を追加する

// A cmp function for determining which segments should take visual priority
EventRenderer.prototype.compareEventSegs = function (seg1, seg2) {
    var f1 = seg1.footprint;
    var f2 = seg2.footprint;
    var cf1 = f1.componentFootprint;
    var cf2 = f2.componentFootprint;
    var r1 = cf1.unzonedRange;
    var r2 = cf2.unzonedRange;

            return f1.eventDef.dateProfile.unzonedRange.startMs - f2.eventDef.dateProfile.unzonedRange.startMs || // 追加している部分
            r1.startMs - r2.startMs || // earlier events go first
        (r2.endMs - r2.startMs) - (r1.endMs - r1.startMs) || // tie? longer events go first
        cf2.isAllDay - cf1.isAllDay || // tie? put all-day events first (booleans cast to 0/1)
        util_1.compareByFieldSpecs(f1.eventDef, f2.eventDef, this.view.eventOrderSpecs, f1.eventDef.miscProps, f2.eventDef.miscProps);
            /* 元のコード
    return r1.startMs - r2.startMs || // earlier events go first
        (r2.endMs - r2.startMs) - (r1.endMs - r1.startMs) || // tie? longer events go first
        cf2.isAllDay - cf1.isAllDay || // tie? put all-day events first (booleans cast to 0/1)
        util_1.compareByFieldSpecs(f1.eventDef, f2.eventDef, this.view.eventOrderSpecs, f1.eventDef.miscProps, f2.eventDef.miscProps);
                    */
};

2. 下にしたいイベントは時分秒を遅くする。

3. FullCallenderの仕様のままだと隙間を埋めるように順番を入れ替えるため、その機能を停止させる

// Computes whether two segments' columns collide. They are assumed to be in the same row.
function isDaySegCollision(seg, otherSegs) {
    var i;
    var otherSeg;
    for (i = 0; i < otherSegs.length; i++) {
        //otherSeg = otherSegs[i];
        //if (otherSeg.leftCol <= seg.rightCol &&
        //    otherSeg.rightCol >= seg.leftCol) {
            return true;
        //}
				return true;
    }
    return false;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です