How to allow graphic overlapping in timeline view
Hello,
When the purple appointment have a small duration, scheduler have strange behavior and show the appointment like if it overlap precedent appointment :
If the duration is longer : no problem :
How to solve this problem and show all appointment in one line ?
SIGN IN To post a reply.
6 Replies
Hello,
Result of below code :
2 first line are not OK
I would like a result like lines 3 and 4 but with data from line 1 and 2
Here is the code :
@page "/test2"
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" SelectedDate="@CurrentDate" FirstDayOfWeek=1 EnableAutoRowHeight="true" Height="650px">
<ScheduleGroup Resources="@Resources"></ScheduleGroup>
<ScheduleResources>
<ScheduleResource TItem="ResourceData" TValue="int" DataSource="@RoomData" Field="RoomId" Title="Room" Name="Rooms" TextField="RoomText" IdField="Id" ColorField="RoomColor" AllowMultiple="false"></ScheduleResource>
<ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@OwnersData" Field="OwnerId" Title="Owner" Name="Owners" TextField="OwnerText" IdField="Id" GroupIDField="OwnerGroupId" ColorField="OwnerColor" AllowMultiple="true"></ScheduleResource>
</ScheduleResources>
<ScheduleEventSettings DataSource="@DataSource" EnableMaxHeight="true" EnableIndicator="true"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.TimelineDay"></ScheduleView>
</ScheduleViews>
<ScheduleTimeScale Interval="60" SlotCount="1"></ScheduleTimeScale>
</SfSchedule>
@code {
DateTime CurrentDate = new DateTime(2020, 1, 31);
public string[] Resources { get; set; } = { "Rooms", "Owners" };
public List<ResourceData> RoomData { get; set; } = new List<ResourceData>
{
new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" },
new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" }
};
public List<ResourceData> OwnersData { get; set; } = new List<ResourceData>
{
new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00" },
new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398" },
new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1" },
new ResourceData{ OwnerText = "Nancy", Id = 4, OwnerGroupId = 1, OwnerColor = "#ffaa00" },
new ResourceData{ OwnerText = "Steven", Id = 5, OwnerGroupId = 2, OwnerColor = "#f8a398" },
new ResourceData{ OwnerText = "Michael", Id = 6, OwnerGroupId = 1, OwnerColor = "#7499e1" },
new ResourceData{ OwnerText = "Nancy", Id = 7, OwnerGroupId = 1, OwnerColor = "#ffaa00" },
new ResourceData{ OwnerText = "Steven", Id = 8, OwnerGroupId = 2, OwnerColor = "#f8a398" },
new ResourceData{ OwnerText = "Michael", Id = 9, OwnerGroupId = 1, OwnerColor = "#7499e1" }
};
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 6, 30, 0) , EndTime = new DateTime(2020, 1, 31, 7, 0, 0), OwnerId = 1, RoomId = 1 },
new AppointmentData { Id = 2, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 7, 0, 0) , EndTime = new DateTime(2020, 1, 31, 7, 30, 0), OwnerId = 1, RoomId = 1 },
new AppointmentData { Id = 3, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 7, 30, 0) , EndTime = new DateTime(2020, 1, 31, 8, 0, 0), OwnerId = 1, RoomId = 1 },
new AppointmentData { Id = 4, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 6, 30, 0) , EndTime = new DateTime(2020, 1, 31, 7, 0, 0), OwnerId = 4, RoomId = 1 },
new AppointmentData { Id = 5, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 7, 0, 0) , EndTime = new DateTime(2020, 1, 31, 7, 30, 0), OwnerId = 4, RoomId = 1 },
new AppointmentData { Id = 6, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 7, 30, 0) , EndTime = new DateTime(2020, 1, 31, 8, 1, 0), OwnerId = 4, RoomId = 1 },
new AppointmentData { Id = 7, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 9, 50, 0), OwnerId = 3, RoomId = 1 },
new AppointmentData { Id = 8, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 50, 0) , EndTime = new DateTime(2020, 1, 31, 10, 0, 0), OwnerId = 3, RoomId = 1 },
new AppointmentData { Id = 9, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 30, 0) , EndTime = new DateTime(2020, 1, 31, 9, 50, 0), OwnerId = 6, RoomId = 1 },
new AppointmentData { Id = 10, Subject = "Meeting", StartTime = new DateTime(2020, 1, 31, 9, 50, 0) , EndTime = new DateTime(2020, 1, 31, 10, 1, 0), OwnerId = 6, 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 RoomText { get; set; }
public string RoomColor { get; set; }
public string OwnerText { get; set; }
public string OwnerColor { get; set; }
public int OwnerGroupId { get; set; }
}
}
SIGN IN To post a reply.
