Retrieving the Current View Date Range of the Scheduler

Environment

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

Description

How can I retrieve the date range of the current Telerik UI for ASP.NET Core 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.

Index.cshtml

    @(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>

Script.js

    // 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 Core Scheduler Resources

• ASP.NET Core Scheduler Documentation

• ASP.NET Core Scheduler Demos

• ASP.NET Core Scheduler Product Page

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

• Telerik UI for ASP.NET Core Forums

See Also

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

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

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

• Telerik REPL: Retrieve current date range in Scheduler view

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base