How to get kendo-scheduler working with a event-template

[Jerry]

We have a Asp.net core 6 application and we are trying to use the kendo-scheduler to display data in a month view.

I am following the "Basic Usage" example.

My calendar renders but there are no events displaying. And there are no errors.

My controller is getting called and it is passing back a list of events based on my model below.

I'm also trying to use an event-template. But this doesn't displaying anything in the calendar.

My ultimate goal would be to display a kendo-chart in each day of a month using the template.
But for now I'd like to get something like the below to work.

How can I get the events returned from my controller to display using the template?

//This is my model:
public class TaskViewModel : ISchedulerEvent
{
	public int TaskID { get; set; }
	public string Title { get; set; }
	public string Description { get; set; }
	private DateTime start;
	private DateTime end;
    public bool IsAllDay { get; set; }
    public int? OwnerID { get; set; }
}

//My controller:
public virtual JsonResult Basic_Usage_Read([DataSourceRequest] DataSourceRequest request)
{
	List<TaskViewModel> list = GetItems();
	return Json(list);
}

//Here is my Index.cshtml:
@{
    var resources = new[]
    {
        new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
        new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
        new { Text = "Charlie", Value = 3, Color = "#56ca85" }
    };
    string defaultTitle = "No Title";
}
<script id="event-template" type="text/x-kendo-template">
    <div class="template-container">
        <h3>Hello World  #: Title # </h3>
    </div>
</script>

<kendo-scheduler name="scheduler" 
    date="new DateTime(2022, 10, 01)" 
    start-time="new DateTime(2022, 10, 01, 7, 00, 00)"
    height="600"
    event-template-id="event-template"
    timezone="Etc/UTC">
    <views>
        <view type="month"></view>
    </views>
    <resources>
        <resource field="OwnerID" title="Owner" datatextfield="Text" datavaluefield="Value" datacolorfield="Color" bind-to="@resources">
        </resource>
    </resources>
    <schema data="Data" total="Total" errors="Errors">
            <scheduler-model id="TaskID">
                <fields>
                    <field name="TaskID" type="number"></field>
                    <field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="description" from="Description" type="string"></field>
                    <field name="OwnerID" type="number" default-value="1"></field>
                    <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                </fields>
            </scheduler-model>
        </schema>
    </scheduler-datasource>
</kendo-scheduler>

 

[Mihaela]

Hi Jerry,

Thank you for the provided code snippets.

I examined them and noticed that the Read method "Basic_Usage_Read" returns the List collection to the Scheduler. However, according to the schema configuration, the fields from the server response which contain the data items, the total number of items, and the server-side errors should be: "Data", "Total", and "Errors".

With that said, I would recommend passing the "list" collection to the "ToDataSourceResult()" method, when returning it to the client:

//My controller:
public virtual JsonResult Basic_Usage_Read([DataSourceRequest] DataSourceRequest request)
{
	List<TaskViewModel> list = GetItems();
	return Json(list.ToDataSourceResult(request));
}

 

Also, when using a template for the Scheduler events, it is required to access the respective event fields in lower case:

<script id="event-template" type="text/x-kendo-template">
    <div class="template-container">
        <h3>Hello World  #: title # </h3>
    </div>
</script>

<kendo-scheduler name="scheduler" >
    <scheduler-datasource type="@DataSourceTagHelperType.Ajax">
     ....
    <schema data="Data" total="Total" errors="Errors">
            <scheduler-model id="TaskID">
                <fields>
                    <field name="TaskID" type="number"></field>
                    <field name="title" from="Title" type="string" default-value="@defaultTitle"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="description" from="Description" type="string"></field>
                    <field name="OwnerID" type="number" default-value="1"></field>
                    <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                </fields>
            </scheduler-model>
        </schema>
    </scheduler-datasource>
</kendo-scheduler>

I am attaching a runnable sample for your reference.

 

Regards, Mihaela Progress Telerik

[Jerry]

Thank you for the example. However, it looks like I'm already doing the same things in my project. I even copied and pasted your model, controller method and kendo tags into my project. But still nothing renders in my kendo scheduler.

However, I believe I found a reason.

I went back to using fullcalendar. Fullcalendar had the same problem as kendo scheduler where my events would not display on the calendar.

The reason why this happens is that my application is using the kendo-tabstrip. My calendar page is on the second tab. The javascript will hide the calendar events in this situation.

I resolved this with fullcalendar by re-rendering the calendar in the kendo-tabstrip onshow="onshow" event.

I'm not sure how to re-render the kendo scheduler but I believe that will solve my original problem.

 

[Mihaela]

Hi Jerry,

You can handle the "activate" event of the TabStrip and call the read() method of the Scheduler's DataSource:

<kendo-tabstrip name="tabstrip" on-activate="onActivate">
   ....
 </kendo-tabstrip>

<script>
function onActivate(e) {
        if($(e.item).attr("id") == "tabstrip-tab-2") { //check the activate tab (i.e., if the 2nd tab is activated)
            $("#scheduler").data("kendoScheduler").dataSource.read(); //get a reference to the Scheduler component and trigger a Read request
                e.sender.unbind("activate", onActivate); // detach the "activate" event handler via unbind()
        }  
}
</script>