tetero
@tetero (tetero)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Fullcalendarのカレンダーで生成されるセルの中をドロップダウンにしたい

解決したいこと

Fullcalendarを使ってカレンダーを作成しました。
生成されるセルの中をドロップダウンにしたいです。
「デフォルトは空白」、「◯」、「✕」の3種類です。

発生している問題・エラー

やり方がわからない

該当するソースコード

<!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

1Answer

Your answer might help someone💌