Customize the background color of FullCalendar in a React application

I'm currently using FullCalendar in my react app to showcase a calendar with events displayed. Right now, I have a day grid set up and I'm interested in changing the background color of the grid.

The background color for today's date is always yellow

Here's how it appears on other days

My goal is to modify the background color so that the current day grid has a white background similar to the rest of the days.

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

Answer №1

If you're looking to customize the color of the current day on a calendar and can't find an option in the API, don't worry! Simply inspect the elements using your browser's developer tools and you'll notice that the color is set using a CSS class called fc-day-today.

By overriding the default style with your own rule, you can easily change the background color to any color you prefer:

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

Check out this demo for reference: https://codepen.io/ADyson82/pen/jOBXmqy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on customizing image borders/masks with hover effects

Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...

javascriptcssreactjs

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

As I delve into development with WordPress and the Gutenberg editor, my goal is to incorporate TypeScript into the mix. However, I encounter a type error when trying to utilize the useSelect() hook in conjunction with an associated function from the core/e ...

reactjstypescriptwordpresswordpress-gutenberg

Mastering the Art of Crafting an Effortless Slide Showcase

I have created a carousel that works fine except for one issue: when I reach the last image or go back from the first image, I want the image to be displayed. For example, when you click the right arrow after reaching the last image, it should show the fir ...

javascriptjquerycssslider

Material-UI's Select component does not support using a Fragment as a child element. It is recommended to provide an array of elements instead

Dealing with Material UI, I encountered an issue: index.js:1 Material-UI: the Select component is not accepting a Fragment as a child. It's recommended to provide an array instead. Here is my code snippet: import { Container, Grid, Select, MenuItem ...

reactjsmaterial-ui

My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly. Here is the code snippet causing the problem: /* STYLING FOR NAVIGATION MENU */ .nav-bar { width: 100%; height: 80px; ...

htmlcssdrop-down-menumenunav

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

javascriptcssreactjsflexboxmaterial-ui

Aligning elements vertically within a parent container

I am facing a problem where elements are not aligning vertically in the center of their parent div. CSS: /* Main body structure */ body{ font-size:0.5em; } .main-wrapper { width: 90%; margin: auto; background-color: #efefef; } * { ...

csshtmlvertical-alignment

Steps for choosing an option in MUI select list using jest

I am looking for a way to automate tests for a Material UI select component using Jest. Is there a way to select an option from the list of options in the Material UI component and confirm that its value has been successfully populated in Jest? I have se ...

javascriptreactjsjestjsmaterial-ui

The Google authentication API is throwing a OPERATION_NOT_ALLOWED error with status code 400

Utilizing the following API: , everything seems correctly implemented with the token and parameters matching the documentation. However, it continues to result in a 400 OPERATION_NOT_ALLOWED error. Param:- { "email": "<a href="/cdn-cgi/l/email-p ...

reactjsfirebasegoogle-authentication

Tips for avoiding overflow while utilizing animations

In my current project, I am facing an issue with a container div that has the CSS property overflow: auto which cannot be removed. Inside this container, there is another div that toggles between showing and hiding using an animation triggered by a button ...

htmlcss

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

htmlcssangularjs

Testing with mount in React Enzyme, the setState method does not function correctly

I've been experimenting with testing this code block in my React App using Jest and Enzyme: openDeleteUserModal = ({ row }: { row: IUser | null }): any => ( event: React.SyntheticEvent ): void => { if (event) event.preventDefault(); ...

javascriptreactjstypescriptjestjsenzyme

Issues encountered while running MERN tests

After exploring the MERN framework for a new project, I have encountered some discouraging issues. Following the setup instructions using mern-cli, the project is created and runs correctly. However, when trying to execute... npm run test The following e ...

node.jsreactjsmern

Tips for utilizing identical properties across numerous styled elements:

Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows: export const DH6 = styled(H6)` color: ${(props) => (props.white ? "white&qu ...

javascriptcssreactjsreact-nativestyled-components

Tips for saving HTML data locally

Is there a way to persist my HTML element tag data even after the user closes the browser? For example: <div class="classOne" data-random="50"> If I use jQuery to change the data attribute like this: $(".classOne").attr("data-random","40") How ca ...

javascriptjqueryhtml

React-Select causing issues when used alongside MUI Accordion

I'm at a loss. Despite extensive searches on Google and reviewing the react-select and Material UI Accordion documentation, I have been unable to find anyone else who has experienced this issue before. It's surprising given the popularity of thes ...

reactjsmaterial-uiaccordionreact-select

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

c#asp.nethtmlvisual-studio-2010calendarextender

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

htmlcss

How can jQuery determine if multiple selectors are disabled and return true?

I am currently working on a form in which all fields are disabled except for the "textarea" field. The goal is to enable the "valid" button when the user types anything into the textarea while keeping all other inputs disabled. I initially attempted using ...

javascripthtmljqueryforms

Empty the localStorage when terminating the IE process using the Task Manager

Utilizing HTML5 localStorage to keep track of my application session has been a useful feature. Here is a snippet of the code I am currently using: if(typeof(Storage)!=="undefined") { if(sessionStorage.lastname=="Smith") { alert("Your ses ...

javascripthtml