New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Retrieving the Current View Date Range of the Scheduler


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


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


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.
        .Date(new DateTime(2020, 10, 4))
        .StartTime(new DateTime(2020, 10, 4, 7, 00, 00))
        .EndTime(new DateTime(2020, 10, 4, 20, 00, 00))
        .Events(events => {
        .Views(views =>
            views.WeekView(week =>
        .Resources(resource =>
            resource.Add(m => m.Attendee)
            .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
        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>");

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


    // 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>

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

See Also

In this article