JavaScriptでカレンダーの日付をクリックしたらiFrameの中身を変更させたい

Question

前提・実現したいこと

□JavaScriptで作成したカレンダーの日付にリンクを設定できるようにする
こちらの記事を参考にJSでカレンダーを作成しています。

そこで、

・カレンダーの日付リンクをクリックした際に、カレンダーのある同ページ内に設置したiFrameにリンク先を表示したい
・aタグやボタンは使わず、var = data内に情報を格納させているリンクを表示させたい

外部サイトを表示する予定は今のところなく、あくまでもローカルのhtmlを表示するだけです。

該当のソースコード

window.onload = function() {
  // 現在の年月の取得
  var current = new Date();
  var year = 2040;
  var month = 2;

  // カレンダーの表示
  var wrapper = document.getElementById('calendar');
  add_calendar(wrapper, year, month);
}

/**
* 指定した年月のカレンダーを表示する
* @param {object} wrapper - カレンダーを追加する親要素
* @param {number} year    - 年の指定
* @param {number} month   - 月の指定
*/
function add_calendar(wrapper, year, month) {
  // 現在カレンダーが追加されている場合は一旦削除する
  wrapper.textContent = null;

  // カレンダーに表示する内容を取得
  var headData = generate_calendar_header(wrapper, year, month);
  var bodyData = generate_month_calendar(year, month, data);

  // カレンダーの要素を追加
  wrapper.appendChild(headData);
  wrapper.appendChild(bodyData);
}

/**
* 指定した年月のカレンダーのヘッダー要素を生成して返す
* @param {object} wrapper - カレンダーを追加する親要素
* @param {number} year    - 年の指定
* @param {number} month   - 月の指定
*/
function generate_calendar_header(wrapper, year, month) {
  // 前月と翌月を取得
  var nextMonth = new Date(year, (month - 1));
  nextMonth.setMonth(nextMonth.getMonth() + 1);
  var prevMonth = new Date(year, (month - 1));
  prevMonth.setMonth(prevMonth.getMonth() - 1);

  // ヘッダー要素
  var cHeader = document.createElement('div');
  cHeader.className = 'calendar-header';

  // 見出しの追加
  var cTitle = document.createElement('div');
  cTitle.className = 'calendar-header__title';
  var cTitleText = document.createTextNode(year + '年' + month + '月');
  cTitle.appendChild(cTitleText);
  cHeader.appendChild(cTitle);

  // 前月ボタンの追加
  var cPrev = document.createElement('button');
  cPrev.className = 'calendar-header__prev';
  var cPrevText = document.createTextNode('prev');
  cPrev.appendChild(cPrevText);
  // 前月ボタンをクリックした時のイベント設定
  cPrev.addEventListener('click', function() {
      add_calendar(wrapper, prevMonth.getFullYear(), (prevMonth.getMonth() + 1));
  }, false);
  cHeader.appendChild(cPrev);

  // 翌月ボタンの追加
  var cNext = document.createElement('button');
  cNext.className = 'calendar-header__next';
  var cNextText = document.createTextNode('next');
  cNext.appendChild(cNextText);
  // 翌月ボタンをクリックした時のイベント設定
  cNext.addEventListener('click', function() {
      add_calendar(wrapper, nextMonth.getFullYear(), (nextMonth.getMonth() + 1));
  }, false);
  cHeader.appendChild(cNext);

  return cHeader;
}

/**
* 指定した年月のカレンダー要素を生成して返す
* @param {number} year     - 年の指定
* @param {number} month    - 月の指定
* @param {object} linkData - リンクを設定する日付の情報
*/
function generate_month_calendar(year, month, linkData) {
  var weekdayData = ['日', '月', '火', '水', '木', '金', '土'];
  // カレンダーの情報を取得
  var calendarData = get_month_calendar(year, month);

  var i = calendarData[0]['weekday']; // 初日の曜日を取得
  // カレンダー上の初日より前を埋める
  while(i > 0) {
      i--;
      calendarData.unshift({
          day: '',
          weekday: i
      });
  }
  var i = calendarData[calendarData.length - 1]['weekday']; // 末日の曜日を取得
  // カレンダー上の末日より後を埋める
  while(i < 6) {
      i++;
      calendarData.push({
          day: '',
          weekday: i
      });
  }

  // カレンダーの要素を生成
  var cTable = document.createElement('table');
  cTable.className = 'calendar-table';

  var insertData = '';
  // 曜日部分の生成
  insertData += '<thead>';
  insertData += '<tr>';
  for (var i = 0; i < weekdayData.length; i++) {
      insertData += '<th>';
      insertData += weekdayData[i];
      insertData += '</th>';
  }
  insertData += '</tr>';
  insertData += '</thead>';

  // 日付部分の生成
  insertData += '<tbody>';
  for (var i = 0; i < calendarData.length; i++) {
      if(calendarData[i]['weekday'] <= 0) {
          insertData += '<tr>';
      }
      insertData += '<td>';
          var ymd = year + '-' + month + '-' + calendarData[i]['day'];
          for (var j = 0; j < linkData.length; j++) {
              if(linkData[j]['date'] === ymd) {
                  insertData += '<a href="' + linkData[j]['link'] + '">' + calendarData[i]['day'] + '</a>';
                  break;
              }
              if(j >= linkData.length - 1) {
                  insertData += calendarData[i]['day'];
              }
          }
      insertData += '</td>';
      if(calendarData[i]['weekday'] >= 6) {
          insertData += '</tr>';
      }
  }
  insertData += '</tbody>';

  cTable.innerHTML = insertData;
  return cTable;
}

