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

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.

When SchedulerGroupOrientation is set to vertical, increasing the height of the `SchedulerResourceGroupHeader` breaks the rendering of the Scheduler cells, which causes misalignment of the appointments. In my scenario, I want to have a Button and an Icon in the group header cell.

Reproduction example: https://blazorrepl.telerik.com/wJElGYvF02XSsN6j42

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, 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

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.

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

Hi the lack of Timeline view is preventing me using Telerik Scheduler and urgghhhh feel like I need to shower after mentioning this: am having to use the sh*tty buggy cr*p in the Syncfusion suite at the moment. I would love a timeline view where we can create lanes for resources an also be able to custom style the event with background css (a template)

see attached screen shot

cheers

Neil

I have located an issue with the scheduler in Firefox

It currently is not possible to edit an appointment in Firefox when visiting the following demo page:

https://demos.telerik.com/blazor-ui/scheduler/appointment-editing

Edge and Chrome work as expected.

I noticed this issue in my local project and referred to the demo's to see if I was doing something stupid :-).

I am assuming that the demo's are running in .net 5 and that the demo's are blazor server applications.

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