JSFiddle - React, Tailwind, and code Playground

by HellLena

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.js"></script>
<div id="calendar"></div>

CSS

.fc-day--background{background-color: red!important;}

JavaScript

$(document).ready(function() {

  // form styles
var calendar = (function() {
  $('#calendar').fullCalendar({
    height: "auto",
    handleWindowResize: true,
    fixedWeekCount: false,
    firstDay: 1,
    header: {
      left: 'prev',
      center: 'title',
      right: 'next'
    },    
    
   //selectable: true,

   dayClick: function(date, jsEvent, view) {
        if(!($(this).hasClass('fc-other-month'))) {
          $(this).toggleClass('fc-day--background');
        } 
        var dates_selected = $(".fc-day--background");
        if(dates_selected.length == 2 && $(this).hasClass('fc-day--background')) {
          var first_date = dates_selected.first().attr("data-date");
          var last_date = dates_selected.last().attr("data-date");
          $("td.fc-day").each(function(i,el){
            var current_date = $(el).attr("data-date");
          	if(current_date > first_date && current_date < last_date){
            	$(el).addClass('fc-day--background');
            }
          })
        } else if(dates_selected.length > 2 || (dates_selected.length <= 2 && !$(this).hasClass('fc-day--background'))) {
        	$(".fc-day").removeClass('fc-day--background');	
          if(!($(this).hasClass('fc-other-month'))) {
            $(this).toggleClass('fc-day--background');
          }
        }
    },
    
  });
  
})();

});