Events don't always render
I am using a database to get all Agents and appointment into the Scheduler. Sometimes when we use view switch between horizontal or vertical view, the event on the range doesn't show, it's like there is no appointment.
Toolbar and Scheduler
<div class="schedule-container e-droppable">
<div class="title-container">
<Syncfusion.Blazor.Navigations.SfToolbar @ref="ToolBar" Width="auto" Height="60px" OverflowMode="OverflowMode.Scrollable" ScrollStep="100">
<Syncfusion.Blazor.Navigations.ToolbarItems>
<Syncfusion.Blazor.Navigations.ToolbarItem PrefixIcon="e-day" TooltipText="Jour" Text="@Localizer["Day"]" OnClick="@(() => ChangeView(View.Day))">
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem PrefixIcon="e-icons e-week" TooltipText="Semaine" Text="@Localizer["Week"]" OnClick="@(() => ChangeView(View.Week))">
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem PrefixIcon="e-icons e-month" TooltipText="Mois" Text="@Localizer["Month"]" OnClick="@(() => ChangeView(View.Month))">
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem TooltipText="Vue horizontale">
<Template>
<div style="height: 46px; line-height: 23px;margin-left:12px;">
<div class="icon-child" style="text-align: center;">
<SfSwitch @ref="ViewRef" TChecked="bool" @bind-Checked="ShowTimeLine" ValueChange="@(e => ChangeView(CurrentView))"></SfSwitch>
</div>
<div class="text-child" style="font-size: 14px;">@Localizer["HorizontaView"]</div>
</div>
</Template>
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem Type="@ItemType.Separator" CssClass="mr-3 ml-3"></Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem TooltipText="Vue Fiches de poste">
<Template>
<div style="height: 46px; line-height: 23px;">
<div class="icon-child" style="text-align: center;">
<SfSwitch TChecked="bool" @bind-Checked="ShowFiche">
</SfSwitch>
</div>
<div class="text-child" style="font-size: 14px;">@Localizer["PostView"]</div>
</div>
</Template>
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem Type="@ItemType.Separator" CssClass="mr-3 ml-3"></Syncfusion.Blazor.Navigations.ToolbarItem>
<!-- ZONE VACATION-->
<Syncfusion.Blazor.Navigations.ToolbarItem TooltipText="ChoiceType" Type="ItemType.Input">
<Template>
<div>
<SfDropDownList TItem="ChoiceVacation" TValue="ChoiceVacation" DataSource="@ChoixVacs" @bind-Value="@choice">
<DropDownListEvents TValue="ChoiceVacation" TItem="ChoiceVacation" ValueChange="ChangeChoice">
</DropDownListEvents>
<DropDownListFieldSettings Text="Choix">
</DropDownListFieldSettings>
</SfDropDownList>
</div>
</Template>
</Syncfusion.Blazor.Navigations.ToolbarItem>
<Syncfusion.Blazor.Navigations.ToolbarItem TooltipText="Agents">
<Template>
<div style="display:flex;align-items:center;">
<div>
<SfChip @ref="Chips" Selection="Syncfusion.Blazor.Buttons.SelectionType.Multiple" SelectedChips=@FilterSelected>
<ChipEvents OnClick="ChangeResource">
</ChipEvents>
<ChipItems>
</ChipItems>
</SfChip>
</div>
</div>
</Template>
</Syncfusion.Blazor.Navigations.ToolbarItem>
</Syncfusion.Blazor.Navigations.ToolbarItems>
</Syncfusion.Blazor.Navigations.SfToolbar>
</div>
<div class="e-droppable">
<SfSchedule @ref="Calendar" TValue="VacationData" @bind-SelectedDate="@SelectedDate" AllowResizing="false" AllowDragAndDrop="false" StartHour="6:00" EndHour="22:00" WorkDays="@WorkDays" CurrentView="@CurrentView">
<ScheduleEventSettings TValue="VacationData" DataSource="@Vacations">
<ScheduleField>
<FieldSubject Title="Raison">
</FieldSubject>
<FieldRecurrenceId Name="RecurrenceID"></FieldRecurrenceId>
</ScheduleField>
</ScheduleEventSettings>
<ScheduleEvents TValue="VacationData" OnActionBegin="DeleteElement" ActionCompleted="ActionVacation" OnCellClick="OnCellClick" OnEventClick="OnEventClick" EventRendered="OnEventRendered">
</ScheduleEvents>
<ScheduleGroup EnableCompactView="true" Resources="@GroupData">
</ScheduleGroup>
<ScheduleResources>
<ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@Agents" Field="UserId" Title="Agent1" Name="Agents" TextField="PrenomNOM" IdField="IdxUser" StartHourField="StartHour" EndHourField="EndHour" AllowMultiple="true">
</ScheduleResource>
</ScheduleResources>
<ScheduleTimeScale SlotCount="1" Interval="60">
</ScheduleTimeScale>
<ScheduleViews>
<ScheduleView Option="View.Day">
</ScheduleView>
<ScheduleView Option="View.TimelineDay"></ScheduleView>
<ScheduleView Option="View.Week" FirstDayOfWeek="1" Interval="1"></ScheduleView>
<ScheduleView Option="View.TimelineWeek" FirstDayOfWeek="1" Interval="1"></ScheduleView>
<ScheduleView Option="View.Month" FirstDayOfWeek="1"></ScheduleView>
<ScheduleView Option="View.TimelineMonth" FirstDayOfWeek="1"></ScheduleView>
</ScheduleViews>
<ScheduleTemplates>
<ResourceHeaderTemplate>
@{
var user = (context as TemplateContext).ResourceData as ResourceData; if ((int)CurrentView >= (int)View.TimelineDay)
{
<div>
<div class="template-wrap" style="justify-content:space-evenly;padding:0px 5px;">
<div class="resource-image">
@if (user.photo != null && user.photo.ImageByte != null)
{
<img style="border-radius:50%" src="@user.photo.GetSizedImage(50)" />
}
else
{
<img style="width:50px;height:50px;border-radius:50%" src="/images/utilisateur.png" />
}
</div>
<div class="resource-details" style="width:120px;">
<div class="resource-name">
<span>@(user.PrenomNOM)</span>
</div>
<div class="resource-vacation" style="display:flex;">
<span>@(vac.Where(v => v.Id == user.IdxVacation).First().Designation)</span>
<span style="cursor:pointer; margin-left:10px;" @onclick="(() => ShowEditUser(user.IdxUser))"><i class="fas fa-pencil-alt"></i></span>
</div> </div> <span class="vertical-line line color-@( (Agents.Select(ag => ag.IdxUser).IndexOf(user.IdxUser)+1) % 10)"></span> </div> </div> } else { <div> <div class="template-wrap"> <div class="resource-image"> @if (user.photo != null && user.photo.ImageByte != null) { <img style="border-radius:50%" src="@user.photo.GetSizedImage(50)" /> } else { <img style="width:50px;height:50px;border-radius:50%" src="/images/utilisateur.png" /> } </div> <div class="resource-details"> <div class="resource-name" style="display:flex;"> <span>@(user.PrenomNOM)</span> </div> <div class="resource-vacation"> <span>@(vac.Where(v => v.Id == user.IdxVacation).First().Designation)</span> <span style="cursor:pointer; margin-left:10px;" @onclick="(() => ShowEditUser(user.IdxUser))"><i class="fas fa-pencil-alt"></i></span> </div> </div> </div> <hr class="horizontal-line line color-@( (Agents.Select(ag => ag.IdxUser).IndexOf(user.IdxUser)+1) % 10)" /> </div> } } </ResourceHeaderTemplate> <EditorTemplate> <input type="hidden" name="Id" class="e-field" value="@((context as VacationData).Id)" /> <input type="hidden" name="FicheId" class="e-field" value="@((context as VacationData).FicheId)" /> <table cellpadding="8"> <tr id="info"> <td colspan="4"> <SfTextBox Placeholder="@Localizer["Schedule_Editor_Title"]" FloatLabelType="FloatLabelType.Always" ID="Subject" @bind-Value="@((context as VacationData).Subject)"></SfTextBox> </td> <td colspan="4"> <SfDropDownList Placeholder="@Localizer["Schedule_Editor_Category"]" FloatLabelType="FloatLabelType.Always" TValue="int" TItem="CategoriePlanning" ID="Categorie" DataSource="@cat" @bind-Value="@((context as VacationData).CategorieId)"> <DropDownListFieldSettings Text="Nom" Value="Id"></DropDownListFieldSettings> </SfDropDownList> </td> </tr> <tr id="time"> @if ((context as VacationData).IsAllDay) { <td colspan="4"> <SfDatePicker Placeholder="@Localizer["Schedule_Editor_StartDate"]" FloatLabelType="FloatLabelType.Always" @bind-Value="@((context as VacationData).StartTime)"></SfDatePicker> </td> <td colspan="4"> <SfDatePicker Placeholder="@Localizer["Schedule_Editor_EndDate"]" FloatLabelType="FloatLabelType.Always" @bind-Value="@((context as VacationData).EndTime)"></SfDatePicker> </td> } else { <td colspan="4"> <SfDateTimePicker Placeholder="@Localizer["Schedule_Editor_StartDate"]" FloatLabelType="FloatLabelType.Always" @bind-Value="@((context as VacationData).StartTime)"></SfDateTimePicker> </td> <td colspan="4"> <SfDateTimePicker Placeholder="@Localizer["Schedule_Editor_EndDate"]" FloatLabelType="FloatLabelType.Always" @bind-Value="@((context as VacationData).EndTime)"></SfDateTimePicker> </td> } </tr> <tr id="allday"> <td colspan="2" style="width:30%"> <SfCheckBox @bind-Checked="@((context as VacationData).IsAllDay)" Label="@Localizer["Schedule_Editor_AllDay"]" LabelPosition="Syncfusion.Blazor.Buttons.LabelPosition.After"></SfCheckBox> </td> <td colspan="3" style="width:40%"> <SfDropDownList TItem="ResourceData" TValue="int" DataSource="@Agents" @bind-Value="@((context as VacationData).UserId)" Placeholder="@Localizer["Schedule_Editor_User"]" FloatLabelType="FloatLabelType.Always"> <DropDownListFieldSettings Text="PrenomNOM" Value="IdxUser" /> </SfDropDownList> </td> </tr> @if (action != Syncfusion.Blazor.Schedule.CurrentAction.EditOccurrence) { <tr id="recurrence"> <td colspan="8"> <SfRecurrenceEditor @bind-Value="@((context as VacationData).RecurrenceRule)"></SfRecurrenceEditor> </td> </tr> } <tr id="description"> <td colspan="8"> <SfTextBox Placeholder="@Localizer["Schedule_Editor_Description"]" FloatLabelType="FloatLabelType.Always" Multiline="true" @bind-Value="@((context as VacationData).Description)"></SfTextBox> </td> </tr> </table> </EditorTemplate> </ScheduleTemplates> </SfSchedule> </div> </div>
Function to render Event with a specific color
public void OnEventRendered(EventRenderedArgs<VacationData> args)
{
Dictionary<string, object> attributes = new Dictionary<string, object>();
var categorie = cat.Where(cat => cat.Id == args.Data.CategorieId).First();
attributes.Add("style", "background:" + categorie.Color);
args.Attributes = attributes;
}
Function to change Scheduler view on button and switch.
private void ChangeView(View view)
{
this.CurrentView = view;
switch (this.CurrentView)
{
case View.Day:
case View.TimelineDay:
this.CurrentView = ViewRef.Checked ? View.TimelineDay : View.Day;
break;
case View.Week:
case View.TimelineWeek:
this.CurrentView = ViewRef.Checked ? View.TimelineWeek : View.Week;
break;
case View.WorkWeek:
case View.TimelineWorkWeek:
this.CurrentView = ViewRef.Checked ? View.TimelineWorkWeek : View.WorkWeek;
break;
case View.Month:
case View.TimelineMonth:
this.CurrentView = ViewRef.Checked ? View.TimelineMonth : View.Month;
break;
}
Calendar.RefreshEventsAsync();
StateHasChanged();
}
SIGN IN To post a reply.
1 Reply
SK
Satheesh Kumar Balasubramanian
Syncfusion Team
April 7, 2022 03:07 PM UTC
Hi Geraud,
We have checked the shared snippets and let you know that you have to use two way binding of CurrentView property to resolve your reported issue. Also, you can remove RefreshEventsAsync and StateHasChanged in ChangeView which is not necessary when we use two way binding of CurrentView property.
Index.razor:
<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" CssClass="schedule-overview" Width="100%" Height="100%" @bind-SelectedDate="@SelectedDate" @bind-CurrentView="@CurrentView"> </SfSchedule> |
Kindly try the attached sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.
- Replicate the issue in attached sample (or) share simple issue replicating sample if possible
- Share all schedule and code block related code snippets
Regards,
Satheesh Kumar B
Attachment: ScheduleComponent_d3b5acf8.zip
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
GB Geraud Bertrand
- Apr 6, 2022 08:06 AM UTC
- Apr 7, 2022 03:07 PM UTC
