how to select all the dates in a month and add background image to it?

[kylestetz]

how to select all the dates in a month and add background image to it?

[kylestetz]

Could you clarify which elements you want to have a background image? This can be done using CSS, but I want to make sure I understand what you are trying to do before I make any suggestions.

[arun-kp]

As you can see in the image, that is exactly what i'm trying to do. But all i m doing is changing css like this:
Which is not the correct way to do and as well and it is not persistent as the td's and tr's data will change.
I want to target a month and all the dates in a month and apply this style.
Any help is respected.
setTimeout(function() {
for (var i = 1; i <= 31; i++) {
if(i < 10){
$(".calendar-day-2013-12-0"+i).find(".day-contents").css("background","url(the.jpg)");
}else{
$(".calendar-day-2013-12-"+i).find(".day-contents").css("background","url(the.jpg)");
}
};
}, 1000);

[kylestetz]

You should be able to do this in a css stylesheet:

.day-contents
{
  background-image: url('the.jpg');
}

and you will not have to write any javascript. Is there a reason this won't work for you?

[arun-kp]

@kylestetz Thanks for your support.
Adding CSS background will add to all the day-contents but i need to add it only for a particular month.

[kylestetz]

Okay, you can check for that particular month in your template and add a class (which will take care of the background image). While looping through your days array you can check days[].date (which is a moment object) to see if it matches a particular month. If you don't know the month ahead of time, you can pass it into the extras property of clndr.

in your clndr instance...

var clndr = $('#calendar').clndr({
  extras: {
    month: 'February' // this might be a variable
  }
});

...and in your clndr template:

<% _.each(days, function(day) { %>
  <div class="day">
    <div class="day-contents <% if(day.date.format('MMMM') == extras.month ){ %>bg-image<% } %>">
      <%= day.day %>
     </div>
  </div>
<% }) %>

if you need to change the month passed into extras, you can call

clndr.options.extras.month = 'January';

You could also add this class just once, higher up in your markup, and scope day-contents so it only has a background image when inside of that parent class.

Does that help?

[kylestetz]

Hey @arun-kp I'm going to close this issue since I'm assuming you've worked this out. Feel free to comment here if you're still having trouble.