In full calendar hightlight custom dates

Question

I want to show on the calendar, that what dates are free dates in the year. For these, i want to set a red background.

My problem is, that with this code, it gives the red background to all the dates.

I am using this in the dayRender event.

var unnep_napok = 
    [
        "2019-01-12",
        "2019-01-15"
    ];

$('#calendar').fullCalendar({
                events: valami,
                lang: 'hu',
                dayClick: function(event) {
                    $(cell).removeClass('ui-widget-content');
                    $(cell).addClass('holiday');
                    $(this).css('background-color', 'green');
                },
                defaultView: 'month',
                contentHeight: 'auto',
                slotEventOverlap: false,

                eventRender: function(eventObj, $el) {
                    $el.popover({
                          title: ' ',
                          content: eventObj.description,
                          trigger: 'hover',
                          placement: 'top',
                          container: 'body'
                    });
                },



                dayRender: function (date, cell) {
                    for(i = 0; i < unnep_napok.length; i++ )
                    {
                        cell.css("background-color", "red");
                    }
                }


            });

Update with compare:

    dayRender: function (date, cell) {
                    for(i = 0; i < unnep_napok.length; i++ )
                    {
                        if(date == unnep_napok[i] )
                        {
                            cell.css("background-color", "red");
                        }
                    }
                }

Update 2, formatting array elements:

dayRender: function (date, cell) 

              {
                  for(i = 0; i < unnep_napok.length; i++ )
                  {
                      var datum = unnep_napok[i].moment.format('yyyy-mm-dd');

                      if(date.getDate() == datum )
                      {
                          cell.css("background-color", "red");
                      }
                  }
              }

Answer 1

Following your update, there are still some problems which could be resolved by reading the documentation (and my earlier comments) more carefully:

1) I didn't give you the literal values to use in the "format" command. Did you read the documentation fully? As you can see, the correct format would be YYYY-MM-DD (big letters not small letters).

2) unnep_napok[i].moment.format ...this is not how you create a momentJS object. I would expect your browser gave an error in the console about this.

3) But anyway 2) is not important really, because as I mentioned in my last comment, it's the date value which you need to format ... your unnep_napok values are already strings!!

4) date.getDate() .. I don't know where you got this from?? MomentJS does not document any such function.

This should work for you:

dayRender: function (date, cell) 
{
  for(i = 0; i < unnep_napok.length; i++ )
  {
    if(date.format('YYYY-MM-DD') == unnep_napok[i])
    {
      cell.css("background-color", "red");
    }
  }
}