I believe my original error was caused by my appointment data not having an Id property. The following reproduces the error (notice the AppointmentId property and not Id):
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Schedule
<EjsSchedule TValue="AppointmentData"
ModelType="@appointmentModel"
Height="100%"
Width="100%"
CurrentView="View.Month"
SelectedDate="@(new DateTime(2019,12,1))">
<ScheduleViews>
<ScheduleView Option="View.Month"></ScheduleView>
</ScheduleViews>
<ScheduleEventSettings DataSource="@DataSource">
<Template>
@{
var appointment = (context as AppointmentData);
<div class="subject">
@(appointment.Subject + " - " + appointment.Location)
</div>
}
</Template>
</ScheduleEventSettings>
</EjsSchedule>
@code{
private readonly AppointmentData appointmentModel = new AppointmentData();
private List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData{ AppointmentId = Guid.NewGuid(), Subject = "Meeting1", Location="Charleston, SC", Status="Confirmed", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
new AppointmentData{ AppointmentId = Guid.NewGuid(), Subject = "Meeting2", Location="San Diego, CA", Status = "Confirmed", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(1)}
};
public class AppointmentData
{
public Guid AppointmentId { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public string Status { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
}
}
If I change AppointmentId to Id, I no longer receive the original error.
However, there is another error, even if I use the Id property. Unfortunately, this error occurs intermittently. When a meeting is dragged and dropped or resized, the signalR connection is closed with the following in the browser console:
[2019-11-20T18:41:56.206Z] Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'. blazor.server.js:1:5015
log https://localhost:5001/_framework/blazor.server.js:1
stopConnection https://localhost:5001/_framework/blazor.server.js:1
onclose https://localhost:5001/_framework/blazor.server.js:1
close https://localhost:5001/_framework/blazor.server.js:1
stop https://localhost:5001/_framework/blazor.server.js:1
stopInternal https://localhost:5001/_framework/blazor.server.js:1
a https://localhost:5001/_framework/blazor.server.js:1
a https://localhost:5001/_framework/blazor.server.js:1
s https://localhost:5001/_framework/blazor.server.js:1
There is nothing in the .net console. This doesn't happen every time an appointment is dragged and dropped or resize, but occurs after a few times
of moving or resizing. I have generally been able to reproduce it by
resizing and dragging and dropping "meeting 2" 5-7 times. I have also
tried using a separate TemplateArgs class as the model (as shown in
some other examples in your documentation). The same thing occurred.
The following reproduces this error (note the use of the template):
@using Syncfusion.EJ2.Blazor.Schedule
<EjsSchedule TValue="AppointmentData"
ModelType="@appointmentModel"
Height="100%"
Width="100%"
CurrentView="View.Month"
SelectedDate="@(new DateTime(2019,12,1))">
<ScheduleViews>
<ScheduleView Option="View.Month"></ScheduleView>
</ScheduleViews>
<ScheduleEventSettings DataSource="DataSource">
<Template>
@{
var appointment = (context as AppointmentData);
<div class="subject">
@(appointment.Subject + " - " + appointment.Location)
</div>
}
</Template>
</ScheduleEventSettings>
</EjsSchedule>
@code{
AppointmentData appointmentModel = new AppointmentData();
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData{ Id = 1, Subject = "Meeting1", Location="Charleston, SC", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
new AppointmentData{ Id = 2, Subject = "Meeting2", Location="San Diego, CA", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(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; }
}
}
This error occurs event if I simplify the template to:
<Template>
@{
<div class="subject">
@((context as AppointmentData).Subject)
</div>
}
</Template>
However, this error does not occur if I do not use the template at all. That is, the following does not result in the error:
<EjsSchedule TValue="AppointmentData"
ModelType="@appointmentModel"
Height="100%"
Width="100%"
CurrentView="View.Month"
SelectedDate="@(new DateTime(2019,12,1))">
<ScheduleViews>
<ScheduleView Option="View.Month"></ScheduleView>
</ScheduleViews>
<ScheduleEventSettings DataSource="DataSource">
</ScheduleEventSettings>
</EjsSchedule>
@code{
AppointmentData appointmentModel = new AppointmentData();
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData{ Id = Guid.NewGuid(), Subject = "Meeting1", Location="Charleston, SC", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
new AppointmentData{ Id = Guid.NewGuid(), Subject = "Meeting2", Location="San Diego, CA", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(1)}
};
public class AppointmentData
{
public Guid 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; }
}
}