Fullcalender v5でカレンダーをラベル毎に表示切替したい。

初学者です。
fullcalender v5を使用してGoogleカレンダーみたいなアプリを作成しようと考えています。

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意で「プライベート」だとか「仕事」とか好きにラベルを作り、ラベル毎に表示非表示を切り替える事ができる。これをFullCalendarで行いたいです。

https://taitan916.info/blog/archives/2796
のサイトを参考に作成中ですが、
fullcalenderのバージョンが違う為なのかうまく作動しません。

ボタンを押すと、コンソールに
(index):17 Uncaught ReferenceError: change is not defined
at HTMLAnchorElement.onclick ((index):17)のエラーが出ます。
調べても良く分からなった為、質問させて頂きました。
宜しくお願い致します。

haml
1.Header
2  .Header__contents
3    .Header__contents__left
4    #label
5      %a.label-link-1{:href => "javascript:void(0);", :onclick => "return change(1);"}
6        %span{:style => "color:#2ECCFA;"} ■
7        ラベル1
8      %a.label-link-2{:href => "javascript:void(0);", :onclick => "return change(2);"}
9        %span{:style => "color:#B40486;"} ■
10        ラベル2
11      
12      .Header__contents__left__btn
13        %button#setEventCal{:type => "button"} 切り替えボタン  
14    .Header__contents__main
15      -if user_signed_in?
16        あなたのスケジュール
17    .Header__contents__right
18      -if user_signed_in?
19        =link_to(destroy_user_session_path,method: :delete,class: "Hedder__contents__right__btn") do
20          ログアウト
21      - else
22        =link_to(new_user_session_path,class: "Hedder__contents__right__btn") do
23          ログイン
24        =link_to(new_user_registration_path,class: "Hedder__contents__right__btn") do
25          新規登録
26.Body
27  %p#calendar
28.Footer
29  .Footer__content
30    .Footer__content__left
31      =link_to(new_customer_path,class: "Footer__content__btn") do
32        ＋
33        顧客情報入力
34    .Footer__content__right
35      =link_to(new_event_path,class: "Footer__content__btn") do
36        ＋
37        スケジュール入力
38

js
1import { Calendar } from '@fullcalendar/core';
2import dayGridPlugin from '@fullcalendar/daygrid';
3import interactionPlugin from '@fullcalendar/interaction';
4import listPlugin from '@fullcalendar/list';
5import timeGridPlugin from '@fullcalendar/timegrid';
6
7document.addEventListener('DOMContentLoaded', function() {
8
9  let calendarEl = document.getElementById('calendar');
10  let calendar = new Calendar(calendarEl, {
11    navLinks: true,
12    editable: true,
13    nowIndicator: true,
14    initialView: 'dayGridMonth',
15    locale: 'ja',
16    timeZone: 'Asia/Tokyo',
17    height: 'auto',
18    headerToolbar: {
19      left: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
20      center: "title",
21      right: "today prev,next"
22    },
23    buttonText: {
24      today: '今日',
25      month: '月',
26      list: 'リスト',
27      week: '週',
28      day: '日',
29    },
30    views: {
31      timeGridWeek: {
32        slotMinTime: '07:00:00',
33        slotMaxTime: '22:00:00'
34      },
35      timeGridDay: {
36        slotMinTime: '07:00:00',
37        slotMaxTime: '22:00:00'
38      }
39    },
40    eventClick: function(event) {
41    },
42    dayCellContent: function(e) {
43      e.dayNumberText = e.dayNumberText.replace('日', '');
44    },
45    eventSources: [{url:'/events.json',
46    color: '#2ECCFA',
47    className: 'staff-1'},
48    {url:'/customers.json',
49    color: '#B40486',
50    className: 'staff-2'}
51    ],
52    plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin,  ]
53  });
54  
55  calendar.render();
56});
57
58function change(key){
59  $('.staff-'+key).toggle();
60  $('.label-link-'+key).toggleClass('off');
61}
62
63
64

scss
1.Header {
2  height: 50px;
3  &__contents{
4    display: flex;
5    justify-content: space-between;
6    &__left{
7      font-size: 20px;
8      margin-top: 10px;
9      &__btn {
10        color: red;
11        font-size: 20px;
12      }
13    }
14    &__main {
15      color: blue;
16      font-size: 20px;
17      margin-top: 10px;
18    }
19    &__right {
20      font-size: 20px;
21      display: flex;
22      margin-top: 10px;
23      &__btn {
24        color: brown;
25        font-size: 20px;
26      }
27    }
28  }
29}
30.Footer {
31  height: 50px;
32  &__content{
33    display: flex;
34    justify-content: space-around;
35    &__btn {
36      color: blueviolet;
37      font-size: 20px;
38      display: block;
39      text-align: center;
40      margin-top: 20px;
41    }
42  }
43}
44
45.label a{
46	display: block;
47}
48.label a.off{
49  display : none;
50}

↓私のアプリ（画像のみ）
https://gyazo.com/63c91e16dff845550b48cf8c48d713c3

↓参考サイトのアプリ
http://sample.taitan916.info/fullcalendar/index2.php

このようにラベルボタンを押すと、イベントが消えたり、復活したりするようにしたいです。
宜しくお願い致します。

neko_daisuki

2020/12/24 04:04

コンソールで change(1) と打つとどうなりますか？

a-ichi

2020/12/24 05:47

Uncaught ReferenceError: change is not defined at <anonymous>:1:1 このエラーが出ます。 https://gyazo.com/4dfd8c6f4c30a621314aed5b42fa61a1

行動規範の内容に同意します

回答1件

ベストアンサー

名前空間の問題でchange()が外から見えないんだと思います。

あまりいい方法ではありませんが、とりあえず動かすなら

function change(key){
  $('.staff-'+key).toggle();
  $('.label-link-'+key).toggleClass('off');
}

// これを下に書き換える
// key を追加
window.change = (key) => {
  $('.staff-'+key).toggle();
  $('.label-link-'+key).toggleClass('off');
}

https://jsfiddle.net/Lyfqs851/

Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 前編（翻訳）
上の記事の「Sprocketsを使ってたときのようにWebpackを使わないこと」ご確認ください。

投稿2020/12/24 06:08

編集2020/12/24 07:10

neko_daisuki

総合スコア2090

a-ichi

2020/12/24 06:24

すいません。まだ動かないようです。ボタンを押すと、 calender.js:59 Uncaught ReferenceError: key is not defined at ./app/javascript/calender.js.window.change (calender.js:59) at HTMLAnchorElement.onclick ((index):17) のエラーが出ます。 https://gyazo.com/0f29673c33f1a287f08d6cc4e57e42fd

a-ichi

2020/12/24 06:25

change(1)を入力した結果は、 Uncaught ReferenceError: key is not defined at ./app/javascript/calender.js.window.change (calender.js:59) at <anonymous>:1:1 こちらのエラーです。