CODEWITHSUNDEEP
javascriptjquerycssfullcalendar
codingnighter2000
codingnighter2000

Reputation: 529

FullCalendar: How can i display an icon on each day of the month using the function DayRender?

I am building a calendar via FullCalendar.

I would like to display a small icon img for each day of the the current month. regardlees to any events. (lets say i dont have events at all). i would like to use the DayRender function. if that possible

here is the impletetion of my calendar so far:

        $(document).ready(function() {
        var json_backgrundColor ={"1":"#f1f9ef","2":"#edf5f9","3":"#edf5f9","4":"#f7fafc","5":"#f7fafc","6":"#f7fafc","7":"#f7fafc","8":"#f7fafc","9":"#edf5f9","10":"#edf5f9","11":"#f7fafc","12":"#f7fafc","13":"#f7fafc","14":"#f7fafc","15":"#f7fafc","16":"#edf5f9","17":"#edf5f9","18":"#f7fafc","19":"#f7fafc","20":"#f7fafc","21":"#f7fafc","22":"#f7fafc","23":"#edf5f9","24":"#f1f9ef","25":"#ffdfdf","26":"#ffdfdf","27":"#f1f9ef","28":"#f1f9ef","29":"#f1f9ef","30":"#f1f9ef","31":"#f1f9ef"};

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
            },

            defaultView: 'month',
    dayRender: function ( date, cell) {
    var cellDate = date.format('D');
    if(!cell.hasClass('fc-other-month')) {    
        cell.css('background-color', json_backgrundColor[cellDate]);  
    }else {
            cell.css('background-color', '#ffffff');  
            }  
},
 
        });
        
    });

https://jsfiddle.net/m53jbwx0/4/

anyone know how can i do that?

Upvotes: 2

Views: 3416

Answers (1)

Krzysztof Kaźmierczak
Krzysztof Kaźmierczak

Reputation: 1434

Do you need something like this?

dayRender: function ( date, cell) {
cell.prepend('<i class="fa fa-plane" aria-hidden="true"></i>');
}

https://jsfiddle.net/mnjsjs6p

Upvotes: 4

Related Questions