I have a requirement to design our own custom add/edit template form for scheduler control.
I looked at custom edit form example and found very helpful, However this example does not demonstrate how to use RecurrenceEditor and use them in custom template.
Hi fellows,
I just wanted to know, if it's possible to use the timeline view in blazor as well (compared to asp.net core?).
And if so, how can I do it?
If not: are there any plans in the pipe for activating this feature?
Best regards
Pascal
I would like to be able to customize the way appointments appear in the calendar. For instance, to have aircraft identifier, arrival and departure airport codes and depart times.
As an example they could work like: https://demos.telerik.com/kendo-ui/scheduler/templates.
I want to hide the 'All Day slot' - I don't want to offer this functionality.
At the moment, you could try CSS like this, but ideally this would be a parameter (maybe on the view):
.no-allday .k-scheduler-head .k-scheduler-group:last-child{
display:none;
}
<div class="no-allday">
<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>
Is it possible to do group scheduling similar to what is done https://demos.telerik.com/aspnet-mvc/scheduler/resources-grouping-horizontal.
If not how do i include kendo in a serverside blazor application?
Cheers
Ian
I would like to alter some special slots in the scheduler like in WPF. Sample images is attached.
The slot should be customizable to define custom size and template.
*** Thread created by admin on customer behalf ***
Other schedule controls have an 'agenda' view that has a chronological list of appointments back to back stacked vertically colored by resource.
It would be great for the telerik scheduler to have a view like this.
At the moment start and end times effectively "round" to the nearest half an hour. This can give the impression of events overlapping when they do not
e.g.
Admin edit: This feature would be similar to the Exact Time Rendering in our WebForms suite: https://demos.telerik.com/aspnet-ajax/scheduler/examples/exacttimerendering/defaultcs.aspx
I want to change what is shown in the scheduler headers, depending on my current culture, and on the view (different things for a week view and for a day view, for example).
Is there a way to customize the resource grouping's header (i.e. Alex, Bob, Charlie)? I understand it displays the text from the Resource, but I would like to be able to customize the HTML displayed so that I can add a tooltip. Would you have a suggestion as to how I can accomplish this?
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);
}
}
}
---
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>