Cases en couleur dans calendrier

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

 eventRender: function(event, element, view){
                    console.log(view);
                    var html = event.day;
                    var html_class = "none";
                    if(typeof event.date_end != 'undefined'){
                        html += ' - '+event.date_end;
                        html_class = "group";
                    }
                    var today_y_m_d = new Date().getFullYear() +"-"+(new Date().getMonth()+1)+"-"+new Date().getDate();

                    var month = self.calendar.fullCalendar('getDate').format("MM");

                    var month_now = $.fullCalendar.moment(event.start._i).format("MM");
                    var _class = '';
                    if(month_now != month){
                        _class = 'next_month';
                    }
                    if(event.status == 'available'){
                        var title ="";

                        if ( hide_adult != 'on'){title += st_checkout_text.adult_price+': '+event.adult_price + " <br/>"; }
                        if ( hide_children != 'on') {title += st_checkout_text.child_price+': '+event.child_price + " <br/>"; }
                        if ( hide_infant != 'on') {title += st_checkout_text.infant_price+': '+event.infant_price ;  }

                        html  = "<button data-placement='top' title  = '"+title+"' data-toggle='tooltip' class='"+html_class+" "+_class+" btn btn-available'>" + html;
                    }else {
                        html  = "<button disabled data-placement='top' title  = 'Disabled' data-toggle='tooltip' class='"+html_class+" btn btn-disabled'>" + html;
                    }
                    if (today_y_m_d === event.date) {
                        html += "<span class='triangle'></span>";
                    }
                    html  += "</button>";
                    element.addClass('event-'+event.id)
                    element.addClass('event-number-'+event.start.unix());
                    $('.fc-content', element).html(html);

                    element.bind('click', function(calEvent, jsEvent, view) {
                        if (!$(this).find("button").hasClass('btn-available')) return ;
                        $('.fc-day-grid-event').removeClass('st-active');
                        $(this).addClass('st-active');
                        date = $.fullCalendar.moment(event.start._i).format(st_params.date_format.toUpperCase());
                        $('input#check_in').val(date).parent().show();
                        if(typeof event.end != 'undefined' && event.end && typeof event.end._i != 'undefined'){
                            date = new Date(event.end._i);
                            date.setDate(date.getDate() - 1);
                            date = $.fullCalendar.moment(date).format(st_params.date_format.toUpperCase());
                            $('input#check_out').val(date).parent().show();
                        }else{
                            date = $.fullCalendar.moment(event.start._i).format(st_params.date_format.toUpperCase());
                            $('input#check_out').val(date).parent().hide();

                        }
                        $('input#adult_price').val(event.adult_price);
                        $('input#child_price').val(event.child_price);
                        $('input#infant_price').val(event.infant_price);

                    });
                },
                eventAfterRender: function( event, element, view ) {
                    $('[data-toggle="tooltip"]').tooltip({html:true});
                },
                loading: function(isLoading, view){
                    if(isLoading){
                        $('.calendar-wrapper-inner .overlay-form').fadeIn();
                    }else{
                        $('.calendar-wrapper-inner .overlay-form').fadeOut();
                    }
                },

            });
        }
    };

    if($('#select-a-activity').length <= 0){
        $('.calendar-wrapper').each(function(index, el) {
            var t = $(this);
            var activity = new ActivityCalendar(t);
            activity.init();
        });
    }

    if($('#select-a-activity').length){
        if($('#select-a-activity').length){
            $('#select-a-activity').qtip({
                content: {
                    text: $('#list_activity_item').html()
                },
                show: {
                    when: 'click',
                    solo: true // Only show one tooltip at a time
                },
                hide: 'unfocus',
                api :{
                    onShow : function(){
                        $('.calendar-wrapper').each(function(index, el) {
                            var t = $(this);
                            var activity = new ActivityCalendar(t);
                            activity.init();
                        });
                    }
                }
            });
        }
    }
});

Ce que je veux

J'aimerais pouvoir obtenir des couleurs pour mes cases dans le calendrier. Cases dispo en vert et case réservées en rouge.

Ce que j'obtiens

Actuellement toutes les cases sont grises et je ne trouve pas où je pourrais les changer ou quelle ligne de code ajouter...