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"; }
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();
}
}
}
Hi the lack of Timeline view is preventing me using Telerik Scheduler and urgghhhh feel like I need to shower after mentioning this: am having to use the sh*tty buggy cr*p in the Syncfusion suite at the moment. I would love a timeline view where we can create lanes for resources an also be able to custom style the event with background css (a template)
see attached screen shot
cheers
Neil
I have located an issue with the scheduler in Firefox
It currently is not possible to edit an appointment in Firefox when visiting the following demo page:
https://demos.telerik.com/blazor-ui/scheduler/appointment-editing
Edge and Chrome work as expected.
I noticed this issue in my local project and referred to the demo's to see if I was doing something stupid :-).
I am assuming that the demo's are running in .net 5 and that the demo's are blazor server applications.
Hi,
I have a recurrent event with the following dates:
"Start": "2022-08-01T07:00:00", "End": "2022-08-01T08:00:00", "RecurrenceRule": "FREQ=DAILY;UNTIL=2022-08-04T05:00:00"
https://datatracker.ietf.org/doc/html/rfc5545#section-3.3.10 says:
The UNTIL rule part defines a DATE or DATE-TIME value that bounds the recurrence rule in an inclusive manner. If the value specified by UNTIL is synchronized with the specified recurrence, this DATE or DATE-TIME becomes the last instance of the recurrence. The value of the UNTIL rule part MUST have the same value type as the "DTSTART" property
I generated the events with Thunderbird, synchronized to the caldav-Server and read it from there.
In the Telerik Scheduler I got only 3 occurences of the event: from the 1st to the 3rd.
In Thunderbird I got 4. From the 1st to the 4th. According with the RFC, Thunderbird is right :-)
----------------------- ADMIN EDIT -----------------------
The recurrence generation currently considers the time in the recurring rules. To workaround the issue, you should manually change the until parameter to contain the maximum possible hour, minute and second for the day. Here is an example:
// item is your appointment item
var rule = RecurrenceRule.Parse(item.RecurrenceRule);
if(rule.Until.HasValue)
{
var untilDate = rule.Until.Value;
rule.Until = new DateTime(untilDate.Year, untilDate.Month, untilDate.Day, 23, 59, 59);
}
item.RecurrenceRule = rule.ToString();
--------------------------------------------------------------------
I would like to suggest a new View for the Scheduler: The Scheduler List View / Agenda View.
Unless the other views, it's not based on the usual calender-like view, but more like an "Agenda View". It would be a very good improvement and it's used in most common software products as well (e.g. Outlook).
Sources for inspiration
https://fullcalendar.io/demos - select list view on upper right
https://www.syncfusion.com/blazor-components/blazor-scheduler - search for "Agenda view"
https://docs.devexpress.com/WindowsForms/115961/controls-and-libraries/scheduler/views/agenda-view
https://docs.telerik.com/devtools/winforms/controls/scheduler/views/agenda-view
<TelerikScheduler AllowCreate="@Editing" AllowDelete="@Editing" AllowUpdate="@Editing" OnDelete="@AppointmentDelete" OnEdit="@AppointmentEdit" OnUpdate="AppointmentUpdate" Data=…
The above line breaks only with AllowUpdate.
I default Editing false, then toggle it true in the hosting component and do a InvokeAsync(StateHasChanged).
The result is I can create and delete, but while the appointment hover cursor changes to the hand or arrows and I can see the handlebars to resize the appointment, I'm not able to update the appointment until I switch the SchedulerView. After switching SchedulerView updating works as expected.
Scheduler cells are not aligned correctly in the Timeline View when Bootstrap Theme is used.
To reproduce the problem:
1. Open the following Scheduler Demo:
https://demos.telerik.com/blazor-ui/scheduler/overview
2. Select the Bootstrap Theme
3. Open the Timeline View
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.
A context menu event similar to the grid context menu would be useful for editing functions like cut/copy and paste.
---
ADMIN EDIT
You can use the item template to integrate context menus in the scheduler: https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-context-menu. This also allows you a lot of other customization options like adding tooltips and changing the appearance/information users see at first glance.
For a context menu on the slots - probably this item will expose a template for them so the same approach would apply.
---
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.
Event Popup Edit: Object of type 'Telerik.Blazor.Components.Scheduler.Models.Resource' cannot be converted to type 'System.String'.
When try to click on the Save button in an Event Scheduler Popup window, an error appears.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
---