Zenn
Closed4

国内Elixirイベントのカレンダーを作るまでの制作ログ

Elixir
phoenix
koga1020koga1020

カレンダーライブラリ

https://fullcalendar.io/

https://fullcalendar.io/docs/initialize-es6 にある通り、npmで導入

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list

2022/02/03時点でapp.jsはこんな感じ

  • 1日, 2日...のように "日" が作るのが微妙なのでdayCellContentで消す
  • listの表示でdotが場所とって微妙なので消す
  • eventsはpathを書いておくとrequestを投げて取得した結果のリストを設定してくれる（便利
    • カレンダーに設定する用に別途apiのendpointを生やしておけば楽に値を設定できる
...略

import { Calendar } from "@fullcalendar/core";
import jaLocale from "@fullcalendar/core/locales/ja";

import dayGridPlugin from "@fullcalendar/daygrid";
import listPlugin from "@fullcalendar/list";

let calendarEl = document.getElementById("calendar");
let calendar = new Calendar(calendarEl, {
  plugins: [dayGridPlugin, listPlugin],
  initialView: "listMonth",
  locale: jaLocale,
  headerToolbar: {
    left: "prev,next today",
    center: "title",
    right: "dayGridMonth,listMonth",
  },
  dayCellContent: function (e) {
    e.dayNumberText = e.dayNumberText.replace("日", "");
  },
  eventDisplay: "block",
  events: "/events",
  eventDidMount: function (info) {
    let dotEl = info.el.getElementsByClassName("fc-list-event-dot")[0];

    if (dotEl) {
      dotEl.style.display = "none";
    }
  },
});

calendar.render();
このスクラップは2022/02/11にクローズされました