How to display a kendo-chart in a kendo-schedule

[Jerry]

Is it possible to display a kendo-chart inside of a kendo-schedule for each day in a monthview?

I am attempting to use the template "<script id="event-template" type="text/html"></script>" and setting ".EventTemplateId("event-template")".

Inside the template, I only want to dynamically change the series data of the kendo-chart for each day.

So far, only the first event displays a chart successfully even though there are other days with event data.

Are there any examples of something like this?

[Mihaela]

Hello Jerry,

Indeed, you could display a Chart component inside the Scheduler event template as follows:

• Add a "div" container in the event template that will be used to initialize the Chart for each event:

<script id="event-template" type="text/x-kendo-template">
    <div class="chart" style="width: 100px; height: 50px;"></div>
</script>

• Handle the DataBound event of the Scheduler and initialize the Charts:

<kendo-scheduler name="scheduler" on-data-bound="onDataBound"  
  event-template-id="event-template">
  ...
</kendo-scheduler>

<script>
    function onDataBound(e) {
        e.sender.element.find(".chart").kendoChart({
          title: {
            visible: false
          },
          legend: {
            visible: false
          },
          chartArea: {
            background: ""
          },
          seriesDefaults: {
            type: "donut",
            startAngle: 150
          },
          series: [{
            name: "SeriesName",
            data: [{....}] //Pass the series data for each event
          }]
        });
    }
</script>

• You can utilize the Month View events attributes to adjust their appearance:

@{
    string height = "auto";
}
<views>
  <view type="month" events-per-day="6" event-height="@height" event-spacing="5">
</view>

Here is a REPL example for your reference:

https://netcorerepl.telerik.com/cmFawfPH52Pli6vD42

 

Regards, Mihaela Progress Telerik