How can I change the color of events of certain day regarding to their activities?

Question

So in this calendar, I want to change the color of event depending to their activities, so for example the long event should have a color green.

so this is the sample data i'm trying to get.

this is what I received from my backend.

  {
      'title': 'All Day Event very long title',
      'allDay': true,
      'start': new Date(2023, 1, 1),
      'end': new Date(2023, 1, 6),
      'event': 'regular'
    },
    {
      'title': 'Long Event',
      'start': new Date(2023, 1, 1),
      'end': new Date(2023, 1, 1),
      'event':'holiday',
    },

Front.js

<Calendar

    views={["day", "agenda", "work_week", "month"]}
    selectable
    localizer={localizer}
    defaultDate={new Date()}
    defaultView="month"
    events={eventsData}
    style={{ height: "95%" }}
    onSelectEvent={(event) => alert(event.title)}
    onSelectSlot={handleSelect}
        />

score 1 · Answer 1 · answered Feb 27 '23 at 07:41

I think you can provide color and bgcolor attributes along with other properties on event object, If this package doesn't support's it, Use Full calendar, You surely can do that on full calendar,

events={[
          {
            groupId: '2023-02-05',
            title: 'Full Time',
            allDay: true,
            backgroundColor: '#A685DB',
            textColor: 'white',
            borderColor: '#A685DB',
            start: '2023-02-05T12:00',
          },
          {
            groupId: '2023-02-05',
            title: 'KLB003',
            backgroundColor: '#E31BCF',
            textColor: 'white',
            borderColor: '#E31BCF',
            start: '2023-02-05T14:00',
          }]

Try supplying on this structure.

score 0 · Answer 2 · answered Feb 27 '23 at 10:24

It is possible by handling eventPropGetter function provided by lib and returing your style that needs to be applied.

const eventPropGetter = (event) => {
    console.log("event", event.isLong);
    if (event.isLong) {
      return {
        style: {
          backgroundColor: "#f0ad4e",
          borderRadius: "0px",
          opacity: 0.8,
          color: "white",
          border: "none"
        }
      };
    }

    // Customize styles for short events
    return {
      style: {
        backgroundColor: "#5cb85c",
        borderRadius: "0px",
        opacity: 0.8,
        color: "white",
        border: "none"
      }
    };
  };

And then you only decide which event is shorter/longer by structuring like this,

export const events = [
  {
      'title': 'All Day Event very long title',
      'allDay': true,
      'start': new Date(2023, 1, 1),
      'end': new Date(2023, 1, 6),
      'event': 'regular',
      //one more key here
      'isLong': true
    },
    {
      'title': 'Long Event',
      'start': new Date(2023, 1, 1),
      'end': new Date(2023, 1, 1),
      'event':'holiday',
      //one more key here
      'isLong': false
    },

];

How can I change the color of events of certain day regarding to their activities?

2 Answers2