Multiple selected date ranges

[mlundela]

If more than one date range is specified for selected.dates, then they are displayed as one range. The overlapping day should be possible to style differently.

const calendar = new VanillaCalendar('#read-only-calendar', {
  type: 'multiple',
  settings: {
    selection: {
      day: 'multiple-ranged',
    },
    selected: {
      dates: [
        '2024-06-01:2024-06-08',
        '2024-06-08:2024-06-15',
      ],
    },
    range: {
      disableAllDays: true,
    },
  }
});

If ranges do not overlap, then intermediate start and end dates are not styled correctly:

const calendar = new VanillaCalendar('#read-only-calendar', {
  type: 'multiple',
  settings: {
    selection: {
      day: 'multiple-ranged',
    },
    selected: {
      dates: [
        '2024-06-01:2024-06-06',
        '2024-06-08:2024-06-14',
      ],
    },
    range: {
      disableAllDays: true,
    },
  }
});

My style override:

#read-only-calendar .vanilla-calendar-day__btn_selected {
  background-color: #f2295b;
}