5

HTML5 と JavaScript で Web サイトを作成しています。サイトの 1 つにKendo UI Schedulerが含まれています。スケジューラーとその仕組みを理解しており、いくつかのイベントで簡単なスケジューラーを設定することができました。さて、私の問題は、イベントがスケジューラに引き込まれる方法を変更したいということです。イベントのサイズを変更して、表示されている列のサイズの半分にしたいのですが、これを行う簡単な方法はありますか、またはこれらのイベントの位置を計算している剣道コードを変更する必要がありますか?

4

3 に答える 3

9

誰もこれに答えることができなかったので、私は自分の解決策を投稿しています.CSSでこれをやろうとしましたが、うまくいきませんでした. 代わりに、スケジューラ イベントを決定する Kendo UI コードをオーバーライドすることにしました。

        //Override kendo function for deciding events with
        kendo.ui.MultiDayView.fn._arrangeColumns = function (element, top, height, slotRange) {
            var startSlot = slotRange.start;

            element = { element: element, slotIndex: startSlot.index, start: top, end: top + height };

            var columns,
                slotWidth = startSlot.clientWidth,
                eventRightOffset = slotWidth * 0.10,
                columnEvents,
                eventElements = slotRange.events(),
                slotEvents = kendo.ui.SchedulerView.collidingEvents(eventElements, element.start, element.end);

            slotRange.addEvent(element);

            slotEvents.push(element);

            columns = kendo.ui.SchedulerView.createColumns(slotEvents);

            //This is where the magic happens
            var columnWidth = slotWidth / 2; 
            //Original code: var columnWidth = (slotWidth - eventRightOffset) / columns.length;
            //This is where the magic ends

            for (var idx = 0, length = columns.length; idx < length; idx++) {
                columnEvents = columns[idx].events;

                for (var j = 0, eventLength = columnEvents.length; j < eventLength; j++) {
                    columnEvents[j].element[0].style.width = columnWidth - 4 + "px";
                    columnEvents[j].element[0].style.left = (this._isRtl ? this._scrollbarOffset(eventRightOffset) : 0) + startSlot.offsetLeft + idx * columnWidth + 2 + "px";
                }
            }
    };
于 2014-01-28T07:47:21.657 に答える
2

オーバーライドCSSを使用しています

.k-イベント {

        clear: both;
        margin:3px 2px 3px 2px;
        padding:3px 1px 3px 1px;
        border-radius: 2px;
        border: solid 1px rgba(100, 100, 100, 0.5);
        -webkit-box-shadow: 0px 2px 2px rgba(100, 100, 100, 0.5);
        box-shadow: 0px 2px 2px rgba(100, 100, 100, 0.5);
        height:auto !important;
        width:90px !important;
        overflow-y:auto;
        text-align:center;
        text-justify:auto;
        text-shadow:0px 0px 2px rgb(200, 200, 200);
        color:#101010;
    }

"!important" を付けて、設定で使用幅を強制します。

:)

于 2014-02-05T04:33:16.570 に答える
-2

以下のように、dataBount イベントで高さのサイズも変更しています。

dataBound: function (e) { var events = $(e.sender.element).find(".k-event").height(65); }、

于 2015-08-06T15:21:53.257 に答える