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:

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.
To handle where the date range is being navigated from, subscribe to the Navigate event and call the previously defined function.
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.

Retrieving the Current View Date Range of the Scheduler

Environment

Description

Solution

More ASP.NET MVC Scheduler Resources

See Also

Getting Started

Support Resources

Community