Javascriptのスクリプトを利用するHTMLに、画像を表示させたい

前提・実現したいこと

JavaScript Calendarを利用してWEBシステムを開発しています。
下記で紹介している内容で、利用していますが、実際にHTML表示される画面は、Javascriptのスクリプトで作られるため、どのように表示内容をカスタマイズすればよいかわかりません。

下記コード（画像）の①、②、③のところに<img>タグを使う等して、画像を表示させたいのですが、どのような方法を使えば可能となるでしょうか？

ご教授いただけないでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset='utf-8'/>
5    <link href='../packages/core/main.css' rel='stylesheet'/>
6    <link href='../packages-premium/timeline/main.css' rel='stylesheet'/>
7    <link href='../packages-premium/resource-timeline/main.css' rel='stylesheet'/>
8    <script src='../packages/core/main.js'></script>
9    <script src='../packages-premium/timeline/main.js'></script>
10    <script src='../packages-premium/resource-common/main.js'></script>
11    <script src='../packages-premium/resource-timeline/main.js'></script>
12    <script>
13
14        document.addEventListener('DOMContentLoaded', function () {
15            var calendarEl = document.getElementById('calendar');
16
17            var calendar = new FullCalendar.Calendar(calendarEl, {
18                plugins: ['interaction', 'resourceTimeline'],
19                now: '2020-02-07',
20                aspectRatio: 1.8,
21                scrollTime: '00:00',
22                header: {
23                    left: 'today prev,next',
24                    center: 'title',
25                    right: 'resourceTimelineMonth,resourceTimelineYear'
26                },
27                defaultView: 'resourceTimelineMonth',
28                resourceLabelText: 'Rooms',
29                resources: [
30                    {id: 'a', title: 'room A'}, // ①ここで表示される'room A'の左側に画像を表示させたい
31                    {id: 'b', title: 'room B'}, // ②ここで表示される'room B'の左側に画像を表示させたい
32                    {id: 'c', title: 'room C'}, // ③ここで表示される'room C'の左側に画像を表示させたい
33                ]
34            });
35            calendar.render();
36        });
37    </script>
38    <style>
39        body {
40            margin: 0;
41            padding: 0;
42            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
43            font-size: 14px;
44        }
45        #calendar {
46            max-width: 900px;
47            margin: 50px auto;
48        }
49    </style>
50</head>
51<body>
52<div id='calendar'></div>
53</body>
54</html>
55

追記①（最初の回答をいただいてからのテストコード）

まずは、回答いただいた内容で画像が表示されるか、テストでコードを加えましたが、うまく動作しません。

<div id='calendar'></div>

のコードが全て表示されなくなってしまいます。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset='utf-8'/>
5    <link href='../packages/core/main.css' rel='stylesheet'/>
6    <link href='../packages-premium/timeline/main.css' rel='stylesheet'/>
7    <link href='../packages-premium/resource-timeline/main.css' rel='stylesheet'/>
8    <script src='../packages/core/main.js'></script>
9    <script src='../packages-premium/timeline/main.js'></script>
10    <script src='../packages-premium/resource-common/main.js'></script>
11    <script src='../packages-premium/resource-timeline/main.js'></script>
12    <script>
13
14        document.addEventListener('DOMContentLoaded', function () {
15            var calendarEl = document.getElementById('calendar');
16
17            var calendar = new FullCalendar.Calendar(calendarEl, {
18                plugins: ['interaction', 'resourceTimeline'],
19                now: '2020-02-07',
20                aspectRatio: 1.8,
21                scrollTime: '00:00',
22                header: {
23                    left: 'today prev,next',
24                    center: 'title',
25                    right: 'resourceTimelineMonth,resourceTimelineYear'
26                },
27                defaultView: 'resourceTimelineMonth',
28                resourceLabelText: 'Rooms',
29                resources: [
30                    {id: 'a', title: 'room A'}, // ①ここで表示される'room A'の左側に画像を表示させたい
31                    {id: 'b', title: 'room B'}, // ②ここで表示される'room B'の左側に画像を表示させたい
32                    {id: 'c', title: 'room C'}, // ③ここで表示される'room C'の左側に画像を表示させたい
33                ],
34                events: [
35                    {
36                        id: '1',
37                        resourceId: 'a',
38                        start: '2020-02-07T02:00:00',
39                        end: '2020-02-07T07:00:00',
40                        title: 'event 1',
41                        imageurl: '../static/logo.png',
42                    },
43
44                ],
45                eventRender: function (info) {
46                    // 画像のデータを持っていれば、画像を生成してテキストの後ろに追加
47                    if (info.event.extendedProps.imageurl) {
48                        let elem = info.el,
49                            img = document.createElement('img');
50                        img.src = info.event.extendedProps.imageurl;
51                        elem.querySelector('.fc-content').appendChild(img);
52                    }
53                },
54
55            });
56            calendar.render();
57        });
58    </script>
59    <style>
60        body {
61            margin: 0;
62            padding: 0;
63            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
64            font-size: 14px;
65        }
66
67        #calendar {
68            max-width: 900px;
69            margin: 50px auto;
70        }
71    </style>
72</head>
73<body>
74<div id='calendar'></div>
75</body>
76</html>

