Currently, when using an ItemTemplate, I cannot get the details for the current occurrence from the template context as it cannot be differentiated from the series.
===
TELERIK EDIT:
In the meantime, it is possible to get the occurrence details with JavaScript. The occurrence start and end DateTime are rendered as an aria-label HTML attribute of the <div class="k-event"> element.
@inject IJSRuntime js
<TelerikScheduler Data="@SchedulerData"
@bind-Date="@SelectedDate"
Height="600px">
<SchedulerViews>
<SchedulerMultiDayView StartTime="@StartTime" />
</SchedulerViews>
<ItemTemplate>
<div onclick="getOccurrenceDateTime(event)" style="height:100%">
@{ var appointment = (Appointment)context; }
@appointment.Title (CLICK ME)
</div>
</ItemTemplate>
</TelerikScheduler>
@* Move JavaScript code to a separate JS file *@
<script suppress-error="BL9992">
function getOccurrenceDateTime(e) {
alert(e.target.closest("div.k-event").getAttribute("aria-label"));
}
</script>
@code {
private AppointmentService appointmentService = new();
private DateTime SelectedDate { get; set; } = DateTime.Now.Date;
private DateTime StartTime { get; set; } = DateTime.Now.Date.AddHours(7);
private List<Appointment> SchedulerData = new List<Appointment>();
protected override async Task OnInitializedAsync()
{
SchedulerData = await appointmentService.GetAppointmentsAsync();
}
public class AppointmentService
{
public async Task<List<Appointment>> GetAppointmentsAsync()
{
await Task.Delay(1);
return GetAppointments();
}
public List<Appointment> GetAppointments()
{
List<Appointment> data = new List<Appointment>();
DateTime baselineTime = GetStartTime();
data.Add(new Appointment
{
Title = "Daily Meeting",
Description = "Daily Meeting",
Start = baselineTime.AddHours(1),
End = baselineTime.AddHours(1).AddMinutes(30),
RecurrenceRule = "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR"
});
return data;
}
public DateTime GetStartTime()
{
DateTime dt = DateTime.Now;
int daysSinceMonday = dt.DayOfWeek - DayOfWeek.Monday;
return new DateTime(dt.Year, dt.Month, dt.Day - daysSinceMonday, 8, 0, 0);
}
}
public class Appointment
{
public Guid Id { get; set; }
public string Title { get; set; } = string.Empty;
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
public string Description { get; set; } = string.Empty;
public string RecurrenceRule { get; set; } = string.Empty;
public Appointment()
{
var rand = new Random();
Id = Guid.NewGuid();
}
}
}
Is this available for blazor? if not could it be added somehow temporarily until support for it is added?
https://demos.telerik.com/aspnet-mvc/scheduler/yearview
Currently, it is possible to select only one appointment at a time. I want to be able to select more than one appointment to perform some operation with all selected ones - for example, delete them.
Hello,
I would like the Scheduler day view to scroll automatically to a defined hour, for example the start of the work day.
The edit popup currently does not adapt to screen size changes. Part of the edit window for the scheduler is off the screen making it unreadable on certain resolutions.
I need to make it responsive/adaptive.
I want to easily print the Scheduler calendar - month view, week view and more.
===
ADMIN EDIT
===
A possible approach for the time being is to implement printing functionality for the Scheduler in a similar fashion to how the Grid is printed here https://github.com/telerik/blazor-ui/tree/master/grid/print.
The approach relies on using JavaScript to invoke the browser print() method. Using CSS and @media print, you can customize the page and specify which elements should be visible when printing. For example, you may hide the toolbar and footer of the component, so only the calendar is visible.
Here is a runnable sample that demonstrates the approach: https://blazorrepl.telerik.com/wfkbbBca54BdZnUk24
The Timeline view currently does not provide the "Show business hours" option as in the other views.
Please add that for the Timeline view similar to the jQuery version of the component.
===
ADMIN EDIT
===
For the time being, you can achieve this functionality with a custom approach by programmatically setting the StartTime and EndTime of the view to equal the WorkDayStart and WorkDayEnd.
Here is a basic example: https://blazorrepl.telerik.com/QyEhvjbO07j1ZvID42.
I would like to be able to change the appointment model in the OnEdit handler for the user, something like:
void EditAppointment(SchedulerEditEventArgs args)
{
var appt = (Appointment)args.Item;
appt.Title = FixMyTitle(appt.Title);
}
string FixMyTitle(string title) { return "something changed"; }
I don't want to allow reoccurring appointments. Is there a way to hide the reoccurring part of the editor so they can't create one? I think a simple way to shut off reoccurring appointments on the entire scheduler would be great.
---
ADMIN EDIT
At the moment, a custom edit form is the only option: https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form
---
I'd like to be able to search and filter the appointments in the Scheduler. Please add support for Searchbox in the Scheduler Toolbar as in the Telerik UI for ASP.NET Core.