1. Home
  2. Forum
  3. Blazor
  4. Room Scheduler

Room Scheduler

I am trying to replicate an example but with local data and i keep getting an ezxception thrown index is out of range.


Please can you identify the issue with the below code?


<div class="control-section">

    <div class="content-wrapper">

        <SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">

            <ScheduleWorkHours Start="08:00" End="18:00"></ScheduleWorkHours>

            <ScheduleViews>

                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay">

                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale>

                </ScheduleView>

                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineWeek">

                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale>

                </ScheduleView>

            </ScheduleViews>

            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup>

            <ScheduleResources>

                <ScheduleResource TItem="AppointmentData" TValue="string" DataSource="@Appointments" Field="Room" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>

            </ScheduleResources>

            <ScheduleTemplates>

                <HeaderIndentTemplate>

                    <div class="e-resource-text"><div class="name">Rooms</div><div class="type">Type</div><div class="capacity">Capacity</div></div>

                </HeaderIndentTemplate>

                <ResourceHeaderTemplate>

                    @{

                        var card = (context as TemplateContext).ResourceData as RoomData;

                        <div class='template-wrap'>

                            <div class="room-name">@card.Name</div>

                            <div class="room-type">@card.Type</div>

                            <div class="room-capacity">@card.Capacity</div>

                        </div>

                    }

                </ResourceHeaderTemplate>

            </ScheduleTemplates>

            <ScheduleEventSettings DataSource="@Appointments">

                <ScheduleField>

                    <FieldSubject Title="Travel Summary" Name="Subject"></FieldSubject>

                    <FieldLocation Title="Source" Name="Location"></FieldLocation>

                    <FieldDescription Title="Comments" Name="Description"></FieldDescription>

                    <FieldStartTime Title="Departure Time" Name="StartTime"></FieldStartTime>

                    <FieldEndTime Title="Arrival Time" Name="EndTime"></FieldEndTime>

                </ScheduleField>

            </ScheduleEventSettings>

        </SfSchedule>

    </div>

</div>

@code{

    private View CurrentView = View.TimelineWeek;

    DateTime CurrentDate = new DateTime(2020, 2, 14);

    public string[] GroupData = new string[] { "Room" };

    List<AppointmentData> Appointments = new List<AppointmentData>

{

        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 08, 0, 0) , EndTime = new DateTime(2020, 2, 13, 09, 0, 0), Room = "Spare 1" },

        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 09, 0, 0) , EndTime = new DateTime(2020, 2, 15, 10, 0, 0), Room = "Spare 2" },

        new AppointmentData { Id = 3, Subject = "France", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 11, 0, 0), Room = "Spare 3" },

        new AppointmentData { Id = 4, Subject = "England", StartTime = new DateTime(2020, 2, 15, 11, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), Room = "Spare 1" },

        new AppointmentData { Id = 5, Subject = "Spain", StartTime = new DateTime(2020, 2, 15, 12, 0, 0) , EndTime = new DateTime(2020, 2, 15, 13, 0, 0), Room = "Spare 2" },

        new AppointmentData { Id = 6, Subject = "Italy", StartTime = new DateTime(2020, 2, 15, 13, 0, 0) , EndTime = new DateTime(2020, 2, 15, 14, 0, 0), Room = "Spare 3" },

        new AppointmentData { Id = 7, Subject = "Portugal", StartTime = new DateTime(2020, 2, 16, 14, 0, 0) , EndTime = new DateTime(2020, 2, 15, 15, 0, 0), Room = "Spare 1" }

    };

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public string Location { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public string Description { get; set; }

        public bool IsAllDay { get; set; }

        public string Room { get; set; }

        public string RecurrenceRule { get; set; }

        public string RecurrenceException { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

    }


    List<RoomData> Rooms = new List<RoomData>

{

        new RoomData { Id = 1, Name = "Spare 1", Color = "ea7a57" , Capacity = 10, Type = "Conference" },

        new RoomData { Id = 2, Name = "Spare 2", Color = "#7fa900" , Capacity = 5, Type = "Cloud" },

        new RoomData { Id = 3, Name = "Spare 3", Color = "#5978ee" , Capacity = 7, Type = "Space" },

    };

    public class RoomData

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Color { get; set; }

        public int Capacity { get; set; }

        public string Type { get; set; }

    }

}


4 Replies
PN Praveenkumar Narasimhanaidu Syncfusion Team October 20, 2021 11:56 AM UTC

Hi Martin, 

Greetings from Syncfusion support..! 

We have validated your reported problem and checked the shared code. We let you know that you have improperly assigned some fields in your shared code which is the cause for the reported problem. We have modified your code and prepared a sample for your reference which can be downloaded from the following link. 
 
 

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView"> 
 
            <ScheduleWorkHours Start="08:00" End="18:00"></ScheduleWorkHours> 
 
            <ScheduleViews> 
 
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay"> 
 
                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale> 
 
                </ScheduleView> 
 
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineWeek"> 
 
                    <ScheduleViewTimeScale SlotCount="1" Interval="60"></ScheduleViewTimeScale> 
 
                </ScheduleView> 
 
            </ScheduleViews> 
 
            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup> 
 
            <ScheduleResources> 
 
                <ScheduleResource TItem="RoomData" TValue="string" DataSource="@Rooms" Field="Room" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource> 
 
            </ScheduleResources> 
 
            <ScheduleTemplates> 
 
                <HeaderIndentTemplate> 
 
                    <div class="e-resource-text"><div class="name">Rooms</div><div class="type">Type</div><div class="capacity">Capacity</div></div> 
 
                </HeaderIndentTemplate> 
 
                <ResourceHeaderTemplate> 
 
                    @{ 
 
                        var card = (context as TemplateContext).ResourceData as RoomData; 
 
                        <div class='template-wrap'> 
 
                            <div class="room-name">@card.Name</div> 
 
                            <div class="room-type">@card.Type</div> 
 
                            <div class="room-capacity">@card.Capacity</div> 
 
                        </div> 
 
                    } 
 
                </ResourceHeaderTemplate> 
 
            </ScheduleTemplates> 
 
            <ScheduleEventSettings DataSource="@Appointments"> 
 
                <ScheduleField> 
 
                    <FieldSubject Title="Travel Summary" Name="Subject"></FieldSubject> 
 
                    <FieldLocation Title="Source" Name="Location"></FieldLocation> 
 
                    <FieldDescription Title="Comments" Name="Description"></FieldDescription> 
 
                    <FieldStartTime Title="Departure Time" Name="StartTime"></FieldStartTime> 
 
                    <FieldEndTime Title="Arrival Time" Name="EndTime"></FieldEndTime> 
 
                </ScheduleField> 
 
            </ScheduleEventSettings> 
 
        </SfSchedule> 
 
    </div> 
 
