Is it possible to customize the background color for particular days in FullCalendar?

Question

Is it possible to customize the background color for particular days in FullCalendar?

How can I set background colors for specific days? While experimenting, I discovered this method:

$('.fc-day15').css('backgroundColor','black');

The only issue is that the colors appear on the 16th day in the calendar grid, not on the actual day. If there was a way to determine the offset from the start of the week to the first day of the month, I could adjust accordingly.

UPDATED APPROACH:

I have come up with a solution that seems to work:

var TheActualDay=15;
var DayOffset=($('#calendar').fullCalendar('getView').start.getTime()-$('#calendar').fullCalendar('getView').visStart.getTime())/(1000 * 60 * 60 * 24);
var DayNumber=(TheActualDay-1)+DayOffset;
$('.fc-day'+DayNumber.toString()).css('backgroundColor','black');

However, I am wondering if there is a more concise way to achieve the same result?

jquery css fullcalendar

Answer 1

Answer №1

Here is a potential solution. Implement the viewDisplay event:

        viewDisplay: function(view) {
            if (view.name == 'month'){ //only in month view 
                var d = view.calendar.getDate(); //select the date to customize cell
                var cell = view.dateCell(d); //find location of cell for date
                var bodyCells = view.element.find('tbody').find('td');//retrieve all cells from current calendar
                var _element = bodyCells[cell.row*view.getColCnt() + cell.col]; //identify specific cell for the date
                $(_element).css('background-color', '#FAA732'); //customize the cell
            }
        }

Answer 2

Here is a potential solution. Implement the viewDisplay event:

        viewDisplay: function(view) {
            if (view.name == 'month'){ //only in month view 
                var d = view.calendar.getDate(); //select the date to customize cell
                var cell = view.dateCell(d); //find location of cell for date
                var bodyCells = view.element.find('tbody').find('td');//retrieve all cells from current calendar
                var _element = bodyCells[cell.row*view.getColCnt() + cell.col]; //identify specific cell for the date
                $(_element).css('background-color', '#FAA732'); //customize the cell
            }
        }

Answer 3

Answer №2

Thank you to Erik Vargas for providing an insightful example. I have made a slight modification to the code in order to display the first and last day of the month in different colors.

viewDisplay: function(view) {  

                    if (view.name == 'month')
                    { //only in month view mode 
                        var start_date = view.start; // represents the first day of the current month
                        var last_date = view.end; // actually the 1st day of the next month                          
                   
                        var start_cell = view.dateCell(start_date); // obtain the cell location for the start date
                        var last_cell = view.dateCell(last_date); // obtain the cell location for the end date                  
                       
                        var bodyCells = view.element.find('tbody').find('td');// retrieve all cells from the current calendar                                                       
                        var _element_firstday = bodyCells[start_cell.row*view.getColCnt() + start_cell.col]; // get specific cell for the start date
                        var _element_lastday = bodyCells[last_cell.row*view.getColCnt() + last_cell.col]; // get specific cell for the end date

                        
                        $(_element_firstday).css('background-color', 'black'); // set the color of the cell representing the first day to black
                        $(_element_lastday).css('background-color', 'blue'); // set the color of the cell representing the last day to blue
                    }                   

        },

Answer 4

Thank you to Erik Vargas for providing an insightful example. I have made a slight modification to the code in order to display the first and last day of the month in different colors.

viewDisplay: function(view) {  

                    if (view.name == 'month')
                    { //only in month view mode 
                        var start_date = view.start; // represents the first day of the current month
                        var last_date = view.end; // actually the 1st day of the next month                          
                   
                        var start_cell = view.dateCell(start_date); // obtain the cell location for the start date
                        var last_cell = view.dateCell(last_date); // obtain the cell location for the end date                  
                       
                        var bodyCells = view.element.find('tbody').find('td');// retrieve all cells from the current calendar                                                       
                        var _element_firstday = bodyCells[start_cell.row*view.getColCnt() + start_cell.col]; // get specific cell for the start date
                        var _element_lastday = bodyCells[last_cell.row*view.getColCnt() + last_cell.col]; // get specific cell for the end date

                        
                        $(_element_firstday).css('background-color', 'black'); // set the color of the cell representing the first day to black
                        $(_element_lastday).css('background-color', 'blue'); // set the color of the cell representing the last day to blue
                    }                   

        },

Answer 5

Answer №3

function styleEventOnCalendar(event, element, view) {          
        // One way to do it
        var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');

        // Another approach
        var cell = view.dateToCell(event.start);
        view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
    }

Do you have any suggestions for improving this code?

Answer 6

function styleEventOnCalendar(event, element, view) {          
        // One way to do it
        var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');

        // Another approach
        var cell = view.dateToCell(event.start);
        view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
    }

Do you have any suggestions for improving this code?

Is it possible to customize the background color for particular days in FullCalendar?

Answer №1

Answer №2

Answer №3

Similar questions

Saving the index.html file to disk when the button is clicked

Exploring the Form's data-url Attribute

The parameters sent through Ajax are coming back as undefined

Using Jquery to create a slideshow with a div that is set to absolute

Dynamic background image changes when checkbox is selected

Tips for designing a form action

Comparing two datetime objects with time zone offsets in JavaScript: How to determine if one is greater than or less than the other?

Callbacks for AJAX responses that are asynchronous

Ensuring the safety of transferring data from an unsecured website to a secured one

Issues with margin and padding-top not functioning properly when using @media for printing

What is causing the ajax request to override my existing comments with the newly submitted comment?

Unable to select image inside linked container

Error in Chrome: Uncaught TypeError with JQuery Ajax - Unable to access property 'data' when null

PHP ajax handling multiple requests

Show the information once the ajax.load() request is finished, rather than while it is still processing

Tips to swap selections in a Select2 dropdown box

Is it truly unsemantic to use transparent <hr> elements for responsive vertical spacing?

Can you provide a database of words for different cities, towns, and countries in MongoDB (or in JSON

Steps to display the Sidebar on top of the main information page

What is the best way to utilize a variable in jQuery outside of a function?