Show previous/next month's days in current month's view?

[marchershey]

Is there a way I can show the previous and next months days in the current month view?

Example:

[antontrafimovich]

+1

[akondo06]

Had to do this recently and here's what I ended up with:

const picker = new Litepicker({
  ...
}};
...
picker.on('render:month', (month, date) => {
  const days = month.querySelector('.container__days');
  const pre = days.querySelectorAll(':not([class])') || [];
  const daysInMonth = days.children.length - pre.length;

  const calendars = picker.calendars;
  const isFirst = calendars[0].isSame(date, 'day');
  const isLast = calendars[calendars.length - 1].isSame(date, 'day');

  if(isFirst) {
    const before = date.clone();
    pre.forEach((element) => {
      days.removeChild(element);
      before.subtract(1, 'day');
      const day = picker.renderDay(before);
      day.classList.add('is-pre');
      days.prepend(day);
    });
  }

  if(isLast) {
    const after = date.clone().add(daysInMonth, 'days');
    const maxDays = days.children.length > 35 ? 42 : 35;
    while(days.children.length < maxDays) {
      const day = picker.renderDay(after);
      day.classList.add('is-post');
      days.appendChild(day);
      after.add(1, 'day');
    }
  }
});

And some css to distinguish those days:

&.is-pre, &.is-post {
  font-weight: 300;
  color: var(--litepicker-is-locked-color);

  &:hover {
    color: var(--litepicker-is-locked-color);
  }
}

This was a pretty easy drop-in for me, it also works with the range plugin! Hopefully it helps anybody ending up here :)

Cheers!