Year View Cell Custom Render

[Kristopher Nguyen]

 I'm trying to customize the cell in the year view with letter instead of appointment indictor.  Is this even possible?  Our client want such customization in the Year view template?

[Vijay Ravi]

Hi Kristopher,

 

Based on your requirement. We prepare the Blazor sample with CellTemplate to customize the year view to show the letter as you mentioned as shown in the below shared code snippet. Refer the shared sample for your reference. Kindly try it out.

 

[index.razor]

 

 

@using Syncfusion.Blazor.Schedule

<div class="component-container">

    <SfSchedule TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

    <ScheduleViews>

        <ScheduleView Option="View.Year"></ScheduleView>

    </ScheduleViews>

    <ScheduleTemplates>

        <CellTemplate>

            <div class="templatewrap">

                @{

                    var date = (context as TemplateContext).Date;

                    if (appointmentSubjects.ContainsKey(date))

                    {

                        <div class="custom-letter">@appointmentSubjects[date]</div>

                    }

                }

            </div>

        </CellTemplate>

    </ScheduleTemplates>

</SfSchedule>

</div>

@code {

    public string[] CustomClass = { "custom-class" };

    DateTime CurrentDate = new DateTime(2020, 2, 14);

    Dictionary<DateTime, string> appointmentSubjects = new Dictionary<DateTime, string>();

    protected override void OnInitialized()

    {

        base.OnInitialized();

        foreach (var appointment in DataSource)

        {

            if (!appointmentSubjects.ContainsKey(appointment.StartTime.Date))

            {

                appointmentSubjects[appointment.StartTime.Date] = appointment.Subject[0].ToString();

            }

        }

    }

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) },

        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }

    };

    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; }

    }

}

<style>

    .e-schedule .e-vertical-view .e-work-hours.custom-class {

        background-color: ivory;

    }

    .custom-letter {

        font-size: 10px;

        color: red;

    }

    .e-appointment-indicator {

       display: none;

    }

    .e-day {

      line-height: 20px !important;

    }

    .templatewrap {

       line-height: 0px;

    }

    .e-work-cells {

       height: 40px !important;

    }

</style>

 

Sample link: https://blazorplayground.syncfusion.com/rtBfjcjeosXidbPB

 

Output screenshot:

 

 

please get back to us if you need any further assistance

 

Regards,

Vijay