How to highlight the events with different colors in the FULL CALENDAR Component?
2 Likes
Just add the color key property in the JSON path.
(Property → “color”: “green” )
example →
[
{
“id”: “0”,
“title”: “Appointment 1”,
“start”: “2023-07-12T11:00:00”,
“color”:“green”
},
{
“id”: “1”,
“title”: “Appointment 2”,
“start”: “2023-07-14T11:00:00”,
“color”:“orange”
},
{
“id”: “2”,
“title”: “Appointment 3”,
“start”: “2023-07-18T14:00:00”,
“color”:“orange”
},
{
“id”: “3”,
“title”: “Appointment 4”,
“start”: “2023-07-10T18:00:00”,
“color”:“Red”
},
{
“id”: “4”,
“title”: “Appointment 5”,
“start”: “2023-07-02T10:00:00”,
“color”:“blue”
},
{
“id”: “5”,
“title”: “Appointment 6”,
“start”: “2023-07-05T08:00:00”,
“end”: “2023-07-05T11:00:00”,
“color”:“green”
},
{
“id”: “6”,
“title”: “Appointment 7”,
“start”: “2023-07-27T22:00:00”,
“end”: “2023-07-27T23:00:00”,
“color”:“orange”
},
{
“id”: “7”,
“title”: “Appointment 8”,
“start”: “2023-07-22T08:00:00”,
“end”: “2022-07-22T11:00:00”,
“color”:“Red”
},
{
“id”: “8”,
“title”: “Appointment 9”,
“start”: “2023-06-29T08:00:00”,
“end”: “2022-06-29T11:00:00”,
“color”:“green”
}
]
2 Likes