Make each event fit the bounding box by date

Question

Taking the example from here

I want to make the events look like this:

instead of how it is on the page:

Notice how there is a space between the event and the bounding box.

It seems the element style is auto generated by the scheduler and calculates a width. How would I go about widening the event to fit exactly in the bounding box?

Answer 1

I found the answer on another stackedoverflow question.

This is her code diving by columns.length instead of 2

//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 / columns.length;
        //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";
            }
        }
};