CODEWITHSUNDEEP
angularkendo-uikendo-scheduler
vsam
vsam

Reputation: 642

Angular 6 : Different background color for events in Kendo-Schduler

Is there a way to style the background color of events depending on the type of event in kendo-scheduler in Angular 6? I know that I can globally set the event background colors using CSS:

.k-event{background-color: #000;}

but this doesn't help me when I have different types of events with different colors. Is there any workaround for this?

As an example like this photo : like this

my data structure of events is like the following code:

{
        start:        startDate,
        end:          endDate,
        title:        holidayTitle,
        isAllDay:     true,
        description:  '',
        color :       holidayColor
}

Upvotes: 0

Views: 992

Answers (2)

Pankaj Goel
Pankaj Goel

Reputation: 155

const baseData: any[] = [
    {
        "TaskID": 1,
        "Title": "Test 1",
        "Start": "2021-09-12T01:00:00.000Z",
        "End": "2021-09-17T09:00:00.000Z",
        "Type": "Color1"
    },
    {
        "TaskID": 2,
        "Title": "Test 2",
        "Start": "2021-09-19T17:00:00.000Z",
        "End": "2021-09-24T06:00:00.000Z",
        "Type": "Color2"
    },
    {
        "TaskID": 3,
        "Title": "Test 3",
        "Start": "2021-09-21T07:00:00.000Z",
        "End": "2021-09-24T08:00:00.000Z",
        "Type": "Color3"
    }    
];

export const sampleData = baseData.map(dataItem => (
    <SchedulerEvent>{
        id: dataItem.TaskID,
        start: new Date(dataItem.Start),
        end: new Date(dataItem.End),
        title: dataItem.Title,
        type: dataItem.Type,
    }
));

in .ts file

public getEventClass = (args: EventStyleArgs) => {
    return args.event.dataItem.type;
  };

in .html file

<kendo-scheduler [eventClass]="getEventClass"

Add eventClass

in Css

:host ::ng-deep .Color1.k-event {
  background-color: Red;
}

Upvotes: 1

Thivagar
Thivagar

Reputation: 619

You should define your resources in your class component .ts file and put your preferred colors like below

public resources: any[] = [
            {
                field: "Events",
                dataSource: [
                    { text: "Value1", value: 1, color: "#f8a398" },
                    { text: "Value2", value: 2, color: "#51a0ed" }
                ],
                multiple: true,
                title: "Events"
            }
        ]

Please refer to this updated Demo link and Docs for more clarifications

Upvotes: 0

Related Questions