How to show more details?

We want to be able to display more details than the default (subject and datetime) is this possible?


1 Reply

AK Alagumeena Kalaiselvan Syncfusion Team April 9, 2020 12:48 PM UTC

Hi Alex, 

Thanks for contacting Syncfusion support! 

We have validated your reported case “How to show more details” and it is possible with scheduler by using EventTemplate property which can helps you to format and change the default appearance of the events. We have prepared a sample based on your requirement and refer the below code for that. 

<SfSchedule TValue="WebinarData" Width="100%" Height="650px" SelectedDate="@(new DateTime(2020, 1, 16))"> 
    <ScheduleViews> 
        <ScheduleView Option="View.Week">     
            <EventTemplate>            // Here you can customize the event appearance 
                @{ 
                    var webinarData = (context as WebinarData); 
                    <div class='template-wrap'> 
                        <div class="subject">@(webinarData.Subject)</div> 
                        <div class="time">Time: @(getTimeString(webinarData.StartTime)) - @(getTimeString(webinarData.EndTime))</div> 
                        <div class="description">@(webinarData.Description)</div> 
                    </div> 
                } 
            </EventTemplate> 
        </ScheduleView> 
        <ScheduleView Option="View.TimelineWeek"> 
            <EventTemplate> 
                @{ 
                    var webinarData = (context as WebinarData); 
                    <div class='template-wrap'> 
                        <div class="subject">@(webinarData.Subject)</div> 
                    </div> 
                } 
            </EventTemplate> 
        </ScheduleView> 
    </ScheduleViews> 
    <ScheduleEventSettings TValue="WebinarData" DataSource="@DataSource"> 
    </ScheduleEventSettings> 
</SfSchedule> 
... 

Also you can get this sample by the following link 


Please try with shared sample and get back to us, If you need further assistance. 

Regards 
Alagumeena.K 


Loader.
Up arrow icon