CODEWITHSUNDEEP
javascriptfullcalendar
Riya
Riya

Reputation: 157

How to select a full year's Weekdays or Weekend in Full calendar?

How to select a week day or weekend in full calendar for one year?

I tried some answers from stack overflow.

 $('.fc-day.fc-mon').css('backgroundColor', 'teal');
 $('.fc-day.fc-sat').css('backgroundColor', 'teal');

This works for me,current month mon/sat selected, but when I click next/previous button or change month,my selection was gone. Also I need to select for a whole year.? How to do it? TIA

Upvotes: 0

Views: 386

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Your code adding style to elements exists in the page when the code is executing but after changing month it will recreate new elements and destroys all existing so your update won't reflect in the newly created elements.

You have 2 options, if you want to it to be there always then you can add simple style in your CSS for those elements.

.fc-day.fc-mon,.fc-day.fc-sat{ 
  background-color: teal;
}

Or you have to do it always when new calendar view is rendered, you can do it within viewRender callback.

viewRender: function (view, element) {
    $('.fc-day.fc-mon').css('backgroundColor', 'teal');
    $('.fc-day.fc-sat').css('backgroundColor', 'teal');
}

UPDATE : You can extract the year from view.start property(which holds moment date object) and based on the year set the class if necessary.

For example: 

viewRender: function(view, element) {
  if (view.start.format('YYYY') === '2019') {
    $('.fc-day.fc-mon').css('backgroundColor', 'teal');
    $('.fc-day.fc-sat').css('backgroundColor', 'teal');
  }
}


$(document).ready(function() {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(y + "-" + m + "-" + d);

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    viewRender: function(view, element) {
      if (view.start.format('YYYY') === '2019') {
        $('.fc-day.fc-mon').css('backgroundColor', 'teal');
        $('.fc-day.fc-sat').css('backgroundColor', 'teal');
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<div id='calendar'></div>

Upvotes: 1

Related Questions