前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー