雖然我都用套件....
但你應該可以監測每個focus

當有一個focus時
把兩個中間的元素each click應該就可以了

額外還可以做有兩個的時候清除focus(重製選擇)

提供個想法

let min = false;
let max = false;

/**
 * @param {String} date 點到的日期
 */
function clickEvent(date) {
    max = max || date;
    min = min || date;
    if (date > max) {
        max = date;
    } else if (date < min) {
        min = date;
    }

    return [max, min];
}

每次觸發點擊日期的時候紀錄最大最小，收到回傳值後再自己去處理這個範圍內的反灰動作
當然這個 max, min 也可以拿來表單送出的時候用

不想使用套件，要base既有程式，應該可以利用這個想法來去處理

我只稍作修改給個參考，toggle class那部分我就大概描述，Fight!

全域部分

let my_day = my_date.getDate();
let days = [];//增加這個

getDay()部分

function getDay() {
  let dayID = '';
  dayUL.addEventListener('click', function (e) {
    dayID = e.target.dataset.id;
    if(days[0]!=null) days[1]=dayID;//增加這個
    else days[0]=dayID;//增加這個
    e.target.classList.toggle('checked')
    let y = dayID.slice(0, 4);
    let m = dayID.slice(4, 6);
    let d = dayID.slice(6);
    let dayString = `${y}-${m}-${d}`;
    if(days[0]&&days[1]){//增加這個
      for(let i= parseInt(days[0])+1;i<parseInt(days[1]);i++){
        console.log(i);//列出中件項
        /*這個地方讓你id toggle class*///classList.toggle('checked');
      }
    }
  })
}

思維給你，剩下的自已來。

日期節點是li。其本身存在對應的index位置。
1.點下去先記錄目前的索引值。點第二次(可用陣列變數來記錄)。再記錄第二個索引值。
2.然後排序這兩個值。(畢竟要由小到大)
3.再用回圈的方式將範圍內的日期節點加上「選擇的css」。

如果再一次點擊。就先清掉所有已選擇。從1開始再run

如果有用jquery的話。是可以不需要回圈。直接定義就好了。
不過我看你沒用jquery。所以就不教了。