/**
* 指定した年月のカレンダー情報を返す
* @param {number} year  - 年の指定
* @param {number} month - 月の指定
*/
function get_month_calendar(year, month) {
  var firstDate = new Date(year, (month - 1), 1); // 指定した年月の初日の情報
  var lastDay = new Date(year, (firstDate.getMonth() + 1), 0).getDate(); // 指定した年月の末日
  var weekday = firstDate.getDay(); // 指定した年月の初日の曜日

  var calendarData = []; // カレンダーの情報を格納
  var weekdayCount = weekday; // 曜日のカウント用
  for (var i = 0; i < lastDay; i++) {
      calendarData[i] = {
          day: i + 1,
          weekday: weekdayCount
      }
      // 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す
      if(weekdayCount >= 6) {
          weekdayCount = 0;
      } else {
          weekdayCount++;
      }
  }
  return calendarData;
}

<body>

  <div id="calendar"></div>
  <script src="js/calendar.js"></script>

<iframe id="cFrame" src="index.html"></iframe>

  
  <script>
    var data = [
        {
            date: "2040-2-15",
            link: "index.html"
        },
    
        {
            date: "2040-2-29",
            link: "https://www.hololive.tv/portfolio/items/omaru-polka"
        }
    ];

    function test(data){
        target = document.getElementById("cFrame");
        onClick = "newURL()";
        document.getElementById('cFrame')[0].contentDocument.location.reload(true);
        document.getElementById('cFrame').contentWindow.location.replace('index.html');
        var dataAttrs = element.dataset;
        
    };

    

  </script>
 </body>

    

わからないこと

・Javascriptでのiframe操作tips(iframeの中身を差し替える)
こちらの記事を参考に、functionの中にいれてみたのですが、動かず詰まってしまいました。
おそらくこの方の記述で動くと思ったのですが、記述の方法がわかりません。

初心者であるため、記述方法などを調べてみたのですが、引数や関数の使い方、
そもそも記述の仕方に理解が及んでいないところがあります。

JavaScriptを実際にサンプルなどを触りながら覚えようと思って始めたため、
コードの書き方も見よう見まねで書いているのでよくわかっていないところが多々あります。

試したこと

iframeに表示させるだけならtargetを指定すればいいのではないかと思ったのですが、
jsにはiframeのtargetを指定する方法がないようだったので
・Javascriptでのiframe操作tips(iframeの中身を差し替える)
こちらを参考に上記html内のfunctionを作成したのですが動きませんでした。
"data"をfunctionに引数として渡せば、function内の関数でiframe内に表示させることができるのではないかと思ったのですが…。

おそらく記述方法が間違っているんだろうと思うのですが、どう記述すればいいかわかりません…。

第83回　「インラインフレームのURLを変更する」
インラインフレームのリンク設定（JavaScript入門）
他にもjavascriptとiframe,srcなどで一通り検索をかけましたが、
ボタンやaタグで表示する方法はあったのですが、求めている方法ではありませんでした。

非常にお手数をおかけいたしますが、どなたかご教授いただければ幸いです。
何卒よろしくお願いいたします

Comments

[int32_t]

> aタグやボタンは使わず、

すでにカレンダー内でaタグでリンクを生成しているように見えるのですが、それはやめるということですか?

[fjid]

ありがとうございます。
aタグを使わず、というのはこのサイト(https://www.pazru.net/js/location/5.html)の

<a href="JavaScript:ifr('https://pazru.net/puzzle/')">パズルの部屋へ</a>
<br>
<iframe src="https://pazru.net/" name="waku"></iframe>
<script>
function ifr(jpURL){
waku.location = jpURL;
}
</script>

＞ <a href="JavaScript:ifr('https://pazru.net/puzzle/')">パズルの部屋へ</a>
のような表記をhtml内で使いたくない…ということです。

すみません、<a href=""></a>以外の形は初めてなのでコードを見てもaタグでリンクが生成されているとわからず…。
■html内script
var data = [
{
date: "2040-2-15",
link: "index.html"
},

{
date: "2040-2-29",
link: "https://www.hololive.tv/portfolio/items/omaru-polka"
}
];

おそらくここの"link:index.html"でリンクになってると思うのですが、
これもaタグで生成されているということになるんでしょうか？

やりたいことは、ここのvar dataの情報リンクをiframeに表示することです。

<div id="calendar"></div>
<script src="js/calendar.js"></script>
<iframe id="cFrame" src="index.html"></iframe>

htmlにはカレンダーとiframeを表示する上記だけの情報(と、scriptのみ)を書きたいのです。
わかりづらかったらすみません

[int32_t]

ああ、質問者さんが書いたコードではなく他の人のコードのコピペなのですね。

現状のコードが何をしているか理解していれば簡単な修正で目的は達成できるはずです(<a>の生成をちょっと変えるだけ)。現状の質問者さんの状態で前に進んでもコピペプログラマが増えるだけなので、 私は回答を書きません。

[fjid]

すみません。
私はプログラマーではなく、個人的なことですぐに使用したい目的(公開するものではなく)があり、触れたばかりで仕組みがわからなかったので質問させていただきました。
ご助言を元にもう少し自力で考えてみようと思います、ありがとうございました。