Events not displaying text

[Rodrigo]

Hello!,

Another thing that I noticed that's happening is sometimes the text on the events are not rendered but the tool tip still shows the relevant information Please check the image below.

Regards,

Rodrigo

[Alagumeena Kalaiselvan]

Hi Rodrigo, 

Thanks for contacting Syncfusion support! 

We have validated with reported issue “Events doesn’t display the text”. As we said in the forum 151438 the reported issue also considered at our end and will include this fix for our Volume 1, SP-1 release on end of April, 2020. You can track this issue status by the below link  

https://www.syncfusion.com/feedback/12224/appointment-color-customization-through-field-mapping 

Kindly be patience until then. 

Regards 

Alagumeena.K 

[Alagumeena Kalaiselvan]

Hi Rodrigo, 

Sorry for the inconvenience caused! 

We have reevaluated your query and appointment color customization can be done through by either EventRendered event or Template. As per your shared code, both ways are handled in your sample. So, we suggest you to revert the EventRendered event from your sample and apply the color using Template. We hope the provided solution may overcome the reported issue “Event not displaying text”. We have modified the already shared sample for your reference. Refer below code block for that 

<EjsSchedule @ref="LookSchedule" TValue="ViewModel.Look" Height="100%" Width="100%" CurrentView="View.Month" AllowDragAndDrop="false" AllowResizing="false" 

             RowAutoHeight="true" FirstDayOfWeek="1" ShowQuickInfo="false" SelectedDate="@(new DateTime(2020, 2, 1))"> 

    <ScheduleWorkHours Highlight="false" /> 

    <ScheduleEvents TValue="ViewModel.Look" Navigating="NavigatingHandler" OnPopupClose="PopupClose" /> 

    <ScheduleViews> 

        <ScheduleView Option="View.Month" /> 

        <ScheduleView Option="View.Week"> 

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

        </ScheduleView> 

        <ScheduleView Option="View.Day" /> 

    </ScheduleViews> 

   <ScheduleEventSettings DataSource="@DataSource" AllowAdding="false" AllowDeleting="false" EnableTooltip="true"> 

        <Template> 

            @{ 

                var entity = (context as ViewModel.Look); 

                <div class="template-wrap" style="background: @(entity.CategoryColor)">  // To Apply color to the appointment 

                    <div class="subject">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.Craft} - {entity.Status}")</div> 

                </div> 

            } 

        </Template> 

        <TooltipTemplate> 

            @{ 

                var entity = (context as ViewModel.Look); 

                <div class="tooltip-wrap"> 

                    <div class="content-area"> 

                        <div class="name">@entity.Craft</div> 

                        <div class="city">@entity.Site</div> 

                        <div class="time">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.EndTime.ToUniversalTime().ToString("hh:mm tt")}")</div> 

                        <div class="time">@($"{TimeSpan.FromSeconds(entity.Duration).ToString(@"mm")} min")</div> 

                    </div> 

                </div> 

            } 

        </TooltipTemplate> 

    </ScheduleEventSettings> 

    ... 

</EjsSchedule> 

~ViewModel.cs 

public class ViewModel 

    { 

        public class Look 

        { 

            public int Id { get; set; } 

            public string Subject { get; set; } 

            public string Name { get; set; } 

            public string Time { get; set; } 

            public string DateTime { get; set; } 

            public DateTime StartTime { get; set; } 

            public DateTime EndTime { get; set; } 

            public string Status { get; set; } 

            public string Site { get; set; } 

            public string Craft { get; set; } 

            public double Duration { get; set; } 

            public string Organizations { get; set; } 

            public string CategoryColor { get; set; }  // It is essential to add CategoryColor field to customize color 

        } 

    } 

Also, you can get this sample by the following link 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleComponent-524508201 

Kindly try out with shared solution and get back to us, If this issue may still persist. 

Regards 

Alagumeena.K 

[Vengatesh Maniraj]

Hi Rodrigo, 

We are glad to announce that our Essential Studio 2020 Volume 3 Release v18.3.0.35  is rolled out and in that release, We've included the option to customize appointments from build-in CSS class field mapping. So please update your package to this version to include the feature. 

NuGet Link: https://www.nuget.org/packages/Syncfusion.Blazor/18.3.0.35  

Release notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#scheduler  

UG link: https://blazor.syncfusion.com/documentation/scheduler/appointments/?no-cache=1#using-cssclass  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh