There is a very convenient calendar plugin . One of the few shortcomings of this plugin is that, apparently, it does not provide for the possibility of changing the number of months displayed depending on the width of the screen (at least I don’t see it). Link to the calendar in codecode.

Any ideas?

addEventListener('DOMContentLoaded', function () { pickmeup('.three-calendars', { flat: true, mode: 'range', calendars: 3 }); }); 
 <link type="text/css" rel="stylesheet" href="http://cyprus.890m.com/Cyprus/css/pickmeup.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cyprus.890m.com/Cyprus/js/pickmeup.js"></script> <div class="three-calendars"></div>

  • check the width of the screen and re-initiate the calendar for the required number of months. apparently, through the parameter "calendars: 3" - lexxl
  • @lexxl, the problem is that my level of knowledge js makes such a task hardly feasible .. - Igor

2 answers 2

Check the screen width and initialize the required number of months through calendars

 function adaptCalendars() { if (window.innerWidth <= 380) { pickmeup('.three-calendars', { flat: true, mode: 'range', calendars: 1 }); } else if (window.innerWidth < 695) { pickmeup('.three-calendars', { flat: true, mode: 'range', calendars: 2 }); } else { pickmeup('.three-calendars', { flat: true, mode: 'range', calendars: 3 }); } } window.addEventListener("load", adaptCalendars); 
 <link type="text/css" rel="stylesheet" href="http://cyprus.890m.com/Cyprus/css/pickmeup.css"> <script src="http://cyprus.890m.com/Cyprus/js/pickmeup.js"></script> <div class="three-calendars"></div>

  • Thanks for the help! Please see here, if there is time and desire, I will be very grateful: ru.stackoverflow.com/questions/585286/… - Igor
  • Is it possible to track the width of the screen not only when loading, but also when resizing it? - Igor
  • can. there is a resize event for this - similar to the load - lexxl event
  • added window.onresize = adaptCalendars; to your script window.onresize = adaptCalendars; - according to the logic of things, everything should work, but no - the number of months does not change. codepen.io/Vlastelin/pen/yVBYpG?editors=1010 - Igor
  • @ Igor, yes, I also did not manage to reach the shift during resize. you probably should wait until the plugin author adds the built-in conversion method. - lexxl

Just specify the condition (or several conditions) of checking the width of the screen, which will be used to fill in the required number of calendars:

 var numberСalendars = 3; // по умолчанию if(window.innerWidth < 768){ // нужное разрешение экрана numberСalendars = 2; // или 1 } addEventListener('DOMContentLoaded', function () { pickmeup('.three-calendars', { flat: true, mode: 'range', calendars: numberСalendars }); });