質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2168閲覧

Javascript FullCalendar resourcesの要素をaタグとしてHTMLに表示したい

tomaa

総合スコア84

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/04/24 15:07

編集2020/04/25 13:25

前提・実現したいこと

Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。
JavaScript Calendar

JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。

方法について、ご教授いただけないでしょうか?


追記
自分なりに方法を模索したところ、resourceRenderを利用して、カスタマイズする事が必要と理解しているのです、具体的な方法がわからない状況です。(追記)試したこと②


該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset='utf-8'/> 5 <style> 6 html, body { 7 margin: 0; 8 padding: 0; 9 font-family: Arial, Helvetica Neue, Helvetica, sans-serif; 10 font-size: 14px; 11 } 12 13 #calendar { 14 max-width: 900px; 15 margin: 40px auto; 16 } 17 </style> 18 <link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet'/> 19 <link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet'/> 20 <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet'/> 21 <script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script> 22 <script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script> 23 <script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script> 24 <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script> 25 26 <script> 27 document.addEventListener('DOMContentLoaded', function () { 28 var calendarEl = document.getElementById('calendar'); 29 30 var calendar = new FullCalendar.Calendar(calendarEl, { 31 plugins: ['resourceTimeline'], 32 defaultView: 'resourceTimelineDay', 33 header: { 34 left: 'prev,next', 35 center: 'title', 36 right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth' 37 }, 38 resourceLabelText: 'Rooms', 39 resources: [ 40 {id: 'a', 41 title: 'room1', 42 url: 'http://google.com/' 43 }, 44 ], 45 }); 46 calendar.render(); 47 }); 48 </script> 49 50</head> 51<body> 52<div id='calendar'></div> 53</body> 54 55</html>

下記のコードのtitle: 'room1',をクリックすると、urlへ遷移する

javascript

1resources: [ 2 { 3 id: 'a', 4 title: 'room1', 5 url: 'http://google.com/', 6 }, 7]

試したこと①

eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。

javascript

1resourceClick: function (info) { 2 info.jsResource.preventDefault(); 3 4 if (info.resource.url) { 5 window.open(info.resource.url); 6 } 7 },

(追記)試したこと②

titleをaタグで囲い、resourceRenderを利用のパターンも機能しません。

javascript

1resources: [ 2 { 3 id: 'a', 4 title: '<a href="http://google.com/">room1</a>', 5 }, 6], 7 8resourceRender: function (renderInfo,element) { 9 element.find('span.fc-title').html(element.find('span.fc-title').text()); 10}

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

開発環境

  • HTML 5
  • FullCalendar:v4

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/04/24 15:17

プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
tomaa

2020/04/24 15:23

コメントありがとうございます。 追記しました、情報少なくすみません。 resourceとeventは、Javascript共通のものではないのですね。
kei344

2020/04/24 15:23

リンク先が合っているなら、ライブラリ名は「FullCalendar」です。質問タイトルの「Javascript」を「FullCalendar」に書き換えたほうがわかる人の目に届きやすいとは思います。
tomaa

2020/04/24 15:25

編集しました。アドバイスありがとうございます。
m.ts10806

2020/04/24 21:39

ただ、これだけだと誰も再現できないのでは。 本当にこれだけですか? HTML,CSSはゼロですか?JavaScriptもこれだけですか?
tomaa

2020/04/25 02:04

コメントありがとうございます。 追記でCDN仕様のコードを加えました。 eventClickでは、urlに遷移する事ができたたのですが、今回遷移したい要素はresourcesとなり、難儀しています。
guest

回答1

0

自己解決

resourceRender内に以下のコードを追加して対応しました。

js

1let getUrl = info.resource.extendedProps.url; 2let getTitle = info.resource.extendedProps.title 3const atag = document.createElement("a"); 4atag.href = getUrl; 5atag.innerText = getTitle; 6elem.querySelector('.fc-cell-content').appendChild(atag); 7elem.querySelector('.fc-cell-content').removeChild(elem.querySelector('.fc-cell-text'));

投稿2020/05/02 21:17

tomaa

総合スコア84

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問