Set color per even on kendo scheduler MVC

I have a grid here which shows all the projects from the Db that have their statuses as "Open". Now I want to show a different colour for each project on the scheduler. Currently, it's showing the projects with the same colour, which can confuse users. Please see the images below of the screen and the code.

@(Html.Kendo().Scheduler<Website.Models.ResourcePlanner.ResourcePlannerGridModel>()
        .Name("scheduler")
        .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
        .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second))
        .Height(600)
        .Views(views =>
        {

            views.WeekView(weekView => weekView.Selected(false));
            views.MonthView(monthView => monthView.Selected(true));
            views.AgendaView();
            views.TimelineView();
            views.TimelineMonthView();
        })
        .Resources(resource =>
        {
            resource.Add(m => m.Title)
            .Title("Room")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[]
            {
    new { Text = "Venue 101", Value = 1, Color = "#6eb4fa" },
    new { Text = "Venue 201", Value = 2, Color = "#f58a8a" }
            });
        })
        .DataSource(d => d
        .Model(m =>
        {
        })
        .Read(read => read.Action("Read", "ResourcePlanner"))          
       .Destroy(delete => delete.Action("Delete", "ResourcePlanner"))
        )
)

Scheduler display:

Scheduler code:

Thank you in advance.

I had the very same issue and solved it by assigning a special class within my event template and doing some additional magic once the DataBound-event was triggered.

// The template
<script type="text/x-kendo-template" id="event-template">
    <span class="customEvent eventAction#=Action#">
        <span class="title">#=title#</span><br />
        <span class="description">#=!description ? "" : description#</span>
    </span>
</script>

// The CSS
.pageScheduler .k-scheduler-content .eventAction1Applied,
.pageScheduler .k-scheduler-content .eventAction2Applied,
.pageScheduler .k-scheduler-content .eventAction3Applied {
    color: white;
}

.pageScheduler .k-scheduler-content .eventAction1Applied {
    background-color: rgb(0, 159, 227);
    border-color: rgb(0, 159, 227);
}

// The method to call on DataBound
function scheduledTasksDataBound() {
    var events = $(".customEvent");
    for (var i = 0; i < events.length; i++) {
        var event = $(events[i]);

        var bgClass = null;
        if (event.hasClass("eventAction1")) {
            bgClass = "eventAction1Applied";
        }
        else if (event.hasClass("eventAction2")) {
            bgClass = "eventAction2Applied";
        }
        else if (event.hasClass("eventAction3")) {
            bgClass = "eventAction3Applied";
        }
        event.parent().addClass(bgClass);
    }
}

If I remember correcltly, the stuff in scheduledTasksDataBound was necessary as the styles were not applied otherwise.