コンソールのエラーメッセージ

sample.html:51 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Calendar.eventRender (sample.html:51)
    at Calendar.publiclyTrigger (main.js:6981)
    at main.js:2399
    at Array.filter (<anonymous>)
    at filterSegsViaEls (main.js:2398)
    at TimelineLaneEventRenderer.FgEventRenderer.renderSegEls (main.js:7820)
    at TimelineLaneEventRenderer.FgEventRenderer.renderSegs (main.js:7774)
    at TimelineLane.res [as renderFgEvents] (main.js:3249)
    at TimelineLane.render (main.js:1793)
    at TimelineLane.Component.receiveProps (main.js:3957)
eventRender @ sample.html:51
Calendar.publiclyTrigger @ main.js:6981
(anonymous) @ main.js:2399
filterSegsViaEls @ main.js:2398
FgEventRenderer.renderSegEls @ main.js:7820
FgEventRenderer.renderSegs @ main.js:7774
res @ main.js:3249
TimelineLane.render @ main.js:1793
Component.receiveProps @ main.js:3957
ResourceRow.render @ main.js:320
Component.receiveProps @ main.js:3957
ResourceTimelineView.updateRowProps @ main.js:779
ResourceTimelineView.render @ main.js:591
Component.receiveProps @ main.js:3957
CalendarComponent.renderView @ main.js:6304
CalendarComponent.render @ main.js:6168
Component.receiveProps @ main.js:3957
Calendar.renderComponent @ main.js:6831
Calendar.executeRender @ main.js:6805
Calendar.render @ main.js:6631
(anonymous) @ sample.html:56

最初のエラーの、

51 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Calendar.eventRender (sample.html:51)

51行目のコードは、

elem.querySelector('.fc-content').appendChild(img);

となっています。

補足情報（FW/ツールのバージョンなど）

開発環境

HTML 5
JavaScript Calendar v4

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

回答1件

ベストアンサー

FullCalendarのresourcesに画像を付けた経験は無いのですが、
eventsにアイコンを追加したことはあります。

その時はeventRenderを使ってフックしたのですが、
resourcesの場合はresourceRenderを使うことになると思います。
https://fullcalendar.io/docs/resourceRender

ちなみにイベントのタイトルに画像を追加したときのコードは下記のような感じです。


events: [
    {
        title: 'タイトル',
        // ~省略~
        imageurl:'img/icon1.png', //←画像のデータ
    },
    {
        title: 'タイトル',
        // ~省略~
        imageurl:'img/icon2.png', //←画像のデータ
    }
    .
    .
    .
],
eventRender: function(info) {
    // 画像のデータを持っていれば、画像を生成してテキストの後ろに追加
    if (info.event.extendedProps.imageurl) {
        let elem = info.el,
            img = document.createElement('img');
        img.src = info.event.extendedProps.imageurl;
        elem.querySelector('.fc-content').appendChild(img);
    }
}

