Question 73712 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

Sample image

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}
        />
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search