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:
- 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
Navigateevent and call the previously defined function. - To handle where the date range is being navigated to, subscribe to the
DataBoundevent 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 Core Scheduler Resources
- ASP.NET Core Scheduler Documentation
- Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET Core Forums