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.
I don't want this feature and I would like to hide this button.
At the moment, CSS like this can do the job, but this should be a parameter on the component or the particular view.
.no-businesshours .k-scheduler-footer {
display:none;
}
<div class="no-businesshours">
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
</div>
I have a scheduler, and am using a custom Edit handler. I need to support recurrence, and editing recurring events. When the use double-clicks on a recurring event, there is a dialog that asks whether they would like to edit the occurrence or the entire series.
I want to be able to capture the results of this dialog. `SchedulerEditEventArgs` doesn't include any attributes that track this.
===========
ADMIN EDIT
===========
The implementation of this enhancement could be covered by either including the corresponding attributes in the SchedulerEditEventArgs or by exposing a Template for the RecurrenceDialog.
Note: You may also check the Ability to directly edit an occurence or the series, without the prompt asking you to choose feature request as the implementation of both features will most likely be covered in one release.
Currently, creating an appointment is made by double clicking on a slot. The case of single clicking to create an appointment is already in another request.
If you take the example of Google agenda, you can create an appointment by selecting directly the dates by sweeping with one long single click.
Here would be the request:
An event similar to SchedulerEditEventArgs (containing Start, End, IsAllDay, IsNew ; IsCancelled: to be able to have a custom edit form) that would be triggered with one long single click selecting the dates/hours slots of the appointment.
---
ADMIN EDIT
---
Although the discussion targets different functionality, we are keeping the current request open as we consider it valid to ensure better UX for appointment creation on mobile devices and we would like to see how the demand for that goes.
I would like an indicator of the current time in the scheduler that updates itself (as often as every minute) without the need to reload the page. Like in the Reach suite: https://www.telerik.com/kendo-react-ui/components/scheduler/views/day/#toc-current-time-marker
---
ADMIN EDIT
You may find interesting this related request for more precise appointment rendering: https://feedback.telerik.com/blazor/1451797-more-precise-representation-of-start-end-times-on-scheduler-exact-time-rendering. If so, Vote for it and Follow it as well.
---
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, you can only initiate editing/creating of an appointment in the Scheduler on double click. I'd like to be able to trigger these operations on single click.
It will be nice to have EditOn parameter to allow choosing if editing/creating will fire on single or double click of an appointment/slot.
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();
}
}
}
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.
The following date in the Scheduler RecurrenceRule cannot be parsed and is ignored:
RecurrenceRule = "FREQ=DAILY;UNTIL=20210722T000000"
According to the RFC5545 specification, this should be a valid date format.
These formats will work:
RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00"
RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00.000Z"
EDIT:
This is my work-around. It captures the date portion of the UNTIL clause, converts it into the date string style that Telerik can understand, then reassembles the rule stringprivate string TransformRecurrenceRule()
{
const string untilSeparator = "UNTIL=";
var ruleParts = RecurrenceRule.Split(untilSeparator, StringSplitOptions.RemoveEmptyEntries);
if (ruleParts.Length <= 1)
{
// There was no Until clause to worry about
return RecurrenceRule;
}
// Save the first part of the rule
var ruleBeginning = ruleParts[0];
// Split the date part of the until clause from any following clauses
var remainingClauses = ruleParts[1].Split(';', 2, StringSplitOptions.RemoveEmptyEntries);
//Save the date part of the until clause
var untilDate = remainingClauses[0];
// Save any following clauses with the `;` replaced
var ruleEnding = "";
if (remainingClauses.Length == 2)
{
ruleEnding = $";{remainingClauses[1]}";
}
// Convert the until date into .net parsable format
const string format = "yyyyMMddTHHmmss";
var date = DateTime.ParseExact(untilDate, format, CultureInfo.InvariantCulture);
var dateStr = date.ToString("yyyy-MM-ddTHH:mm:ss");
// recombine rule components
var newRuleParts = new[] {ruleBeginning, untilSeparator, dateStr, ruleEnding};
var newRule = string.Join("",newRuleParts);
return newRule;
}
I'm in the same situation as the OP in this post: https://www.telerik.com/forums/how-do-you-always-edit-series-when-editing-a-recurring-appointment
In my case, I'm working with with the Blazor Scheduler Component. How can I disable the prompt and automatically select "Edit the series"? Or at least "disable" the "Edit this occurrence" button when updating/deleting an appointment?
---
ADMIN EDIT
Note: You may also check the Differentiate "edit current occurrence" and "edit the series" in the RecurrenceDialog feature request as the implementation of both features will most likely be covered in one release.
Please comment with suggestions on how you would like to see this feature exposed. Ideally it might have to be dynamic so you can toggle it based on conditions, so perhaps it could be a parameter (not flexible), an event argument to OnEdit, or a separate event/setting.
Here is a sample code you can try to achieve this - comments in the code explain how the templates are used to capture the edit action and some JS is used to fake-click the button to simulate a user choice:
@inject IJSRuntime _jsInterop
@* this errors suppression is a hack to make this sample succinct
move this script to a proper place for a real app*@
<script suppress-error="BL9992">
function clickSchedulerPromptButton(btnIndex) {
setTimeout(function () {
var buttons = document.querySelectorAll(".k-window-content .text-right button");
if (buttons && buttons.length >= btnIndex) {
var chosenButton = buttons[btnIndex];
chosenButton.click();
}
}, 50);
}
</script>
@* appearance setting for the template - make the custom template tall as the appointment to capture all clicks *@
<style>
.tallAppt {
height: 100%;
}
</style>
<TelerikScheduler Data="@Appointments"
OnUpdate="@UpdateAppointment"
OnCreate="@AddAppointment"
OnDelete="@DeleteAppointment"
AllowCreate="true" AllowDelete="true" AllowUpdate="true"
@bind-Date="@StartDate" Height="600px" @bind-View="@CurrView">
<ItemTemplate>
@{
SchedulerAppointment appt = context as SchedulerAppointment;
}
<div title="@appt.Start - @appt.End" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
</ItemTemplate>
<AllDayItemTemplate>
@{
SchedulerAppointment appt = context as SchedulerAppointment;
}
<div title="@appt.Start.ToShortDateString() - @appt.Title" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
</AllDayItemTemplate>
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
@code {
//async void so we don't block the execution
//we will have a small timeout in the script to let it wait for the popup
async void ChooseEditMode(SchedulerAppointment appt)
{
// check if we have a recurring appointment or a member of one
if (appt.RecurrenceId != null || !string.IsNullOrEmpty(appt.RecurrenceRule))
{
int btnIndexToClick = 0;//the first button - edit instance
// make it 1 for the second button - the series
await _jsInterop.InvokeVoidAsync("clickSchedulerPromptButton", btnIndexToClick);
}
}
//the rest is sample data and sample CUD operations handling
// sample data and scheduler settings
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); //the time portion is important
List<SchedulerAppointment> Appointments { get; set; }
async Task UpdateAppointment(SchedulerUpdateEventArgs args)
{
SchedulerAppointment item = (SchedulerAppointment)args.Item;
await MyService.Update(item);
await GetSchedulerData();
}
async Task AddAppointment(SchedulerCreateEventArgs args)
{
SchedulerAppointment item = args.Item as SchedulerAppointment;
await MyService.Create(item);
await GetSchedulerData();
}
async Task DeleteAppointment(SchedulerDeleteEventArgs args)
{
SchedulerAppointment item = (SchedulerAppointment)args.Item;
await MyService.Delete(item);
await GetSchedulerData();
}
public class SchedulerAppointment
{
public Guid Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public List<DateTime> RecurrenceExceptions { get; set; }
public Guid? RecurrenceId { get; set; }
public SchedulerAppointment()
{
Id = Guid.NewGuid();
}
}
async Task GetSchedulerData()
{
Appointments = await MyService.Read();
}
protected override async Task OnInitializedAsync()
{
await GetSchedulerData();
}
// the following static class mimics an actual data service that handles the actual data source
// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
public static class MyService
{
private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>()
{
new SchedulerAppointment
{
Title = "Board meeting",
Description = "Q4 is coming to a close, review the details.",
Start = new DateTime(2019, 12, 5, 10, 00, 0),
End = new DateTime(2019, 12, 5, 11, 30, 0)
},
new SchedulerAppointment
{
Title = "Vet visit",
Description = "The cat needs vaccinations and her teeth checked.",
Start = new DateTime(2019, 12, 2, 11, 30, 0),
End = new DateTime(2019, 12, 2, 12, 0, 0)
},
new SchedulerAppointment
{
Title = "Planning meeting",
Description = "Kick off the new project.",
Start = new DateTime(2019, 12, 6, 9, 30, 0),
End = new DateTime(2019, 12, 6, 12, 45, 0)
},
new SchedulerAppointment
{
Title = "Trip to Hawaii",
Description = "An unforgettable holiday!",
IsAllDay = true,
Start = new DateTime(2019, 11, 27),
End = new DateTime(2019, 12, 05)
},
new SchedulerAppointment
{
Title = "Morning run",
Description = "Some time to clear the head and exercise.",
Start = new DateTime(2019, 11, 27, 9, 0, 0),
End = new DateTime(2019, 11, 27, 9, 30, 0),
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
}
};
public static async Task Create(SchedulerAppointment itemToInsert)
{
itemToInsert.Id = Guid.NewGuid();
_data.Insert(0, itemToInsert);
}
public static async Task<List<SchedulerAppointment>> Read()
{
return await Task.FromResult(_data);
}
public static async Task Update(SchedulerAppointment itemToUpdate)
{
var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
if (index != -1)
{
_data[index] = itemToUpdate;
}
}
public static async Task Delete(SchedulerAppointment itemToDelete)
{
if (itemToDelete.RecurrenceId != null)
{
// a recurrence exception was deleted, you may want to update
// the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
// and remove the current exception date from the list of its RecurrenceExceptions
}
if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
{
// a recurring appointment was deleted that had exceptions, you may want to
// delete or update any exceptions from the data source - look for
// items where theItem.RecurrenceId == itemToDelete.Id
}
_data.Remove(itemToDelete);
}
}
}
---
That's pretty weird but nevertheless very specific: if the Scheduler is loaded with POCO objects from EntityFramework with LazyLoading enabled (Castle.Proxies objects) them the k-event-drag-hint box is not shown (!)
It took me some time to figure it out...
is it possible to drag between hours to create a new appointment like in the attached recording?