【问题标题】:Change background color FullCalender react更改背景颜色 FullCalendar 反应
【发布时间】:2021-06-15 08:03:57
【问题描述】:

我在响应中使用 FullCalender 来显示显示事件的日历。 目前我正在使用日网格,我想知道如何更改网格的背景颜色。

today's date background color is always yellow

This is how it looks on other days

我想要做的是更改背景颜色,以便当前日期网格与其余日期一样具有白色背景

    <div>
    <FullCalendar
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="timeGridDay"
        nowIndicator={true}
        selectable
        selectOverlap={() => {
          return false;
        }}
        eventResizableFromStart
        droppable
        allDayMaintainDuration
      />
    </div>

【问题讨论】:

    标签: html css reactjs fullcalendar fullcalendar-5


    【解决方案1】:

    API 中没有此选项,但如果您使用浏览器的元素检查器浏览呈现的日历,您会看到颜色是使用简单的 CSS 类设置的 - 当天设置了 fc-day-today 类。

    因此,如果我们只是设置一个规则来覆盖 fullCalendar 规则,我们可以将背景颜色更改为我们想要的任何颜色:

    .fc-day-today {
      background-color: #ffffff !important;
    }
    

    演示:https://codepen.io/ADyson82/pen/jOBXmqy

    【讨论】:

    • 我应该如何在我的组件中实现 css 更改?
    • @Abdul9401 我对反应抱歉一无所知。但这只是一个 CSS 规则……难道你没有可以放入的 .css 文件吗?
    • 我没有,但即使我这样做,它将如何覆盖反应组件
    猜你喜欢
    • 2013-07-30
    • 1970-01-01
    • 2022-11-12
    • 1970-01-01
    • 2021-07-11
    • 1970-01-01
    • 2018-09-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多