Fullcalendarのカレンダーで生成されるセルの中をドロップダウンにしたい
解決したいこと
Fullcalendarを使ってカレンダーを作成しました。
生成されるセルの中をドロップダウンにしたいです。
「デフォルトは空白」、「◯」、「✕」の３種類です。
発生している問題・エラー
やり方がわからない
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- CSS -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.css"
/>
</head>
<body>
<!-- Calendar -->
<div id="my-calendar"></div>
<!-- JavaScript -->
<script src="//unpkg.com/@popperjs/core@2" defer></script>
<script src="//unpkg.com/tippy.js@6" defer></script>
<script
src="//cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.js"
defer
></script>
</body>
<script>
// console.log("main.js!!");
const events = [
{
id: "a",
start: "2022-02-02",
end: "",
title: "節分",
description: "悪い鬼を追い払い福を招く",
backgroundColor: "red",
borderColor: "red",
editable: true,
},
{
id: "b",
start: "2022-02-03",
end: "",
title: "立春",
description: "二十四節気の一つ",
backgroundColor: "green",
borderColor: "green",
editable: true,
},
{
id: "c",
start: "2022-02-08",
end: "",
title: "針供養",
description: "古くなった針などを神社に納めて供養する",
backgroundColor: "blue",
borderColor: "blue",
editable: true,
},
];
window.onload = (e) => {
// Calendar
const elem = document.getElementById("my-calendar");
const now = new Date();
const year = now.getFullYear(); // 現在の年を取得
const month = now.getMonth() + 1; // 現在の月を取得（0から始まるため+1する）
const day = now.getDate(); // 現在の日を取得
const formattedDate = `${year}-${month.toString().padStart(2, "0")}-${day
.toString()
.padStart(2, "0")}`;
console.log(formattedDate); // 出力: "2022-04-22"（現在の日付に応じて変化）
const calendar = new FullCalendar.Calendar(elem, {
initialView: "timeGridWeek", // 週間ビューに変更
initialDate: formattedDate,
events: events,
dateClick: (e) => {
console.log("dateClick:", e);
},
eventClick: (e) => {
console.log("eventClick:", e.event.title);
},
eventDidMount: (e) => {
tippy(e.el, {
// Tippy
content: e.event.extendedProps.description,
});
},
});
calendar.render();
};
</script>
</html>
お願い
具体的な正解がわかる方のみご回答よろしくお願い致します。
0
