Unplanned
Last Updated: 24 Oct 2024 12:32 by ADMIN

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);
        }
    }
}

 

---

Completed
Last Updated: 15 Oct 2024 11:50 by ADMIN
Release 2024 Q4 (Nov)

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

Completed
Last Updated: 15 Oct 2024 11:50 by ADMIN
Release 2024 Q4 (Nov)

I am using the Scheduler component in Telerik for Blazor and am getting an intermittent exception being thrown, usually when navigating quickly through the application (ie. navigating to another page before the initial page containing the Scheduler has finished rendering).

This is the exception received:

===

ADMIN EDIT

===

The Scheduler must render in the browser and then it measures and adjusts its layout with JavaScript. You may hit this error if the component is disposed before or during this JavaScript call.

Example use cases:

  • Navigating to a different page before the full component initialization

    Workaround: 

    The possibility to hit that is higher in case the Scheduler needs more time to initialize (e.g. it has to render a large set of appointments). In such a scenario, it will be useful to optimize the time needed for loading the appointments, so that the initial component rendering is not blocked by waiting all the data. For that purpose, you may load the appointments on demand - not fetching all possible appointments at once, but only when the user should see them. An example of such an implementation you may find here: https://github.com/telerik/blazor-ui/tree/master/scheduler/load-appointments-on-demand.

  • Disposing the component during runtime (e.g. depending on the screen size)https://blazorrepl.telerik.com/wIuHliEt40SutaBI53.

    Workaround: 

    Potential solution in this case - render component after calculating the screen size: https://blazorrepl.telerik.com/coEnPWON4570Wna007.
Completed
Last Updated: 10 Oct 2024 07:47 by ADMIN
Release 2024 Q4 (Nov)
Created by: Neil
Comments: 6
Category: Scheduler
Type: Feature Request
18

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>

Completed
Last Updated: 08 Oct 2024 08:09 by ADMIN
Release 2024 Q4 (Nov)

When you have an event that starts between 11:30pm and 12:00am - the default last slot of the Timeline view, the Scheduler throws the following error:

Error: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection
Reproduction: https://blazorrepl.telerik.com/mxOdwWlS36flJdQO37.

 

Completed
Last Updated: 04 Oct 2024 08:39 by ADMIN
Release 2024 Q4 (Nov)

When using Vertical Grouping by multiple resources and Timeline View, the group rows without appointments do not have min-height as the rest of the group rows. Thus, they appear shorter which causes an offset of the events on the next rows.

Steps to reproduce:

  1. Load Timeline View Demo
  2. Delete Charlie's event in Small meeting room

===

ADMIN EDIT

===

A possible workaround for the time being is to set min-height to all rows. Apply this style only when Timeline view is selected, so this does not break the rendering of the other views.

Example: https://blazorrepl.telerik.com/mHYmwsOt30fjTZ6a32.

 

Completed
Last Updated: 04 Oct 2024 08:39 by ADMIN
Release 2024 Q4 (Nov)

I am using a Scheduler with vertical grouping by multiple resources. In Timeline view, some of the appointments appear with an offset and are not correctly aligned in the cell. In some cases, the appointment is even rendered outside the slot it is associated with.

The issue seems to occur as of UI for Blazor 4.2.0. The same configuration worked fine in 4.1.0.

Completed
Last Updated: 04 Oct 2024 08:39 by ADMIN
Release 2024 Q4 (Nov)

I have a problem with Scheduler TimelineView. When there are a bit more appointments in the first resource group, the last appointment from the last group is positioned incorrectly/outside of the Scheduler component.

I think the CSS parameter "top" is calculated in the wrong mode. See the attached recording.

Completed
Last Updated: 30 Sep 2024 09:18 by ADMIN
Release 2024 Q4 (Nov)

If the Start and/or End fields are DateTime? double-clicking on an empty slot does not open the form. This makes it impossible to create new events.

The issue occurs as of UI for Blazor 3.7.0.

Reproduction: https://blazorrepl.telerik.com/mnEHQNvl48HDc8xb30.

Unplanned
Last Updated: 26 Sep 2024 22:16 by Rob
Created by: Shannon
Comments: 1
Category: Scheduler
Type: Feature Request
4

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/cnutklOC55T5sV0J15.

Declined
Last Updated: 25 Sep 2024 10:34 by ADMIN
Created by: DRASKO
Comments: 4
Category: Scheduler
Type: Bug Report
0

When adding / editing the last time slot for the day, SchedulerEditEventArgs has wrong End value.

For example Start value is 28.12.2023. 23:30:00 and end value is 28.12.2023. 00:00:00. Should instead be 28.12.2023. 23:59:59 or 29.12.2023. 00:00:00.

 

Unplanned
Last Updated: 18 Sep 2024 11:53 by Mike
Created by: Mike
Comments: 0
Category: Scheduler
Type: Feature Request
1
I am using resource grouping with Day view only. I have 5 groups and showing the date for each column/group is repetitive, and a waste of screen space. I want to remove the date header as I am already displaying the date in a different element on the page.
Completed
Last Updated: 05 Sep 2024 14:01 by ADMIN
Release 2024 Q4 (Nov)
Created by: Sherrie
Comments: 0
Category: Scheduler
Type: Feature Request
24
Please add support for Toolbar Template, so I can control what is rendered in the Scheduler Toolbar.
Unplanned
Last Updated: 23 Aug 2024 12:59 by ADMIN
Created by: Andy
Comments: 2
Category: Scheduler
Type: Feature Request
3

Now that we can have more than 2 events in a day in Month View, we need to add an AppointmentHeight parameter to be able to make the appointments taller in height to accommodate longer titles.

 

ADMIN EDIT

An alternative for the time being is to show the longer content by using the appointment templates and the Tooltip component. For example:

https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-tooltips

Planned
Last Updated: 23 Aug 2024 07:08 by ADMIN
Scheduled for 2024 Q4 (Nov)

The "Edit Recurring Appointment" modal is only partially visible on mobile which prevents the user from proper editing.

Unplanned
Last Updated: 21 Aug 2024 13:58 by Leonard
The current functionality allows dragging items from an external component to the Scheduler, but not the other way around. I would like to be able to drag and drop appointments between multiple Schedulers.
Completed
Last Updated: 05 Aug 2024 13:31 by ADMIN
Release 6.1.0

When I change the date while I'm in the month view, the slot doesn't change to the newly calculated ItemsPerSlot value.

To reproduce, open the calendar and set the date to the 3rd of December: REPL link.

Unplanned
Last Updated: 26 Jul 2024 13:35 by ADMIN
Created by: Janick
Comments: 4
Category: Scheduler
Type: Feature Request
1
When the Scheduler works with a large dataset the rendering can get laggy. I need to use a rendering optimization feature such as the virtual scrolling in the Grid. 
Unplanned
Last Updated: 26 Jul 2024 13:34 by Janick
Created by: Janick
Comments: 0
Category: Scheduler
Type: Feature Request
1

I'd like to have a data virtualization feature (similar to the OnRead event), so I can load only small chunks of data (appointments) specifically for the current page/view.

===

ADMIN EDIT

===

Currently, you can achieve similar functionality by handling the DateChanged and ViewChanged events of the Scheduler to load only the relevant appointments for the selected period.

You can find an example here: Load Scheduler Appointments on Demand.

Unplanned
Last Updated: 19 Jul 2024 10:07 by n/a
Created by: n/a
Comments: 0
Category: Scheduler
Type: Feature Request
1

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.

1 2 3 4 5 6