</div> 
 
@code{ 
 
    private View CurrentView = View.TimelineWeek; 
 
    DateTime CurrentDate = new DateTime(2020, 2, 14); 
 
    public string[] GroupData = new string[] { "MeetingRoom" }; // Need to group with schedule resource “Name” field 
 
    List<AppointmentData> Appointments = new List<AppointmentData> 
 
{ 
 
        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 08, 0, 0) , EndTime = new DateTime(2020, 2, 13, 09, 0, 0), Room = "Spare 1" }, 
 
        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 09, 0, 0) , EndTime = new DateTime(2020, 2, 15, 10, 0, 0), Room = "Spare 2" }, 
 
        new AppointmentData { Id = 3, Subject = "France", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 11, 0, 0), Room = "Spare 3" }, 
 
        new AppointmentData { Id = 4, Subject = "England", StartTime = new DateTime(2020, 2, 15, 11, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), Room = "Spare 1" }, 
 
        new AppointmentData { Id = 5, Subject = "Spain", StartTime = new DateTime(2020, 2, 15, 12, 0, 0) , EndTime = new DateTime(2020, 2, 15, 13, 0, 0), Room = "Spare 2" }, 
 
        new AppointmentData { Id = 6, Subject = "Italy", StartTime = new DateTime(2020, 2, 15, 13, 0, 0) , EndTime = new DateTime(2020, 2, 15, 14, 0, 0), Room = "Spare 3" }, 
 
        new AppointmentData { Id = 7, Subject = "Portugal", StartTime = new DateTime(2020, 2, 16, 14, 0, 0) , EndTime = new DateTime(2020, 2, 15, 15, 0, 0), Room = "Spare 1" } 
 
    }; 
 
    public class AppointmentData 
 
    { 
 
        public int Id { get; set; } 
 
        public string Subject { get; set; } 
 
        public string Location { get; set; } 
 
        public DateTime StartTime { get; set; } 
 
        public DateTime EndTime { get; set; } 
 
        public string Description { get; set; } 
 
        public bool IsAllDay { get; set; } 
 
        public string Room { get; set; } 
 
        public string RecurrenceRule { get; set; } 
 
        public string RecurrenceException { get; set; } 
 
        public Nullable<int> RecurrenceID { get; set; } 
 
    } 
 
 
 
    List<RoomData> Rooms = new List<RoomData> 
 
{ 
        // with the help of “Id” field only you can assign appointments to particular resource  
        new RoomData { Id = "Spare 1", Name = "Spare 1", Color = "ea7a57" , Capacity = 10, Type = "Conference" }, 
 
        new RoomData { Id = "Spare 2", Name = "Spare 2", Color = "#7fa900" , Capacity = 5, Type = "Cloud" }, 
 
        new RoomData { Id = "Spare 3", Name = "Spare 3", Color = "#5978ee" , Capacity = 7, Type = "Space" }, 
 
    }; 
 
    public class RoomData 
 
    { 
 
        public string Id { get; set; } 
 
        public string Name { get; set; } 
 
        public string Color { get; set; } 
 
        public int Capacity { get; set; } 
 
        public string Type { get; set; } 
 
    } 

For more information about scheduler resources and grouping, please refer following documentation link. 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Praveenkumar 


MA Martin October 20, 2021 12:38 PM UTC

Hi Praveenkumar,

Thank very much for the update, I knew it would be something simple i had wrong.

I have tested your provided demo and have found an issue. When you click in cell to add a new appointment, select More Details you get the following error:

Capture.PNG

Thanks, Martin



MA Martin replied to Martin October 20, 2021 12:50 PM UTC

I have just noticed if i set AllowMultiple = "false" in ScheduleResources I do not get the error.


            <ScheduleResources>


                <ScheduleResource TItem="RoomData" TValue="string" DataSource="@Rooms" Field="Room" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="false"></ScheduleResource>


            </ScheduleResources>


PN Praveenkumar Narasimhanaidu Syncfusion Team October 21, 2021 12:56 PM UTC

Hi Martin, 

Thanks for your updates. 

We have validated the reported problem at our end and let you know that you have used ScheduleResource TValue as a string while you added AllowMultiple as true which is the reason for the reported problem. To overcome this, you can use ScheduleResource TValue as string[] while AllowMultiple is true and use string while AllowMultiple is false. Please refer to the code snippet. 

<ScheduleResource TItem="RoomData" TValue="string[]" DataSource="@Rooms" Field="Room" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource> 

Kindly try the above solution and get back to us If you need any further assistance. 

Regards, 
Praveenkumar 


Loader.
Up arrow icon