質問編集履歴
1
日付要素の取得はできそうだが、まだまだ記述が分からない。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -281,4 +281,33 @@
|
|
|
281
281
|
カレンダー内のどこかに表示することができれば、保存したデータの日付情報とカレンダーの日付情報を照らし合わせて表示させるといったやり方でできるのかなと思ったり、<th>要素にid属性やclass属性を付加できれば、GetElementById等で取り出しできるのにと思ったりしていますが、難航しています。そもそものアルゴリズムが間違っている可能性もあるので、様々な角度からのご指摘・ご助言等頂けたら幸いです。
|
|
282
282
|
|
|
283
283
|
|
|
284
|
-
現状のブラウザ画面
|
|
284
|
+
現状のブラウザ画面
|
|
285
|
+
|
|
286
|
+
***
|
|
287
|
+
2020/12/11追記
|
|
288
|
+
main.jsに以下のコードを加えることで、日付１つ１つの要素にid属性を付加することができました。後は、この要素を親要素として「子要素１（日付表示）」、「子要素２（イベント名）」を作り、カレンダーの日付情報と登録したイベントの日付が同じ時に、その場所にイベント名を表示させる記述ができればと思っていますが、要素の追加、JavascriptでRailsのインスタンス変数を受け渡しにつまづいています。gonというGemを導入してevents.controller.rbに「gon.events = @events」と設定しましたが、「@events.each do」のJavascript版の記述が分からず、サイトを彷徨っています。参考サイトの紹介などでも構いませんので、解決の糸口を一緒に探して頂けないでしょうか？よろしくお願い致します。
|
|
289
|
+
|
|
290
|
+
```ruby
|
|
291
|
+
〜省略〜
|
|
292
|
+
weeks.forEach(week => {
|
|
293
|
+
const tr = document.createElement('tr');
|
|
294
|
+
week.forEach(date => {
|
|
295
|
+
const td = document.createElement('td');
|
|
296
|
+
|
|
297
|
+
td.textContent = date.date;
|
|
298
|
+
if (date.isToday) {
|
|
299
|
+
td.classList.add('today');
|
|
300
|
+
}
|
|
301
|
+
if (date.isDisabled) {
|
|
302
|
+
td.classList.add('disabled');
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
td.setAttribute('id', 'event_box') #ここに追加
|
|
306
|
+
|
|
307
|
+
tr.appendChild(td);
|
|
308
|
+
});
|
|
309
|
+
document.querySelector('tbody').appendChild(tr);
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
〜省略〜
|
|
313
|
+
```
|