Grouping by Room for some time slot and color it by Owner, not a Room
Hi,
just started playing with Scheduler control, and can't wrap my head around it. Here is my sample code:
@page "/"
@using Syncfusion.Blazor.Schedule
@rendermode InteractiveServer
<SfSchedule TValue="AppointmentData" Height="1000px" @bind-SelectedDate="@CurrentDate" StartHour="10:00" EndHour="22:00">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleGroup Resources="@Resources"></ScheduleGroup>
<ScheduleResources>
@* <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@OwnerData" Field="OwnerId" Title="Owner" Name="Owner" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource> *@
<ScheduleResource TItem="ResourceData" TValue="int" DataSource="@RoomData" Field="RoomId" Title="Room" Name="Room" TextField="Text" IdField="Id" ></ScheduleResource>
</ScheduleResources>
<ScheduleViews>
<ScheduleView Option="View.TimelineDay"></ScheduleView>
<ScheduleView Option="View.TimelineWeek"></ScheduleView>
<ScheduleView Option="View.TimelineMonth"></ScheduleView>
<ScheduleView Option="View.TimelineYear"></ScheduleView>
<ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code {
DateTime CurrentDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
public string[] Resources { get; set; } = { "Room" };
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Therapy 1", StartTime = new DateTime(2024, 3, 6, 10, 0, 0) , EndTime = new DateTime(2024, 3, 6, 12, 0, 0), OwnerId=2, RoomId = 2},
new AppointmentData { Id = 2, Subject = "AromaTherapy", StartTime = new DateTime(2024, 3, 6, 15, 0, 0) , EndTime = new DateTime(2024, 3, 6, 19, 0, 0), OwnerId=1, RoomId=1},
new AppointmentData { Id = 2, Subject = "FootMasage", StartTime = new DateTime(2024, 3, 6, 13, 0, 0) , EndTime = new DateTime(2024, 3, 6, 14, 0, 0), OwnerId=3, RoomId=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 RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public int OwnerId { get; set; }
public int RoomId { get; set; }
}
public class ResourceData
{
public int Id { get; set; }
public string Text { get; set; }
public string Color { get; set; }
}
public List<ResourceData> OwnerData { get; set; } = new List<ResourceData> {
new ResourceData{ Text = "Nancy", Id= 1, Color = "#df5286" },
new ResourceData{ Text = "Sue", Id= 2, Color = "#7fa900" },
new ResourceData{ Text = "Cloe", Id= 3, Color = "#ea7a57" }
};
public List<ResourceData> RoomData { get; set; } = new List<ResourceData> {
new ResourceData{ Text = "ROOM 1", Id = 1, Color = "#cb6bb2" },
new ResourceData{ Text = "ROOM 2", Id = 2, Color = "#56ca85" },
new ResourceData{ Text = "ROOM 3", Id = 3, Color = "#7fa900" },
new ResourceData{ Text = "ROOM 4", Id = 4, Color = "#ea7a57" },
new ResourceData{ Text = "ROOM 5", Id = 5, Color = "#5978ee" },
new ResourceData{ Text = "ROOM 6", Id = 6, Color = "#df5225" },
new ResourceData{ Text = "ROOM 7", Id = 7, Color = "#00bdae" }
};
}
I'm trying to assign the Owner (Worker) to the Room for some time slot and color it by Owner, not a Room
Currently, I'm getting appointments colored by room color code
and I would like to be colored by the Owner like this (don't mind dodgy coloring)
Also when edit windows open, would be nice to change Room and Owner, currently I see only Room
Best regards
Dear Ram,
thanks for the sample, but we partially misunderstood each other. If you check this picture
I would like to have, for example
ROOM 1 Nancy 9-10 Steven 11-12
and not
ROOM 1
Nancy 9-10
Steven 11-12
To simulate this I changed a sample a bit, here is the link:
https://blazorplayground.syncfusion.com/hjhJNKXQnqnsnzEq
I added the following 2 lines
Dear Customer,
We have verified your sample and determined that the OwnerId and RoomId within the appointment data are incorrect, which has been identified as the source of the problem. Consequently, we have made adjustments to the most recently provided sample, with the modifications reflected in the code snippet below.
|
List<AppointmentData> DataSource = new List<AppointmentData> { new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 0, 0) , EndTime = new DateTime(2023, 6, 1, 10, 0, 0), OwnerId = 1, RoomId = 1 }, new AppointmentData { Id = 2, Subject = "Meeting 2", StartTime = new DateTime(2023, 6, 1, 11, 0, 0) , EndTime = new DateTime(2023, 6, 1, 12, 0, 0), OwnerId = 2, RoomId = 2 }, new AppointmentData { Id = 3, Subject = "Meeting 3", StartTime = new DateTime(2023, 6, 1, 11, 0, 0) , EndTime = new DateTime(2023, 6, 1, 12, 0, 0), OwnerId = 3, RoomId = 3 }
};
|
To ensure understanding, it's important to note that the RoomId corresponds to
the parent resource, while the OwnerId is associated with the child resource.
These should be accurately linked within the appointment information.
For your
convenience we have prepared modified the sample, kindly check on the sample: https://blazorplayground.syncfusion.com/VZhfNgMBzlJOOGOo
Regards,
Ram
Dear Ram,
thank you for your reply. If I understood correctly from your sample, One Owner is linked to one Room or vice versa.
How can I add Nancy for example to Room 2.
Back to the original question, can I have the following display in any way with your sample:
ROOM 1 Nancy 9-10 Steven 11-12
not like:
ROOM 1
Nancy 9-10
ROOM 2
Steven 11-12
ROOM 3
Michael 11-12
How do I correctly introduce the resources, in your sample when I add a meeting I can
only see the owner of that room, I need to add any Owner to any room.
Maybe rephrase the Owner to User of the room for clearer understanding. I need to assign any User to any room and to have User meeting colored by user color, not the room color
