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

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

ただいまの
回答率

90.99%

  • JavaScript

    13868questions

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

jq.schedule.jsでスケジュールを追加する方法

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 543

asn

score 13

jq.schedule.jsでスケジュールアプリを作ろうとしています。
https://github.com/ateliee/jquery.schedule

DEMOプログラムでDEMOスケジュールの作成を行いました。
その後、スケジュールを追加するコードを追加したく、以下のコードを追記したところ以下でエラーとなりました。
Uncaught TypeError: $(...).addScheduleData is not a function

<script type="text/javascript">
$("#schedule").addScheduleData({
start:'16:00',
end:'17:00',
text:'会議1',
click: function(node, data) {
console.log('click event')
}
});
</script>

JavaScriptの初心者で初歩的な質問で申し訳ありませんが、
よろしくお願いいたします。

HTMLコード追加

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq.Schedule学習</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript" language="javascript"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script type="text/javascript" src="jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    var $sc = jQuery("#schedule").timeSchedule({
        startTime: "10:00", // schedule start time(HH:ii)
        endTime: "24:00",   // schedule end time(HH:ii)
        widthTime:60 * 10,  // cell timestamp example 10 minutes
        timeLineY:60,       // height(px)
        verticalScrollbar:20,   // scrollbar (px)
        timeLineBorder:2,   // border(top and bottom)
        debug:"#debug",     // debug string output elements
        rows : {
            '1' : {
                title : '会議1',
                schedule:[
                    {
                        start:'10:10',
                        end:'12:00',
                        text:'Text Area',
                        data:{
                        }
                    },
                    {
                        start:'11:00',
                        end:'14:00',
                        text:'Text Area',
                        data:{
                        }
                    }
                ]
            },
            '2' : {
                title : '会議2',
                schedule:[
                    {
                        start:'16:00',
                        end:'17:00',
                        text:'Text Area',
                        data:{
                        }
                    }
                ]
            }
        },
        change: function(node,data){
            alert("change event");
        },
        init_data: function(node,data){
        },
        click: function(node,data){
            alert("click event");
        },
        append: function(node,data){
        },
        time_click: function(time,data){
            alert("time click event");
        },
    });
});
</script>
</head>
<body>

        <div style="padding: 0 0 40px;">
        <div id="schedule"></div>
        </div>

<script type="text/javascript">
$("#schedule").addScheduleData({
  start:'16:00',
  end:'17:00',
  text:'会議1',
  click: function(node, data) {
    console.log('click event')
  }
});
</script>

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2017/09/30 19:11

    HTMLを追記していただけませんか?

    キャンセル

  • asn

    2017/09/30 19:18

    ご連絡ありがとうございます。承知いたしました。

    キャンセル

回答 1

+1

Uncaught TypeError: $(...).addScheduleData is not a function

上記は書いてある通りです。$("#schedule")にaddScheduleDataという関数はありません。
jQuery("#schedule").timeSchedule({省略}).addScheduleDataならあります。

なので今回のコードでいうと
$sc.addScheduleDataはあるということです。
(ただし、下のほうに書いているscriptタグの内容は、readyより先に呼ばれるので、
呼び出し順序は考える必要があります)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    13868questions

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