Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date.

This can be achieved by:

$checkTime > $today
cell.css = green background

I came across this code snippet on Stack Overflow:

dayRender: function (date, cell) {
    var today = new Date();
    if (date.getDate() === today.getDate()) {
        cell.css("background-color", "red");
    }
}

I attempted to include it after:

defaultView: 'month',

resulting in:

defaultView: 'month',
dayRender: function (date, cell) {
    var today = new Date();
    if (date.getDate() === today.getDate()) {
        cell.css("background-color", "red");
    }
},

However, adding the dayRender function caused the calendar to not display properly.

Here is my full calendar implementation:

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '<?php echo $today;?>',
                        defaultView: 'month',
            editable: false,
            events: [
                <?php echo $calendar_html;?>
            ],
 eventClick: function(event) {
        if (event.url) {
            window.open(event.url);
            return false;
        }
    }

});

    });

Answer №1

Inserted this into my custom stylesheet

.fc-bg-before-current {
    background-color: #cccccc;
}

Also included

class: 'fc-bg-before-current'

in my event elements and it's functioning perfectly :) Discovered the solution after an hour of online searching

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

Clicking on various buttons will trigger the opening of different tabs within a single modal window

Imagine I have two distinct buttons, A and B. Within a single modal window, there exist two tabs labeled as a and b. My goal is to be able to click on A and have tab a displayed in the modal, while clicking on B should reveal tab b within that same modal. ...

Leverage recursion for code optimization

I'm currently working on optimizing a function that retrieves JSON data stored in localStorage using dot notation. The get() function provided below is functional, but it feels verbose and limited in its current state. I believe there's room for ...

Different ways to send data from JavaScript to Python using the 'POST' method

I have this specific section of code from my GAE application that utilizes webapp2 framework to receive data from a form through the post method. class RenderMarksheet(webapp2.RequestHandler): def post(self): regno = self.request.get('content ...

Utilizing Express.js for setting up routes with a default path

In the code snippet below, I am utilizing Express.js: router = express.Router() fs.readdirSync('./controllers').forEach(function (file) { if(file.substr(-3) == '.js') { route = require('./controllers/' + file); ...

Could someone please provide guidance on customizing the appearance of bs5-lightbox?

Looking for some assistance here from the experts :) Currently, I'm utilizing Bootstrap 5 along with this Lightbox library called To activate it, I'm using data-toggle="lightbox" and it's functioning flawlessly. <a href=&quo ...

Repositioning with Flexbox: shifting the middle element to a new line

I have a flex item that contains three divs. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬─ ...

Moving an item to the top of an array in JavaScript/Vue.js: A simple guide

const a = [{ "iso2": "KH", "countryName": "Cambodia", "nationality": "Cambodian" }, { "iso2": "KI", "countryName": "Kiribati", "nationality": "I-Kiribati" }, { "iso2": "KM", "countryName": "Comoros", "nationality": "Como ...

Tips for correcting a React (functional component) error: "Signup Error: TypeError: Cannot read properties of null (reading 'protocol')"

My partner and I successfully developed a complex multi-step registration form that displays all user input data at the end. However, when the user tries to submit the form to create their account, an error occurs with the message "Signup Error: TypeErro ...

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

In order to maintain data integrity, I have implemented a rule where users are allowed to drag images within a specific div. Later on, I need to retrieve the positions of these images within the div. However, it is crucial for my business requirements tha ...

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

"Enhance your browsing experience with Chrome by automatically changing the background when

I am currently using Chrome with a CSS3 background. <h4 class="title-name clearfix"><a href="****************">Fairy Tail - LUCY</a> </h4> My issue is that when I hover my mouse over the title, the ba ...

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

Error: Vue.js is unable to find the reference for "_vm.KisanData" and throws a TypeError

I need assistance in fixing an error that I am encountering. The issue arises in this method where I am using KisanData, but I am unable to resolve it. const API_URL = "http://localhost:3000/User"; export default { name: "home", info(){ ...

Utilize a single JavaScript script to handle numerous HTML forms within the same webpage

I am currently facing an issue with a page that contains multiple forms needing the same JavaScript code. This specific code is designed to add more input fields to the form, which it does successfully. However, the problem lies in the fact that it adds in ...

What is the best 'event' to pair with an <input/> element in iOS/Android development?

Looking for a way to toggle results when a user starts typing in a search field? Here are some event options: mousedown / mouseup touchstart / touchend focus You could also consider using the "change" event instead of "click" to check for text input an ...

Tips for documenting curried functions using Js docs

I'm encountering issues while trying to use Js docs for generating static documentation of my project. When attempting to run the js doc command, I am faced with numerous parse errors specifically in areas where I have curried functions. Strangely, my ...

Utilizing the Sheet Elite API - Step-by-Step Guide for Sending Data to a Designated Sheet Through a POST Request

Recently, I've been working on a project that involves using the Sheet Best API to submit data directly to Google Sheets. However, I'm running into an issue where the data is only being sent to the first sheet out of three. Despite having all the ...

Pictures are not showing up in the gallery after they have been saved

if (action.equals("saveToGallery")) { JSONObject obj = args.getJSONObject(0); String imageSource = obj.has("imageSrc") ? obj.getString("imageSrc") : null; String imageName = obj.has(" ...

How can I make Firefox render the padding in a textarea the identical way as in a div?

In my efforts to ensure a consistent line width inside a textarea across IE8, Firefox, and Safari, I have encountered an issue where Firefox seems to add an extra pixel of padding compared to the other browsers. This results in text wrapping differently an ...

What is the solution using high-order functions?

I am struggling with a problem I came across on the internet. The task at hand is to identify all unique elements in an array that are less than 10, calculate the sum of these elements, and then multiply each element in the array by this sum. I have heard ...