Configuring the Scheduler with SignalR DataSource and Server Filtering

Updated on Dec 10, 2025

Environment

Product	Telerik UI for ASP.NET Core Scheduler
Product Version	Created with version 2024.4.1112

Description

How can I filter the events of the ASP.NET Core Scheduler that uses SignalR DataSource on the server based on the selected date range in the current view?

Solution

• Enable the ServerFiltering() option of the DataSource in the Scheduler. This way, the component automatically sends a read call to the local hub (service) upon each navigation that occurs in the Scheduler.

  Razor

      @(Html.Kendo().Scheduler<MeetingViewModel>()
          .Name("scheduler")
          ...// Additional configuration.
          .DataSource(dataSource => dataSource
              .SignalR()
              .ServerFiltering(true)
              ...// Additional configuration.
          )
      )

• Specify the ParameterMap() option to send the start and end dates of the visible range of the Scheduler to the server when a Read action occurs. In the case of Create, Update, or Destroy action, the function will only send the respective new, edited, or deleted event data.

  Razor

      @(Html.Kendo().Scheduler<MeetingViewModel>()
          .Name("scheduler")
          ...// Additional configuration.
          .DataSource(dataSource => dataSource
              .SignalR()
              .ServerFiltering(true)
              .Transport(tr => tr
                  .ParameterMap("onMap")
                  .Promise("hubStart")
                  .Hub("meetingHub")
                  .Client(c => c
                      .Read("read")
                      .Create("create")
                      .Update("update")
                      .Destroy("destroy"))
                  .Server(s => s
                      .Read("read")
                      .Create("create")
                      .Update("update")
                      .Destroy("destroy")))
                  ...// Additional configuration.
          )
      )

  JS

      <script>
          function onMap(data, type) {
              switch (type) {
                  case "read": {
                      return forRead(data, type);
                  }
                  default: {
                      return data;
                  }
              }
          }
  
          function forRead(data, type) {
              var scheduler = $("#scheduler").data("kendoScheduler"); // Get a reference to the Scheduler.
  
              var timezone = scheduler.options.timezone; // Access the specified time zone option.
              var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC"); // Add the time difference to the "Start" date between the Schduler time zone and the "Etc/UTC" time zone.
  
              var initialEndDate = scheduler.view().endDate(); // Get the "End" date from the current view.
              var augmentedEndDate = new Date(initialEndDate.valueOf()); // Parse it to Date() object.
              augmentedEndDate.setDate(initialEndDate.getDate() + 1);
              var endDate = kendo.timezone.convert(augmentedEndDate, timezone, "Etc/UTC");
  
              var result = {
                  Start: new Date(startDate.getTime() - (startDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE)),
                  End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE))
              }
  
              return result; // Pass the current "Start" and "End" dates to the server.
          }
      </script>

• Create a FilterRange Model to ensure the received date range is parsed correctly. Define the setters of the start and end properties to convert the dates to UTC.

  C#

      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
  
      public class FilterRange
      {
          private DateTime start;
          public DateTime Start
          {
              get { return start; }
              set
              {
                  start = value.ToUniversalTime();
              }
          }
  
          private DateTime end;
          public DateTime End
          {
              get { return end; }
              set
              {
                  end = value.ToUniversalTime();
              }
          }
      }

• Intercept the parameter of type FilterRange in the Read Action in the ProductHub.cs and return the filtered events data to the client.

  C#

      public class ProductHub : Hub
      {
          private SchedulerMeetingService meetingService;
  
          public ProductHub()
          {
              meetingService = new SchedulerMeetingService(new SampleEntities1());
          }
  
          public IEnumerable<MeetingViewModel> Read(FilterRange range)
          {
              var result = meetingService.GetAll().Where(t => t.Start < range.End && (t.End > range.Start || t.RecurrenceRule != null));
  
              return result;
          }
      }

For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.

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

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

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base