javascript 我如何改变某一天的事件的颜色关于他们的活动？

wyyhbhjk 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(116)

在这个日历中，我想根据活动来改变事件的颜色，例如长事件应该是绿色。
这就是我想要的样本数据。
这是我从我的后端收到的。

{
      '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}
        />

JavaScript

来源：https://stackoverflow.com/questions/75577527/how-can-i-change-the-color-of-events-of-certain-day-regarding-to-their-activitie

2条答案

按热度按时间

w6mmgewl1#

我认为你可以提供 * 颜色 * 和 bgcolor 属性沿着事件对象的其他属性，如果这个包不支持它，使用完整的日历，你肯定可以在完整的日历上这样做，

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

尝试在这个结构上提供。

赞(0）回复(0）举报 2023-02-28

hgncfbus2#

这可以通过处理lib提供的eventPropGetter函数并返回需要应用的样式来实现。

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"
      }
    };
  };

然后你只能通过这样的结构来决定哪个事件更短/更长，

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

];

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 我如何改变某一天的事件的颜色关于他们的活动？

2条答案

相关问题

热门标签

最新问答