Dynamic Color for Appointments from databse

[Michael Salzlechner]

Would like to be able to have appointments in different colors based on a property in the appointment class

i see i can use a CssClass but not sure how to use a color from the appointment class that in turn comes from a database. 

was thinking about using the template but the template only covers the areas inside the appointment 

than

[Michael Salzlechner]

never mind. figured it out finally.

[Balasubramanian Sattanathan]

Hi Michael,

Great.

We are happy that you have found a solution at your end.

Regards,
Balasubramanian S

[terry.pascal]

Hi Michael,

I am trying to do exactly the same thing (I think).

I can't use CssClass.

How did you set the appointment color dynamically?

Thanks,

Terry

[Michael Salzlechner]

Terry

trying to remember. i think i used a template. inside the template i used a div and a style with the background color from a db field

something like this

                            <Template>
                                @{
                                    var data = (context as FacilitySchedulerAppointment);

                                    <div class='template-wrap template-wrap-helper' style='background-color:@(data.Color)'>
                                    </div>
                                }
                            </Template>

[Swathi Ravi]

Hi Terry,

How did you set the appointment color dynamically?

To apply the color to the appointment element, you need to provide the color in the appointment field(here, we provided the color in the CategoryColor field of the appointment). So, that we can use the Schedule's EventRendered event to set the color to the respective appointment element, as shown in the snippet below.

Demo: https://blazor.syncfusion.com/demos/scheduler/local-data?theme=fluent

Api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_EventRendered

[dataSource.json]

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">

        <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents>

</SfSchedule>

@code {

   public List<AppointmentData> GetScheduleData()

    {

        List<AppointmentData> appData = new List<AppointmentData>();

        appData.Add(new AppointmentData

            {

                Id = 1,

                Subject = "Explosion of Betelgeuse Star",

                Location = "Space Centre USA",

                StartTime = new DateTime(CurrentYear, 1, 4, 9, 30, 0),

                EndTime = new DateTime(CurrentYear, 1, 4, 11, 0, 0),

                CategoryColor = "#1aaa55"

            });

        appData.Add(new AppointmentData

            {

                Id = 2,

                Subject = "Thule Air Crash Report",

                Location = "Newyork City",

                StartTime = new DateTime(CurrentYear, 1, 5, 12, 0, 0),

                EndTime = new DateTime(CurrentYear, 1, 5, 14, 0, 0),

                CategoryColor = "#357cd2"

            });

        appData.Add(new AppointmentData

            {

                Id = 3,

                Subject = "Blue Moon Eclipse",

                Location = "Space Centre USA",

                StartTime = new DateTime(CurrentYear, 1, 6, 9, 30, 0),

                EndTime = new DateTime(CurrentYear, 1, 6, 11, 0, 0),

                CategoryColor = "#7fa900"

            });

        appData.Add(new AppointmentData

            {

                Id = 4,

                Subject = "Meteor Showers in 2022",

                Location = "Space Centre USA",

                StartTime = new DateTime(CurrentYear, 1, 7, 13, 0, 0),

                EndTime = new DateTime(CurrentYear, 1, 7, 14, 30, 0),

                CategoryColor = "#ea7a57"

           });

        appData.Add(new AppointmentData

            {

                Id = 5,

                Subject = "Milky Way as Melting pot",

                Location = "Space Centre USA",

                StartTime = new DateTime(CurrentYear, 1, 8, 12, 0, 0),

                EndTime = new DateTime(CurrentYear, 1, 8, 14, 0, 0),

                CategoryColor = "#00bdae"

            });

        return appData;

    }

    public void OnEventRendered(EventRenderedArgs<AppointmentData> args)

    {

        Dictionary<string, object> attributes = new Dictionary<string, object>();

     

        attributes.Add("style", "background: " + args.Data.CategoryColor);

      

        args.Attributes = attributes;

    }

}

Regards,

Swathi Ravi

Attachment: blazorscheduleappointmentcolor_2d9b1d1e.zip