Kendo Scheduler design issues

[Varinder]

Hi team

Facing issue related to design. When bind records of around 100 groups then it shows result like this.

 

I tried with some workaround but still have a few issues. Tried to set the width of the columns using the below code. It increases size but the appointments size not increasing refer to below.

var minColumnWidth = 200;
var columns = $(".k-scheduler-header .k-scheduler-table > tbody > tr:last-child > th").length;
var availableWidth = $("#Scheduler").width() - $(".k-scheduler-layout > tbody > tr > td:first-child").width() - parseInt($(".k-scheduler-header").css("padding-right")) - 1;
var width = Math.max(columns * minColumnWidth, availableWidth);
$(".k-scheduler-content .k-scheduler-table").width(width);
$(".k-scheduler-header .k-scheduler-table").width(width);

 

 

[Neli]

Hi Varinder,

I have replied earlier in the other thread where the same question have been posted. I will paste my reply here as well, as it could be helpful to the other users in the forum:

Regarding the second issue, you can try to set the width of the events using the k-event selector as in the example below:

$('.k-event').width(50)

Regards,
Neli
Progress Telerik

[Varinder]

Thanks for the help Neli,

This issue still persist.

The width of the event must be set proportion of the  column width. we can't fix width of column like 50px or something else. It causes two problems.

1. If column width increases or decreases than event width will remain same. That will look odd.

2. If at particular time a group has more than one event like 2, 3, 4... that will not fit in that column. It goes out of its column. See below screenshot.

 

 

 

Also, one more issue with the plugin is when user double clicks in the empty area then events next to clicking area gets disappear. Please refer below screenshots.

I am using template for it. Template have subtitle in it but when I double click on white area it throws error Subtitle is not defined.

The working demo is here

Please help!

 

 

 

 

 

[Neli]

Hi Varinder,

- Regarding the issue with the events with, as far as I understand from your initial email you are changing the default width of the slots based on your internal logic. I would suggest you to use the same logic and set the width of the events (they could be slightly narrower)

- Regarding the dissapearing events, please try to add schema to the Scheduler dataSource as in the example below:

 var dataSource = new kendo.data.SchedulerDataSource({
          data: schedules,
          schema: {
            model: {
              id: "id",
              fields: {
                id: { from: "id", type: "number" },
                title: { from: "title", defaultValue: "No title", validation: { required: true } },
                start: { type: "date", from: "start" },
                end: { type: "date", from: "end" },
                subtitle: { from: "subtitle" }
              }
            }
          }
        });

Here you will find the modified Dojo.

Regards,

Neli