FullCalendarにGoogle Calendarを複数表示させる

document.addEventListener('DOMContentLoaded', function() {
 var calendarEl = document.getElementById('calendar');
 var calendar = new FullCalendar.Calendar(calendarEl, {
   initialView: 'dayGridMonth',
   // GoogleカレンダーのAPIキーを設定
   googleCalendarApiKey: '---自分のAPIキーを入れてね---',
   // カレンダーIDを設定
   events: '---使用するカレンダーIDを入れてね---',
   // 日本語化
   locale: 'ja',
   // 高さ自動調整
   height: 'auto',
   // ヘッダー部レイアウト
   headerToolbar: {
     left: 'prev,today,next',
     center: 'title',
     right: 'dayGridMonth,listMonth'
   },
   // 24時間表示
   eventTimeFormat: {
     hour: 'numeric',
     minute: '2-digit'
   },
   // 日本語化により各日付の後ろにつく「日」を取る
   dayCellContent: function(e) {
     e.dayNumberText = e.dayNumberText.replace('日', '');
   },
   // ボタン文字列の日本語化
   buttonText: {
     today: '今日',
     month: '月',
     week: '週',
     day: '日',
     list: 'リスト'
   },
   // all-day表示を終日にする
   allDayText: '終日',
   // デフォルトの6週間表示を自動調整
   fixedWeekCount: false,
   // イベントをクリックしたらグーグルカレンダーへ飛ばずアラート表示
   eventClick: function(info) {
     var eventObj = info.event;
     if (eventObj.allDay == false) {
       var daytext = moment(eventObj.start).format('YYYY-MM-DD');
       var starttext = moment(eventObj.start).format('HH:mm');
       var endtext = moment(eventObj.end).format('HH:mm');
       if (eventObj.url) {
         alert( '【'+ daytext +'】\n開店 ' + starttext + ' 〜 閉店 ' + endtext );
       }
       } else {
         alert( '【'+ daytext +'】\n' + eventObj.title);
       } info.jsEvent.preventDefault();
     },
   });
   calendar.render();
});

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        // GoogleカレンダーのAPIキーを設定
        googleCalendarApiKey: '---自分のAPIキーを入れてね---',
        // カレンダーIDを設定
        eventSources: [
            {
                //　和紙人形教室
                googleCalendarId: '---対象のAPIキーを入れてね。例では和紙人形教室---',
                className: 'washiningyo'
            },
            {
                //　漆芸教室
                googleCalendarId: '---対象のAPIキーを入れてね。例では漆芸教室---',
                className: 'shitsugei'
            },
            {
                //　一閑張り教室
                googleCalendarId: '---対象のAPIキーを入れてね。例では一閑張り教室---',
                className: 'ikkannbari'
            },
            {
                //　ワークショップ（その他の教室）
                googleCalendarId: '---対象のAPIキーを入れてね。例ではワークショップ---',
                className: 'workshop'
            },
        ],            
        // 日本語化
        locale: 'ja',
        // 高さ自動調整
        height: 'auto',
        // ヘッダー部レイアウト
        headerToolbar: {
            left: 'today,prev',
            center: 'title',
            right: 'next,dayGridMonth,listMonth'
        },
        // 24時間表示
        eventTimeFormat: { hour: 'numeric', minute: '2-digit' },
        // 日本語化により各日付の後ろにつく「日」を取る
        dayCellContent: function(e) {
            e.dayNumberText = e.dayNumberText.replace('日', '');
        },
        // ボタン文字列の日本語化
        buttonText: {
            today:    '今日',
            month:    '月',
            week:     '週',
            day:      '日',
            list:       'リスト'
        },
        // all-day表示を終日にする
        allDayText: '終日',
        // デフォルトの6週間表示を自動調整
        fixedWeekCount: false,
        // イベントをクリックしたらグーグルカレンダーへ飛ばずアラート表示
        eventClick: function(info) {
            var eventObj = info.event;
            var daytext = moment(eventObj.start).format('YYYY-MM-DD'); 
            if (eventObj.allDay == false) {
                var starttext = moment(eventObj.start).format('HH:mm'); 
                var endtext = moment(eventObj.end).format('HH:mm'); 
                if (eventObj.url) {
                    alert( '【'+ daytext +'】\n'  + eventObj.title + '\n開始 ' + starttext + ' 〜 終了 ' + endtext );
                }
            } else {
                alert('【'+ daytext +'】\n' + eventObj.title);
            }
            info.jsEvent.preventDefault(); // prevents browser from following link in current tab.
        },
    });
    calendar.render();
});

fc-daygrid-event-dot { display: none !important; }
.fc-daygrid-dot-event { padding: 1px 3px !important; }
.washiningyo { background-color: #ff4a04; color: #fff; }
.ikkannbari { background-color: #2196f3; color: #fff; }
.shitsugei { background-color: #4caf50; color: #fff; }
.workshop { background-color: #948db6; color: #fff; }