Hi there

The scheduler is an amazing component for Blazor, however with our designs we'd need to hijack one of the existing views and make a custom page from that which we don't really want to do if we can get this feature.

Custom Views would work just like any other view, but expose a <ViewTemplate> tag that would allow us to create our own custom view that can leverage on the power of the scheduler without doing anything hacky to achieve the same effect.

For instance a code example can be like:

<SchedulerViews>
    <SchedulerMonthView />
    <SchedulerDayView StartTime="@CurrentDate"></SchedulerDayView>
    <SchedulerCustomView>
        <ViewTemplate Context="view">
            <h1>This is a custom view for the @view.month</h1>
            <TelerikCalendar Date="@item.date" />
        </ViewTemplate>
    </SchedulerCustomView>
</SchedulerViews>

If the Start and End match exactly, the rendering of the Scheduler breaks in Day view. If another view is used, the event looks as if it is rendered on the previous day.

===

ADMIN EDIT

===

A possible workaround for the time being is to use a custom edit form and implement some kind of validation that prevents the user from selecting the same value for the Start and End of an event.

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.

• working version (4.1.0)...
  https://blazorrepl.telerik.com/cdOXvcwQ0378eNBL22
  
• not working version (4.2.0)...
  https://blazorrepl.telerik.com/GxEZvwwG04r4TlwA44

Hi, 

is there a way to use the scheduler to display a month ?

Something similar to this https://docs.dhtmlx.com/scheduler/how_to_start.html

I could have a case where the work week starts on Sunday and ends on Thursday, and I want to be able to denote this in the scheduler.

---

ADMIN EDIT

For the time being, you can consider two options (separately or together):

• use the Multi-day view to make only the desired days visible in the scheduler (its NumberOfDays parameter combined with the scheduler's Date parameter control the start date and how many days will render)
• use CSS like this to remove the darker coloring for non-working slots so that there isn't a visual distinction that is wrong:

      div.k-scheduler .k-scheduler-nonwork,
      div.k-scheduler .k-nonwork-hour {
          background-color: inherit;
      }

---

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

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.

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

Here are some use cases: 

- Highlighting Today slot

- Change background colours for specific dates and/or days - such as weekends

- Change fonts and/or style of numbers on prev/next months days

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.

Hello,

I would like the Scheduler day view to scroll automatically to a defined hour, for example the start of the work day.

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.

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

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.

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/wfkbbBca54BdZnUk24

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