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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

fullcalendar v4 でのJSONファイルの読み込み

moorumoru
moorumoru

総合スコア0

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

4069閲覧

投稿2019/11/29 01:52

編集2022/01/12 10:58

実現したいことと発生している問題

3日ほど前に、JavaScriptを始めたばかりのものです。
現在、fullcalendarのカスタマイズを行っているのですが、
イベントの追加を大量に行いたいため、ローカルにJSONファイルでイベントデータを作成し、カレンダープログラムに読み込もうとしています。
そこで、events.jsonというファイルを作成したのですが、イベントとして読み込むことができません。

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='../packages/core/main.css' rel='stylesheet' /> <link href='../packages/daygrid/main.css' rel='stylesheet' /> <script src='../packages/core/main.js'></script> <script src='../packages/interaction/main.js'></script> <script src='../packages/daygrid/main.js'></script> <script src='../packages/core/locales/ja.js'></script> <script src="events.json"></script> <script> //function var dDate function getNowYMD(){ var dt = new Date(); var y = dt.getFullYear(); var m = ("00" + (dt.getMonth()+1)).slice(-2); var d = ("00" + dt.getDate()).slice(-2); dDate = y + "-" + m + "-" + d; } document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'ja', plugins: [ 'interaction', 'dayGrid' ], customButtons: { prev10: { text: '<<', click: function() { alert('10年前を表示します(仮)'); } }, next10 : { text: '>>', click: function() { alert('10年後を表示します(仮)'); } }, shukujitu: { text: '祝日', click: function() { alert('祝日を表示します(仮)'); } }, rokuyo: { text: '六曜', click: function() { alert('六曜を表示します(仮)'); } } }, header: { left: 'prev10,prevYear,prev,next,nextYear,next10 today', center: 'title', right: 'dayGridMonth shukujitu rokuyo', }, defaultDate: dDate, navLinks: true, // can click day/week names to navigate views businessHours: true, // display business hours editable: true, events: 'events.json', }); calendar.render(); }); </script> <style> body { margin: 40px 10px; padding: 0; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 0 auto; } </style> </head> <body> <div id='calendar'></div> </body> </html>

JSON

[ { "title": "unchi", "start": "2019-11-03", "constraint": "businessHours" }, { "title": "Meeting", "start": "2019-11-13", "constraint": "availableForMeeting", "color": "#257e4a" }, { "title": "Conference", "start": "2019-11-18", "end": "2019-11-20" }, { "title": "Party", "start": "2019-11-29" }, { "groupId": "availableForMeeting", "start": "2019-11-11T10:00:00", "end": "2019-11-11T16:00:00", "rendering": "background" }, { "groupId": "availableForMeeting", "start": "2019-11-13", "rendering": "background" }, { "start": "2019-11-24", "end": "2019-11-28", "overlap": false, "rendering": "background", "color": "#ff9f89" }, { "start": "2019-11-06", "end": "2019-11-11", "overlap": false, "rendering": "background", "color": "#ff9f89" } ]

試したこと

JSONファイルはネット上で正しくかけていると判定しましたため、HTMLおよびJavaScript内で正しく読み込めていないと考えています。

補足情報(参考にしているサイト)

FullCalendarバージョン4の設置サンプル。
Fullcalendar - events (as a json feed)

こちらのFullcalendarの公式サイトにてイベントデータの読み込みを行う関数が提示されているのですが、その使い方がわかりません…
Fullcalendar - eventDataTransform

初歩的な質問かもしれませんが、何卒よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy
Lhankor_Mhy

2019/11/29 03:44

エラーメッセージは出ていますか? エラーメッセージを確認の仕方がわからない場合、その旨をお知らせください。
moorumoru
moorumoru

2019/11/29 04:10

こちらでしょうか…? Access to XMLHttpRequest at 'file:///C:/Users/m/Desktop/js/fullcalendar-4.3.1/unchi/events.json?start=2019-10-27T00%3A00%3A00%2B09%3A00&end=2019-12-08T00%3A00%3A00%2B09%3A00' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. requestJson @ main.js:4273

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。