jq.schedule.jsの値の取得について

本サービスを初めて利用する初心者なので、質問方法が誤っていたらご指摘下さい。

「jq.schedule.js」で時間帯を変更した際、開始時間、終了時間等の値を
取得する方法を教えて頂きたくよろいしくお願い致します。

チェンジイベントの所で、変数を取得出来れば思いましたが、
どのセレクタとメソッドを指定すれば開始時間や終了時間等が
取得できるのかわからず、教えて頂けないでしょうか？

   change: function(node,data){

　　 alert($(this).start); <----- 画面に[undefined]が表示
alert($(time).index());　<----- 画面無表示
},

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jq.Schedule Demo</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="../js/jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="../css/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: "08:50", // schedule start time(HH:ii)
        endTime: "21:00",   // schedule end time(HH:ii)
        widthTime:60 * 10,  // cell timestamp example 10 minutes
        timeLineY:60,       // height(px)
        verticalScrollbar:20,   // scrollbar (px)
        timeLineBorder:10,   // border(top and bottom)
        debug:"#debug",     // debug string output elements
        
	rows : {
            '1' : {
                title : 'テスト　太郎',
                schedule:[
                    {
                        start:'09:00',
                        end:'10:00',
                        text:'補助',
                        data:{
                        }
                    },
                  
                ]
            },

  

        },

        change: function(node,data){
          alert("change event"); 
            alert($(this).start); 
          alert(time);
          alert($(time).index());
	},

        init_data: function(node,data){
        },

        click: function(node,data){
            alert("click event");
  
        },

        append: function(node,data){
        },

//        time_click: function(time,data){
// 	    alert($(time).index());
//        },

	time_click: function(node,time,row,data){ 
	alert(row); 
        alert(time);
	
	},


    });
});
</script>
</head>
<body>
    <div class="container">
       <h2 id="title">ｘｘｘｘ管理</h2>        
        <div style="padding: 0 0 40px;">
        <div id="schedule"></div>
        </div>
    </div>        
    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>
</html>

kei344

2018/12/11 09:15

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

accelER

2018/12/12 00:41

ご指摘ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、下記で各Clickイベントは取得できる事を確認しましたがどうでしょうか？
書いてるコードはほぼ質問者様と同じでございます。
undefinedとなるのは定義していない為です。
各メソッドのnode,dataでクリックイベントの詳細は取れますのでご確認ください。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5    <title>jq.Schedule Demo</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <!-- jQuery -->
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
9    <!-- jQuery UI -->
10    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
11    <link
12      href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"
13      rel="stylesheet"
14      media="screen"
15    />
16    <link href="css/style.css" rel="stylesheet" />
17    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
18    <script type="text/javascript" src="js/jq.schedule.js"></script>
19    <script type="text/javascript" src="js/main.js"></script>
20    <style>
21      body {
22        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
23      }
24    </style>
25  </head>
26
27  <body>
28    <div class="container">
29      <h2 id="title">ｘｘｘｘ管理</h2>
30      <div style="padding: 0 0 40px;"><div id="schedule"></div></div>
31    </div>
32    <div id="footer"><div class="container"></div></div>
33  </body>
34</html>

js
1# main.js
2"use strict";
3
4$(function () {
5  var $sc = $("#schedule").timeSchedule({
6    startTime: "08:50", // schedule start time(HH:ii)
7    endTime: "21:00", // schedule end time(HH:ii)
8    widthTime: 60 * 10, // cell timestamp example 10 minutes
9    timeLineY: 60, // height(px)
10    verticalScrollbar: 20, // scrollbar (px)
11    timeLineBorder: 10, // border(top and bottom)
12    debug: "#debug", // debug string output elements
13
14    rows: {
15      "1": {
16        title: "テスト　太郎",
17        schedule: [{
18          start: "09:00",
19          end: "10:00",
20          text: "補助",
21          data: {}
22        }]
23      }
24    },
25
26    change: function change(node, data) {
27      console.log("change event");
28      console.log(node);
29      console.log(data);
30    },
31    init_data: function init_data(node, data) {},
32    click: function click(node, data) {
33      console.log("click event");
34      console.log(node);
35      console.log(data);
36    },
37    append: function append(node, data) {},
38    time_click: function time_click(node, time, row, data) {
39      console.log("time event");
40      console.log(node);
41      console.log(time);
42      console.log(row);
43      console.log(data);
44    }
45  });
46});