少し違う箇所の内容になってしまいましたが、参考になればm(__)m

▼ 追記 ▼
該当のタイプのカレンダーを見つけたので、そのコードに合わせて再度変更内容を書きました。

①resources:[]のデータを下記に変更。

// 画像用のパスデータを追加しました。

resources: [
    {id: 'a', title: 'room A', imageurl: 'http://satyr.io/20x20/red'},
    {id: 'b', title: 'room B', imageurl: 'http://satyr.io/20x20/blue'},
    {id: 'c', title: 'room C', imageurl: 'http://satyr.io/20x20/green'},
],

②eventRender: function(info){}を下記に変更。

// eventRender→resourceRenderに変更
// appendChildする親要素のclassを.fc-cell-content（room A等が入っているｈｔｍｌのclass）に変更

resourceRender: function (info) {
    if (info.resource.extendedProps.imageurl) {
        let elem = info.el,
            img = document.createElement('img');
        img.src = info.resource.extendedProps.imageurl;
        elem.querySelector('.fc-cell-content').appendChild(img);
    }
},

投稿2020/04/23 08:37

編集2020/04/23 10:56

退会済みユーザー

総合スコア0

tomaa

2020/04/23 09:13

ご回答ありがとうございます。ご丁寧な内容で、とても参考になります。まず、教えていただいた内容で画像が表示できるか、確かめるために質問欄に追記したコードで試してみましたが、うまく表示できません。コードの追加以外にも必要な事などありますでしょうか？

退会済みユーザー

2020/04/23 09:48

そのままでは動きませんでしたか。コードの追加以外はありません。ただ、tomaaさんの開発環境が分からないので何とも言えない部分はあります。 fullcalendarにはビューのタイプが複数あって、私が使用したものとtomaaが使われているものが違うようなので、そこに原因があるのか、、、? JSで生成されているカレンダーのHTML構造やclass等もおそらく違うと思うので、そのあたりに原因があるのか、、、? こちらで同じ環境が作れないので、憶測でしか言えずすみません。ブラウザのコンソールに何かエラー等は出てませんでしたか？

退会済みユーザー

2020/04/23 10:16

連投すみません。 fullcalendarのカレンダーのサンプルを拾ってきて、先程の貼ったコードのデモを書いてみました。 https://codepen.io/lisa1111/pen/NWGdwBm スケジュールタイトル「テスト①〜③」の右に画像を追加しています。（赤青緑の■が画像です。）あくまでも、「このカレンダーのタイプでスケジュールタイトルの横に」という事になってしまいますが。ヒントになればと。

tomaa

2020/04/23 10:19

コメントありがとうございます。コンソールのエラー追記しました。もしお時間ありました、ご確認をお願いします。

退会済みユーザー

2020/04/23 10:59

HTMLが違うのが原因だと思います。 tomaaさんが使われているカレンダーとおそらく同じもののデモがあったので、それに合わせて先程の解答に修正内容を追記しました。これでroom A等の右に赤青緑の画像が付きませんか？

tomaa

2020/04/23 11:10

はい、コードを修正すると画像が表示されました。最初から最後までご丁寧に教えていただき、大変ありがとうございました。大変助かりました。ちなみになのですが、画像をテキスト（room）の左側に表示させる事は簡単にできるのでしょうか？質問ばかりで、恐縮なのですがもし情報ありましたらいただけると助かります。

退会済みユーザー

2020/04/23 11:23

実装できたようで良かったです。 resourceRenderの最後のコードを下記に変えると左側に追加されます。 elem.querySelector('.fc-cell-content').insertBefore(img, elem.querySelector('.fc-cell-content').firstChild);

tomaa

2020/04/23 11:31

ありがとうございます。希望どおりに表示する事ができました。何から何までご丁寧にありがとうございます！感謝します。

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