Kendo UI React Scheduler

Hello, Mihai,

The Scheduler has a "slotTemplate" property that allows customizing the content of the slot:

https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.slottemplate

If this property does not prove helpful for the scenario, please provide a visual representation of the desired result, so we can provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

Hello Stefan,

I see this is a jQuery example. Is there a React example of the "slotTemplate" usage with the scheduler?

Regards,

Mihai

Hello, Mihai,

The same syntax can be used in the React wrappers as well. The React wrappers are based on the jQuery components and the syntax is the same.

I used one of the React wrappers demos and added the slotTemplate to one of the views:

https://stackblitz.com/edit/react-zytqzk?file=app/main.js


I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hello Stefan,

I tried passing the Kendo UI Line chart component to the slot template like so, but it does not work:

{ type: "workWeek", selected: true, slotTemplate: kendo.template(<LineChart />) }

All we are trying to achieve is to show an hourly line chart on the "Day" view which would have the time on the x-axis and numbers plotted on the y-axis similar to the picture attached. Any insight into doing this would be highly appreciated.

Kind regards,

Mihai

 

Hello, Mihai,

This is expected as the Scheduler wrapper is a jQuery based widget and the templates can accept only strings and kendo-templates. Passing and React component is not supported, this is why we are making native components to be compatible with all React features.

This can be achieved with the wrapper, but the approach is different. The template will add an element with a specific class and then on the dataBound event all this element will be transformed to Charts:

https://stackblitz.com/edit/react-zytqzk?file=app/main.js

Regards,
Stefan
Progress Telerik

Hello Stefan,

I really appreciate your help! I have modified your code with the following:

{ type: "day", selected: true, slotTemplate: kendo.template("<div class='chart'></div>") },

and

handleDataBound = (e) => {
    $('.chart').kendoChart({
         series: [
              { type: "line", data: [1, 2, 3] }
         ]
   })
}

However, the chart on the "Day" view is showing multiple times. All we need is one line chart for the day to show the hours of the day on the x-axis with a number plotted on the y-axis. So for example we could have some data points like at 7 AM the number is 100, at 8 AM the number is 150, at 9 AM the number is 200 and so on.

Thanks & Regards,
Mihai

Hello, Mihai,

Is it possible to show us an image of how the Chart is expected to look inside the Scheduler?

This will help us to make a suggestion best suited for it.

https://stackblitz.com/edit/react-zytqzk-s32fzj?file=app/main.js

Regards,
Stefan
Progress Telerik

Hello Stefan,

I have taken a screenshot of what the scheduler Day view looks like now. All we would need is for the hours on the left to show up at the bottom (which would be the x-axis of the chart). This would just be the day view.

So at 8 AM there would be a point plotted, at 9 AM another point etc, similar to the chart in the picture I attached.

Regards,
Mihai

Hello, Mihai,

I modified the example to replicate the image.

Is this similar looking to the desired result:

https://stackblitz.com/edit/react-zytqzk-s32fzj?file=app/main.js

Regards,
Stefan
Progress Telerik

Hello Stefan!

Almost perfect. The only thing is that when I click on the week view or the month view, then go back to Day view, the chart disappears.

Also, is there a way to hide the hours on the left since they are not needed in this case?

Thanks,

Mihai

Hello, Mihai,

It is not shown after changing the view because I was not resetting the this.date value in the example after a view is changed. This results in not adding the view in the template.

This can be reset in the navigate event:

https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/events/navigate

As for the hours on the left, they can be removed with CSS:

I have updated the example:

https://stackblitz.com/edit/react-zytqzk-mspeuj?file=app/main.js


Regards,
Stefan
Progress Telerik

This is perfect! Exactly what we are looking for.

Thank you Stefan for your help and dedication.

Regards,

Mihai