Why do I have to use the ISchedulerEvent and am I able to customise it?

[Fernando]

I had a look at the ISchedulerEvent inside the Kendo.MVC.UI namespace and found that it's using predefined binding for column names such as Title, Description, Start, End, etc.

However, I have a data controller and model that has some of those, but I have many other data columns that I need mapped to a Telerik Scheduler-Timeline control.

Is it possible to edit the ISchedulerEvent to allow other columns? I have data that eventually I will need to show up in the Scheduler as a tooltip (custom javascript I can see already here, but very little documentation on how in your website). And how do I customise the CSS too please? I want to change the way the MonthView displays data, down to 12hr blocks per day for a max of 7 days in the one screen.

Also, I noticed the following errors/messages when viewing the control source code:

namespace Kendo.Mvc.UI
{
    public interface ISchedulerEvent
    {
        string Title { get; set; }

        string Description { get; set; }

        bool IsAllDay { get; set; }

        DateTime Start { get; set; }

        DateTime End { get; set; }

        string StartTimezone { get; set; }

        string EndTimezone { get; set; }

        string RecurrenceRule { get; set; }

        string RecurrenceException { get; set; }
    }
}
#if false // Decompilation log
'325' items in cache
------------------
Resolve: 'System.Runtime, Version=7.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'
Found single assembly: 'System.Runtime, Version=7.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'
Load from: 'C:\Program Files\dotnet\packs\Microsoft.NETCore.App.Ref\7.0.5\ref\net7.0\System.Runtime.dll'
------------------
Resolve: 'Microsoft.AspNetCore.Mvc.Abstractions, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'
Found single assembly: 'Microsoft.AspNetCore.Mvc.Abstractions, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60'
Load from: 'C:\Program Files\dotnet\packs\Microsoft.AspNetCore.App.Ref\7.0.5\ref\net7.0\Microsoft.AspNetCore.Mvc.Abstractions.dll'

What does this mean? I am using .Net 6 not .Net 7.

Obviously, I am new to ASP.Net Core but I am familiar with the EntityFramework to get data from a SQL Server database. I know that part of my project is working, but I am having a hard time understanding the ISchedulerEvent  and why I have to use it, and how to use it to customise my data mappings.

Please don't offer me the Scheduler getting-started-scheduler page. I've done all that and it's very thin on explaining how things are working, and besides the model in the example is purely limited to the existing columns in the ISchedulerEvent  .

Thanks

[Alexander]

Hi Fernando,

Generally, the "ISchedulerEvent" works in a strong symbiosis with the Scheduler and the incorporated fields within the interface are mandatory for the component's serialization processes to not falter. Nonetheless, you can, for example, use the language's capabilities of establishing "inheritance" between interfaces in order to induct other fields as well.

Interface:

public interface MyInterface : ISchedulerEvent
{
    public string FirstName { get; set; }
    public string LastName { get; set; }    
}

Scheduler Model:

public class SchedulerModel : MyInterface
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }

    private DateTime start;
    public DateTime Start
    {
        get
        {
            return start;
        }
        set
        {
            start = value.ToUniversalTime();
        }
    }

    public string StartTimezone { get; set; }

    private DateTime end;
    public DateTime End
    {
        get
        {
            return end;
        }
        set
        {
            end = value.ToUniversalTime();
        }
    }

    public string EndTimezone { get; set; }

    public string RecurrenceRule { get; set; }
    public int? RecurrenceID { get; set; }
    public string RecurrenceException { get; set; }
    public bool IsAllDay { get; set; }
    public int? OwnerID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

That being said, to incorporate a Tooltip for a given event that will show the newly introduced properties, a possible recommendation would be to:

    1. Configure a Tooltip Component for the entire Scheduler and set its filter property to target the .k-event element of the Grid:

@(Html.Kendo().Tooltip()
        .For("#scheduler")
        .Filter(".k-event")
        .Width(100)
        .Height(50)
        .ShowOn(TooltipShowOnEvent.MouseEnter)
        .Position(TooltipPosition.Bottom)
        .Events(e=>e.Show("onShow"))
)

   2. Then subscribe to the Show event of the Tooltip and in the handler use the .target() method to access the specific Scheduler event and clone its .template-container element.

   3. Use jQuery to style it as needed.

   4. Next, utilize the .setOptions() method available to all client-side widgets to set the new content of the Tooltip.

   5. Finally, use the refresh method to ensure the content is visualized immediately

<script>
	function onShow(e){
		var target = e.sender.target();
		var content = target.find(".template-container").clone();
		var color = target.css("background-color")
		content.css("background-color",color);
		$(".k-tooltip-content, .k-tooltip").css({"background-color":color})
		e.sender.setOptions({content:content});
		e.sender.refresh();
	}
</script>

Here is a Telerik REPL example that tackles the aforementioned approach:

Telerik REPL for ASP.NET Core Example

In terms of the provided decompilation log, it would most notably stem from the third-party ICSharpCode.Decompiler package used by ILSpy browser assembly and decompiler. In the cause of the reported scenario, it showcases the modular dependencies pipeline which is used for the Kendo.Mvc dll assembly.

In regards to altering the built-in rendering of the MonthView. The Scheduler Components calculate the height of each event slot and the position of the events internally. This is why currently there isn't a way to control the size of the event slot.

However, you can apply a custom view incarnation of your own. We have a readily available example that depicts such a scenario:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/scheduler/scheduler-custom-view

Although the example tackles an ASP.NET MVC scenario, the same approach can be undertaken for an ASP.NET Core application as well.

I hope the mentioned above information proves helpful.

Kind Regards,
Alexander
Progress Telerik