Who worked with FullCalendar: (fullcalendar.io)? Please tell me how to implement the selection of a date range, i.e. when you click on a date, select it, on the next click on another date, select all the days between these dates, including the clicked days. An example of how it should work here: (demo.art-creation.ru/range-in-jquery-ui-datepicker/)

Link to the sandbox with the calendar ( http://codepen.io/Ridik7/pen/XjbNWx )

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.css"> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="http://momentjs.com/downloads/moment.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.0/fullcalendar.min.js"></script> </head> <body> <div id='calendar'></div> </body> .fc-day--background{background-color: red!important;} $(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'); } }, }); })(); }); 

    1 answer 1

    You can implement JSFiddle like this :

     $(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'); } } }, }); })(); }); 
    • Thanks, that is necessary! Your code is much shorter than mine, I will use your option) - Ridik7