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

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

reactjstypescriptvisual-studio-codeenumsvscode-snippets

Unable to access individual checkbox with Selenium in Java

I am looking to select the Store Pickup Available checkbox on the following page: http://www.target.com/c/pants-shorts-baby-toddler-boys-clothing/-/N-59yk1#navigation=true&viewType=medium&sortBy=newest&isleaf=true&navigationPath=59yk1& ...

javahtmlseleniumxpathcheckbox

ng2-table ways to customize the appearance of a particular row

Hey there, I'm currently new to Angular 2 and working with ng2-table. I've successfully added a table like the one shown here to my website. Now, I'm trying to figure out how to add color to specific rows within the table. Following the ste ...

htmlcssangulartypescriptng2-bootstrap

Is the form being submitted with the href attribute?

Does this code ensure security? <form id="form-id"> <input type='text' name='name'> <input type='submit' value='Go' name='Go'/></form> <a href="#" onclick="docume ...

javascripthtml

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

Using RadStyleSheetManager for Optimizing CSS Caching

After implementing the RadStyleSheetManager in my master pages using the given code snippet, I noticed a significant improvement in the performance of my web application. In Internet Explorer 8, the number of dynamically generated WebResource.axd files had ...

cssasp.netcachinginternet-explorer-8telerik

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg

What is the reason behind an inline element being able to have an explicit width when floating?

When trying to set the width for an inline element <span> within a table-row containing multiple span elements, I encountered difficulty. However, after adding float: left, I was finally able to adjust the width. What is the reason behind the initia ...

css

What strategies can be employed to reduce the need for numerous if-else statements in my JavaScript code?

In my input form, users have the ability to make edits. I need to send only the data that has been changed by the user. Currently, I am repeating the same lines of code multiple times to compare and determine what data needs to be sent. Is there a more e ...

javascriptreactjs

Deliver the event target within the data-bind click HTML

I am having trouble sending the event target when passing parameters in data-bind. <button class="tablinks" data-bind="click:$root.notify.bind(this, 1, 'foo');" id="defaultOpen">PRINCIPAL</button> self.notify = function (str, id, e) ...

javascriptjqueryhtmlknockout.js

Utilizing a map loop to efficiently exchange information among various components

Attempting to transition from one component to another, with the second component requiring only one item from the array of the first component The issue arises when the second component iterates through the entire array up to the last element and display ...

reactjsreact-hooks

Can delayed validation be implemented for a control in react-form-hook?

One challenge I am facing is implementing a custom validation for an Input field with the mode set to "onChange". The custom validation involves checking if the user input text is present in an array of strings. However, there is concern that as the array ...

reactjsmaterial-uireact-forms

Utilizing React JS Styled-Components to Import Images from the Public Directory

I've been attempting to set the image as a background-image from the public folder using styled-components. I've tried the following: import styled from "styled-components"; import Background from 'process.env.PUBLIC_URL + /images/ ...

javascriptcssreactjsstyled-componentsstyling

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

having difficulty applying border color to input when clicked

Is there a way to change the border color of an input field on an onClick event? In my scenario, if the 'Other' radio button is selected and a user attempts to save without entering any value in the input field, I want the border color of the in ...

javascriptjquerycss

I have created a textbox with a button, but I am unsure of how to delete it

var emailFields = document.getElementById('emails'), addLinkButton = document.createElement('a'), fieldTemplate = emailFields.getElementsByTagName('div'), currentFieldCount = fieldTemplate.length, maxFields ...

javascripthtml

What is causing my nested class to be treated as a sibling rather than a child in HTML code

I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...

htmlcss

Having trouble with NextJs router 404 error when refreshing the page on Digital Ocean?

I am currently working with a NextJs project that has been exported as a static site and is being hosted on Digital Ocean's App platform. I am using next/router to handle routing within the application. One issue that I have encountered is when attem ...

reactjsroutesnext.jsdigital-ocean

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

jquerycssjquery-cycle2

Chat box custom scrollbar always positioned at the bottom

I have a personalized chat box where I included overflow-y for scrolling functionality. However, every time I input a message in the text box, it displays at the top of the scrollbar window. Is there a way to automatically show the most recent message I ...

javascripthtmlcss