現在カスタマイズビューでカレンダーを作成し、日付だけが表示されている状態です。
日付に該当するレコードのタイトルを日付の下に縦に並べて表示させ、その週で一番多い日に合わせて一週間の縦の長さが変わるようにするにはどうすればいいでしょうか。
いや、情報が少なすぎて今どういう状態で、これからどうしたいのかが見えてこないです。
それは本当にカスタマイズビュー？？
一覧の設定で「カレンダー」を選んだだけだったりしませんか？
カスタマイズビューにHTML書いてカレンダーにしたんですか？
それともそういうライブラリ使ってカレンダーにしたんですか？？？
どうやってそれを作ったか、によって答えも変わってくる質問だと思うので詳細書いてください。
現在画像のような見た目です。
HTMLには
<tr><div>
<div id="iroiro"></div>
</div></tr>
<div id="calendar">
</div>
プラグインとＣＳＳで形をなんとなく作れたのですが、レコードを表示させるやり方が分からない状態です。
〇〇〇のところにその日付で登録されているレコードを、該当のレコードの数だけ表示されるようにしたいと思っています。
(function() {
kintone.events.on('app.record.index.show', function(event) {
const weeks = ['日','月','火','水','木','金','土'];
const date = new Date(); //現在の日付の取得
let year = date.getFullYear(); //年の取得
let month = date.getMonth() + 1; //月の取得
const startDate = new Date(year, month - 1, 1); // 月の最初の日を取得
const endDate = new Date(year, month, 0); // 月の最後の日を取得
const endDayCount = endDate.getDate(); // 月の末日
const lastMonthEndDate = new Date(year, month - 1, 0); // 前月の最後の日の情報
const lastMonthendDayCount = lastMonthEndDate.getDate(); // 前月の末日
const startDay = startDate.getDay(); // 月の最初の日の曜日を取得
let dayCount = 1; // 日にちのカウント
let calendarHTML = ''; //HTMLを組み立てる変数
calendarHTML += '<table border="2" width="100%" class="calender">';
for (let y = 0; y < weeks.length; y++) { //変数y(曜日)を設定し、weeksに入れてある値の数まで繰り返し処理する
calendarHTML += '<td class="youbi" align="center">' +weeks[y] +'</td>'; //処理をするたびに繰り返す動作
}
for (let w = 0; w < 6; w++) { //変数w(week,一週間)を設定し、0を始まりとして6になるまで、6回分繰り返す
calendarHTML += '<tr>'; //繰り返す際に行う動作がここから始まる
for (let d =0; d < 7; d++) { //変数d(day、一日)を設定し、6回分繰り返す
if (w === 0 && d < startDay) { //wが0(一行目)かつ先月の場合
let num = lastMonthendDayCount - startDay + d + 1; //表示する日付の計算式
calendarHTML += '<td class="is-disabled">' + '<div>' + '<span class="gray" valign="top">' + num + '</span>' + '</div>' + '<div class="name">' + '<ul>' + "〇〇〇" + '</ul>' + '</div>' + '<td>'; //カレンダーの日付一マスの設定
//<td>を日付一つ分のセルとして要素を入れ込んでいく。 最初の<span>で日付を表示するnumを入れ込む。続く<span>でその日付を開くボタンを入れたい。
} else if (dayCount > endDayCount) {
let num = dayCount - endDayCount;
calendarHTML += '<td class="is-disabled">' + '<div>' + '<span valign="top">' + num + '</span>' + '</div>' + '<div class="name">' + '<ul>' + "〇〇〇" + '</ul>' + '</div>' + '</td>';
dayCount++;
} else {
calendarHTML += '<td class="day" valign="top">' + '<div>' + '<span valign="top">' + dayCount + '</span>' + '</div>' + '<div class="name">' + '<ul>' + "〇〇〇" + '</ul>' + '</div>' + '</td>';
dayCount++;
}
}
calendarHTML += '</tr>' ; //変数wで繰り返していた処理はここまで
}
calendarHTML += '</table>';
document.getElementById('calendar').innerHTML = calendarHTML; //カスタマイズビューで用意した<div>'calendar'</div>を取得して代入
//ここから月切り替えの設定
let inner = '';
inner += '<tr>';
inner += '<button id="prev" type="button">' + '前の月' + '</button>';
inner += '<button id="ima" type="button">' + '<h1>' + year + '/' + month + '</h1>' + '</button>';
inner += '<button id="next" type="button">' + '次の月' + '</button>';
inner += '</tr>';
document.getElementById('iroiro').innerHTML = inner;
});
})();
お伝えする情報が少なくてすみませんでした。
以上の状況ですが、解決方法や参考にできるものを教えていただければ幸いです。
よろしくお願いいたします。
おおお、これを生のJavaScriptで書いたんですね…
勉強用に書いている感じでしょうか？
それなら、こんな手順で書けると思います。
(1)カレンダーを作るコードに行く前に指定の月のレコードを準備します。awaitでレコード取得を待ちましょう。
(2)指定の月のレコードたちが取得できたら、日付ごとの○○○のところに入れます。HTMLの改行タグで区切って改行させると良いです。
(3)(2)にリンク貼りたいならaタグも使いましょう。
あと、文字列ですが
‘<td class=“youbi” align=“center”>’ +weeks[y] +‘</td>’;
こういうシングルクォーテーションで囲んで足し算で変数をつなげる書き方ではなく、
「テンプレートリテラル」調べてみるといいと思います。
※innerHTMLはちょっと危険な香りがするので、document.createElement()などを使ったほうが良い気はします
もし社内で使用する場合は、
・カレンダー形式のビューを使う（標準機能で済ませる）
https://jp.cybozu.help/k/ja/user/app_settings/view/whatsview.html#view_whatsview_2020
・標準機能では難しい場合は拡張機能やプラグインを使う
https://kintone-sol.cybozu.co.jp/integrate/radicalbridge002.html
https://kintone-sol.cybozu.co.jp/integrate/arces003.html
※サンプルプラグインにもカレンダーのプラグインありますね。
（プラグインのコードはカレンダー作りの参考になるかもしれません。）
https://developer.cybozu.io/hc/ja/articles/212155743
実際に使うなら標準機能や拡張機能やプラグインを使うのがおすすめです。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。