5

I am creating a website in HTML5 and javascript. One of the site contains the Kendo UI Scheduler. I understand the scheduler and how it works, and I've managed to set up a simple scheduler with some events. Now, my problem is that I want to alter the way the events is drawn in to the scheduler; I want to alter the size of the events to be half the size of the column they are displayed in. Is there any simple way to do this, or do I have to alter the Kendo code that is calculating the position of these events?

Karoline Brynildsen
  • 3,598
  • 6
  • 35
  • 45

3 Answers3

9

Since nobody could answer this for me, I'm posting my own solution: I tried doing this with CSS, but I wasn't able to make it work. In stead I decided to override the Kendo UI code that decided the with of the scheduler events.

        //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";
                }
            }
    };
Karoline Brynildsen
  • 3,598
  • 6
  • 35
  • 45
  • omg, I can't believe that kendo didn't provide an initialization property for specifying the cells' width. C'mon.. – andrea.rinaldi Jan 30 '15 at 16:31
  • @Karoline , you are the best, with few changes I got scheduler to work perfect for my needs. – Nic Apr 09 '16 at 09:39
  • @Karoline Brynildsen How you call this function in scheduler ? – thinzar Jan 30 '19 at 02:21
  • @thinzar, You don't. By including this script, kendo's implementation is overwritten with what you provide and when the scheduler calls this method, it's _this_ implementation that executes. It's almost like overriding a virtual method in C#/Java/C++. – bvgheluwe Jun 12 '19 at 10:57
2

I am using override css

.k-event {

        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;
    }

attach "!important" to force use width by your setting.

:)

user3273647
  • 21
  • 1
  • Yes, but the scheduler is responsive. This will not make the width of the events responsive. You cannot use percentage because the events is created out of context of the table showing the slots. – Karoline Brynildsen Feb 05 '14 at 08:27
-2

I am also resizing the height with dataBount event as below:

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

Amit Kumar
  • 9
  • 2