Customize the Content of No-Events Scheduler Days for MVC Scheduler using timelinemonthview

[alisha]

I want to customise my team schedulers to identity which users have no events scheduled each day, researching I found this https://docs.telerik.com/kendo-ui/knowledge-base/customize-no-events-days-content.  I cant seem to replicate this for MVC and using the TimelineMonthView. Any help would be appreciated.

 

This is a copy of my scheduler code..

  @(Html.Kendo().Scheduler<Inspire.Web.ViewModels.Scheduler.EventViewModel>()
    .Name("scheduler")
    .HtmlAttributes(new { @class = "global-schedule" })
    .Date(date)
    .Min(date)
    .Max(date)
    .EventTemplate(
    "<div id='event-#= Id #' class='row scheduled-event-template'>" +
        @eventTemplate +
    "</div>")
    .Editable(e => e.Destroy(false))
    .MajorTick(480)
    .ShowWorkHours(true)
    .WorkDayStart(9, 0, 0)
    .WorkDayEnd(17, 0, 0)
    .Events(e => e.Edit("onEdit")
            .Resize("scheduler_OnMove")
            .ResizeStart("scheduler_OnMove")
            .ResizeEnd("scheduler_OnMove")
            .Move("scheduler_OnMove")
            .MoveStart("scheduler_OnMove")
            .MoveEnd("scheduler_OnMove")
            // .Remove("scheduler_OnRemove")
            .DataBound("scheduler_dataBound")
            .Save("scheduler_save"))

    .Views(views =>
    {
        views.TimelineMonthView(weekView => weekView.Selected(true));
        //views.CustomView("MyCustomTimelineView");
    })
    .Group(group => group.Resources("TeamMembers").Orientation(SchedulerGroupOrientation.Vertical))
    .GroupHeaderTemplateId("groupHeaderTemplate")
    .Resources(resource =>
    {
                          resource.Add(m => m.UserId)
                    .Title("Team Members")
                    .Name("TeamMembers")
                    .DataTextField("FullName")
                    .DataValueField("Id")
                    .DataColorField("Color")
                    .Multiple(true)
                    .DataSource(s => s
                    .Read(read => read.Action("action", "controller")));
            


        resource.Add(m => m.EventTypeId)
           .Title("Event Types")
           .Name("EventTypeNames")
           // .Multiple(true)
           .DataTextField("Text")
           .DataValueField("Value1")
           .DataColorField("Value2")
           .DataSource(s => s
           .Read(read => read.Action("action", "controller")));

       

    })
    .AutoBind(false)
    .DataSource(d => d
      .Events(e => e.Sync("sync_handler"))
            .Model(m =>
            {
                m.Id(f => f.Id);
                m.Field(f => f.UserIds);
                m.Field(f => f.EventTypeId);
                m.Field(f => f.Title);
                // m.Field(f => f.Title).DefaultValue("No title");
            })
                .Read(r => r.Action("action", "controller", new
                {
                    IsTermReleased = Model.IsTermReleased,
                    upcomingYear = Model.UpcomingYear
                }))
                .Create("action", "controller")
                .Destroy("action", "controller")
                .Update("action", "controller")
        )
    )

 

[Anton Mironov]

Hi Alisha,

Thank you for the code snippet and the details provided.

In order to achieve the desired behavior, I would recommend using the approaches from the following demos:

For the NoEvent Template, the syntax is similar to the one represented in the Template:

• https://demos.telerik.com/aspnet-mvc/scheduler/templates

Feel free to use a similar code to the one in the demo above(the code could be observed in the View Source tab of the demo).

The following demo represents the MVC implementation of a Timeline View in a Telerik UI Scheduler:

• https://demos.telerik.com/aspnet-mvc/scheduler/timeline

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[alisha]

Hi Anton, thanks for this.

I managed to use the slot template along with the following javascript function to implement a No events template to display.

views.TimelineMonthView(weekView => weekView.Selected(true).SlotTemplate("#= getTemplate(date, resources) #"));

          

function getTemplate(date, resources) {
    var scheduler = $("#scheduler").data("kendoScheduler");

     var startDate = new Date(date);
            startDate.setHours(9);
               var endDate = new Date(date);
            endDate.setHours(18);

    var end = kendo.date.getDate(date);
    kendo.date.addDays(end,1);

    var events = scheduler.dataSource.expand(startDate,endDate);

    if (events.length === 0) {
      return "<div class='row scheduled-event-template'>" +
        "No Events" +
    "</div>"
    } else {
      return "<div id='event-#= Id #' class='row scheduled-event-template'>" +
        "@eventTemplate" +
    "</div>"
    }
  }

The result, no events are displaying across all the dates even those with events... the "events.length" is coming back as 0 all the time so it's not reading the data source correctly.  I need it to come back with events on each day for each event member listed down the side. For example a user may have an event on the 18th Oct and have it displayed against them on the timeline but for the other users who dont have events on that date it would display the "No Events" label... Any help would be appreciated 

[Anton Mironov]

Hi Alisha,

Thank you for the code snippets, the image, and the additional details provided.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Once I have the issue locally represented, will try my best to resolve it.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov