Retrieving the Current View Date Range of the Scheduler

Environment

Product	Progress Telerik UI for ASP.NET MVC Scheduler
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.2.606 version

Description

How can I retrieve the date range of the current Telerik UI for ASP.NET MVC Scheduler view?

Solution

To achieve the desired scenario:

1. Define a common function which will be responsible for showing the Scheduler's date range. Inside, utilize the view() client-side method of the Scheduler to retrieve the range.
2. To handle where the date range is being navigated from, subscribe to the Navigate event and call the previously defined function.
3. To handle where the date range is being navigated to, subscribe to the DataBound event and call the previously defined function.

    @(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.Activity>()
        .Name("scheduler")
        .Date(new DateTime(2020, 10, 4))
        .StartTime(new DateTime(2020, 10, 4, 7, 00, 00))
        .EndTime(new DateTime(2020, 10, 4, 20, 00, 00))
        .Height(600)
        .Events(events => {
            events.Navigate("onNavigate");
            events.DataBound("onDataBound");
        })
        .EventTemplateId("event-template")
        .Views(views =>
        {
            views.DayView();
            views.WeekView(week =>
            {
                week.Selected(true);
            });
            views.WorkWeekView();
            views.MonthView();
            views.AgendaView();
        })
        .Resources(resource =>
        {
            resource.Add(m => m.Attendee)
            .Title("Attendee")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Jason", Value = 1, Color = "#eaf8ff" },
                new { Text = "Maddie", Value = 2, Color = "#fdfdf4" }
            });
        })
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.ID);
                m.Field(f => f.Title).DefaultValue("No title");
                m.Field(f => f.Attendee).DefaultValue(1);
            })
            .Read("Overview_Read", "Scheduler")
            .Create("Overview_Create", "Scheduler")
            .Destroy("Overview_Destroy", "Scheduler")
            .Update("Overview_Update", "Scheduler")
        )
    )
    <div class="console"></div>

    // Handlers
    <script>
        function scheduler_view_range(e) { // Common function
            var view = e.sender.view();

            // The view has:
            // A startDate method which returns the start date of the view.
            // An endDate method which returns the end date of the view.

            $(".console").append("<p>"+kendo.format("view:: start: {0:d}; end: {1:d};", view.startDate(), view.endDate())+"</p>");
        }

        function onDataBound(e){
             $(".console").append("<p><strong>Navigated to:</strong></p>");
              scheduler_view_range(e);
        }

        function onNavigate(e){
            $(".console").append("<p><strong>Navigated from:</strong></p>");
            scheduler_view_range(e);
        }

    </script>    

    // External events template
    <script id="event-template" type="text/x-kendo-template">
        <div class="template-container">
            # if (Image) { #
            <img alt="Telerik UI for ASP.NET Core Scheduler #: title # icon" src="@Url.Content("~/shared/web/scheduler/" + "#=  Image #")" style="height:25px; width: 25px;" />
            # } #
            <h3 class="template-title-#= resources[0].value #">#: title #</h3>
        </div>
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on retrieving the current date range in the Scheduler view.

More ASP.NET MVC Scheduler Resources

• ASP.NET MVC Scheduler Documentation

• ASP.NET MVC Scheduler Demos

• ASP.NET MVC Scheduler Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the Scheduler for ASP.NET MVC

• Server-Side API Reference of the Scheduler for ASP.NET MVC

• Telerik REPL: Retrieve current date range in Scheduler view

• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base