Get different background color on fullcalendar agendaDay

Question

I need to ask, I want to change background color in agendaDay based on time. So background color in agendaDay changed every 15 minutes. So if user see the fullcalendar on 9pm, background color on agendaDay before 9pm is have different background color that after 9pm.

I tried insert time manually to array and then loop it, but the result is I changed all background color in agendaDay. Do you know how to fix this ?

Here's the code

  eventRender: function(events, element) {
            var time = moment().format('HH:mm:ss');
            var minTime = "05:00:00";
            var maxTime = "24:30:00";
            var arr = ['05:00:00', '05:15:00','05:30:00', '05:45:00', '06:00:00', '06:15:00','06:30:00', '06:45:00',           '07:00:00', '07:15:00','07:30:00', '07:45:00', '08:00:00', '08:15:00','08:30:00', '08:45:00', '09:00:00', '09:15:00','09:30:00', '09:45:00', '10:00:00',];
            var i;
            for (i = 0; i < arr.length; i++) {
                if(time<= arr[i])
                {
                    $(".fc-time-grid .fc-slats td").css('background-color', 'green');
                }
                else
                {
                    $(".fc-time-grid .fc-slats td").css('background-color', 'red');
                }
            }
    }