質問編集履歴

6 追記記入

tomaa

tomaa score 67

2020/04/25 22:25  投稿

Javascript FullCalendar resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。
[JavaScript Calendar
](https://fullcalendar.io/)
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
---  
**追記**  
自分なりに方法を模索したところ、[resourceRender](https://fullcalendar.io/docs/resourceRender)を利用して、カスタマイズする事が必要と理解しているのです、具体的な方法がわからない状況です。(追記)試したこと②  
 
---  
### 該当のソースコード
```html
<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'/>
   <style>
       html, body {
           margin: 0;
           padding: 0;
           font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
           font-size: 14px;
       }
       #calendar {
           max-width: 900px;
           margin: 40px auto;
       }
   </style>
   <link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet'/>
   <link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet'/>
   <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet'/>
   <script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>
   
   <script>
       document.addEventListener('DOMContentLoaded', function () {
           var calendarEl = document.getElementById('calendar');
           var calendar = new FullCalendar.Calendar(calendarEl, {
               plugins: ['resourceTimeline'],
               defaultView: 'resourceTimelineDay',
               header: {
                   left: 'prev,next',
                   center: 'title',
                   right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
               },
               resourceLabelText: 'Rooms',
               resources: [
                   {id: 'a',
                    title: 'room1',
                    url: 'http://google.com/'
                   },
               ],
           });
           calendar.render();
       });
   </script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
```
下記のコードのtitle: 'room1',をクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと①
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
### 試したこと②
### (追記)試したこと②
titleをaタグで囲い、resourceRenderを利用のパターンも機能しません。
```javascript
resources: [
   {
    id: 'a',
    title: '<a href="http://google.com/">room1</a>',
   },
],
resourceRender: function (renderInfo,element) {
   element.find('span.fc-title').html(element.find('span.fc-title').text());
}
```
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
- FullCalendar:v4
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

5 内容編集

tomaa

tomaa score 67

2020/04/25 22:20  投稿

Javascript FullCalendar resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。
[JavaScript Calendar
](https://fullcalendar.io/)
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
### 該当のソースコード
```html
<!DOCTYPE html>
<html>
<head>
   <meta charset='utf-8'/>
   <style>
       html, body {
           margin: 0;
           padding: 0;
           font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
           font-size: 14px;
       }
       #calendar {
           max-width: 900px;
           margin: 40px auto;
       }
   </style>
   <link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet'/>
   <link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet'/>
   <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet'/>
   <script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>
   <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>
   
   <script>
       document.addEventListener('DOMContentLoaded', function () {
           var calendarEl = document.getElementById('calendar');
           var calendar = new FullCalendar.Calendar(calendarEl, {
               plugins: ['resourceTimeline'],
               defaultView: 'resourceTimelineDay',
               header: {
                   left: 'prev,next',
                   center: 'title',
                   right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
               },
               resourceLabelText: 'Rooms',
               resources: [
                   {id: 'a',
                    title: 'room1',
                    url: 'http://google.com/'
                   },
               ],
           });
           calendar.render();
       });
   </script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
```
下記のコードのroomをクリックすると、urlへ遷移する
下記のコードのtitle: 'room1',をクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと
### 試したこと
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
 
### 試したこと②  
 
titleをaタグで囲い、resourceRenderを利用のパターンも機能しません。  
```javascript  
resources: [  
   {  
    id: 'a',  
    title: '<a href="http://google.com/">room1</a>',  
   },  
],  
 
resourceRender: function (renderInfo,element) {  
   element.find('span.fc-title').html(element.find('span.fc-title').text());  
}  
```  
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
- FullCalendar:v4
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

4 追記記入

tomaa

tomaa score 67

2020/04/25 11:02  投稿

Javascript FullCalendar resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。
[JavaScript Calendar
](https://fullcalendar.io/)
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
### 該当のソースコード
 
```html  
<!DOCTYPE html>  
<html>  
<head>  
   <meta charset='utf-8'/>  
   <style>  
       html, body {  
           margin: 0;  
           padding: 0;  
           font-family: Arial, Helvetica Neue, Helvetica, sans-serif;  
           font-size: 14px;  
       }  
 
       #calendar {  
           max-width: 900px;  
           margin: 40px auto;  
       }  
   </style>  
   <link href='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css' rel='stylesheet'/>  
   <link href='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.css' rel='stylesheet'/>  
   <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.css' rel='stylesheet'/>  
   <script src='https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js'></script>  
   <script src='https://unpkg.com/@fullcalendar/timeline@4.4.0/main.min.js'></script>  
   <script src='https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js'></script>  
   <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.4.0/main.min.js'></script>  
     
   <script>  
       document.addEventListener('DOMContentLoaded', function () {  
           var calendarEl = document.getElementById('calendar');  
 
           var calendar = new FullCalendar.Calendar(calendarEl, {  
               plugins: ['resourceTimeline'],  
               defaultView: 'resourceTimelineDay',  
               header: {  
                   left: 'prev,next',  
                   center: 'title',  
                   right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'  
               },  
               resourceLabelText: 'Rooms',  
               resources: [  
                   {id: 'a',  
                    title: 'room1',  
                    url: 'http://google.com/'  
                   },  
               ],  
           });  
           calendar.render();  
       });  
   </script>  
 
</head>  
<body>  
<div id='calendar'></div>  
</body>  
 
</html>  
```  
 
下記のコードのroomをクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
- FullCalendar:v4
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

3 内容編集

tomaa

tomaa score 67

2020/04/25 00:25  投稿

Javascript resourcesの要素をaタグとしてHTMLに表示したい
Javascript FullCalendar resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。
[JavaScript Calendar
](https://fullcalendar.io/)
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
### 該当のソースコード
下記のコードのroomをクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
- HTML 5
- FullCalendar:v4
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

2 内容編集

tomaa

tomaa score 67

2020/04/25 00:20  投稿

Javascript resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
こちらのライブラリを利用しています。  
[JavaScript Calendar  
](https://fullcalendar.io/)  
 
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
### 該当のソースコード
下記のコードのroomをクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

1 内容編集

tomaa

tomaa score 67

2020/04/25 00:16  投稿

Javascript resourcesの要素をaタグとしてHTMLに表示したい
### 前提・実現したいこと
Javascript,HTMLを使ってWEB開発をしています。
JavaScriptのresourcesの要素をHTMLに表示した際に、aタグとしてリンクを付けて使用したく、コードを編集しているのですが、希望どおりに動きになってくれません。
方法について、ご教授いただけないでしょうか?
### 該当のソースコード
下記のコードのroomをクリックすると、urlへ遷移する
```javascript
resources: [
   {
    id: 'a',
    title: 'room1',
    url: 'http://google.com/',
   },
]
```
### 試したこと
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
eventClickのコードを参考にresourceClickとして編集しましたが、機能しません。
```javascript
resourceClick: function (info) {
           info.jsResource.preventDefault();
           if (info.resource.url) {
               window.open(info.resource.url);
           }
       },
```
### 補足情報(FW/ツールのバージョンなど)
開発環境
- HTML 5
  • JavaScript

    38634 questions

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

  • HTML5

    10484 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る