Completed
Last Updated: 09 Sep 2021 08:37 by ADMIN
Al
Created on: 04 Mar 2020 13:16
Category: Scheduler
Type: Feature Request
5
Expose OnClick event on the appointments
I would like to click on a schedule item and be able to open a linked page or item. For instance if the schedule item Title is a File # I would like to be able to click on that item and go to a file # details page. Is that possible? 
2 comments
ADMIN
Marin Bratanov
Posted on: 20 Jan 2021 09:44

Hello,

This is also now possible through the appointment templates: https://docs.telerik.com/blazor-ui/components/scheduler/templates/appointment. You can hook up you own @onclick to the element in your template (that could have height:100% to span the entire appointment element height).

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Svetoslav Dimitrov
Posted on: 04 Mar 2020 13:36

Hello Al,

This is a code snippet that works on a double click on the appointment. It will navigate you to a page with details for the selected appointment.

@inject NavigationManager navigation

<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" 
                  Height="600px" Width="800px" 
                  AllowUpdate="true"
                  OnEdit="@PreventEditAndNavigate">
    
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
</TelerikScheduler>

@code {    
    public void PreventEditAndNavigate(SchedulerEditEventArgs args)
    {
        args.IsCancelled = true;

        int itemId = ((SchedulerAppointment)args.Item).Id;
        
        string url = $"path/details/{itemId}";
        navigation.NavigateTo(url);
    }

    public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
    List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
    {
            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 11, 26, 11, 30, 0),
                End = new DateTime(2019, 11, 26, 12, 0, 0),
                Id = 1
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 11, 25, 9, 30, 0),
                End = new DateTime(2019, 11, 25, 12, 45, 0),
                Id = 2
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 07),
                Id = 3
            }
    };

    public class SchedulerAppointment
    {
        public int 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; }
    }
}

Regards,
Svetoslav Dimitrov
Progress Telerik

 UI for Blazor