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

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

ただいまの
回答率

92.15%

  • jQuery

    3236questions

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

jq.schedule.jsを使ったタイムテーブルの初期値について

解決済

回答 1

投稿 2016/12/03 22:17

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

ln-lv

score 1

プログラミング初心者です。

jq.schedule.jsで6:00から29:00のタイムテーブルを作っています。

下記4点やりたいことですが、どこをどう書き換えるべきなのか分かりません。
どなたか教えていただけないでしょうか。

① 初期画面として、16:00からのタイムテーブルを表示したい
② タイトル行の幅を広げたい
③ 時間表示を左詰めにしたい
④ タイムテーブルを大きくして、A12まで表示できるようにしたい

イメージ説明

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイムテーブル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" language="javascript"></script>
<script src="https://code.jquery.com/![イメージ説明](dce41092bd8f3b95ba0f304fc9b610f3.png)1.4/jquery-ui.min.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/base/jquery-ui.css" />
<script type="text/javascript" src="jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/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>
<script type="text/javascript">
jQuery(document).ready(function(){
    var $sc = jQuery("#schedule").timeSchedule({
        startTime: "6:00", // schedule start time(HH:ii)
        endTime: "29:00",   // schedule end time(HH:ii)
        widthTime:60 * 15,  // cell timestamp example 10 minutes
        timeLineY:60,       // height(px)
        verticalScrollbar:10,   // scrollbar (px)
        timeLineBorder:10,   // border(top and bottom)
        debug:"#debug",     // debug string output elements
        rows : {
            '1' : {
                title : 'A1(2席)',
                schedule:[
                ]
            },
            '2' : {
                title : 'A2(2席)',
                schedule:[
                ]
            },
            '3' : {
                title : 'A3(2席)',
                schedule:[
                ]
            },
            '4' : {
                title : 'A4(2席)',
                schedule:[
                ]
            },
            '5' : {
                title : 'A5(2席)',
                schedule:[
                ]
            },
            '6' : {
                title : 'A6(2席)',
                schedule:[
                ]
            },
            '7' : {
                title : 'A7(2席)',
                schedule:[
                ]
            },
            '8' : {
                title : 'A8(2席)',
                schedule:[
                ]
            },
            '9' : {
                title : 'A9(2席)',
                schedule:[
                ]
            },
            '10' : {
                title : 'A10(2席)',
                schedule:[
                ]
            },
            '11' : {
                title : 'A11(2席)',
                schedule:[
                ]
            },
            '12' : {
                title : 'A12(2席)',
                schedule:[
                ]
            },
            '13' : {
                title : 'A13(4席)',
                schedule:[
                ]
            },
            '14' : {
                title : 'A14(4席)',
                schedule:[
                ]
            },
            '15' : {
                title : 'A15(4席)',
                schedule:[
                ]
            },
        },
        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 class="container">

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

  <!-- /container --></div>
  <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

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

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

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

使用されているライブラリはこれでしょうか。

【GitHub - ateliee/jquery.schedule: jquery and html schedule calendar】
https://github.com/ateliee/jquery.schedule

4はわかりませんが、それ以外なら下記のようにしてみてはいかがでしょうか。

// (1)
startTime: "16:00", // schedule start time(HH:ii)
/* (2) */
#schedule .sc_menu,
#schedule .sc_menu .sc_header {
    height:60px; /* 適当な高さに。 */
}
/* (3) */
#schedule .sc_menu .sc_header .sc_time {
    text-align: left;
}

また、_gaq.push(['_setAccount', 'UA-36251023-1']); などされていますが、jqueryscript.net の管理者でなければそれが含まれる <script></script> を削除してください

投稿 2016/12/04 17:45

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/12/12 17:12

    拙い質問に迅速にお答えいただき、大変ありがとうございます。
    ライブラリはその通りです。
    また、②③については、その通りに修正できました。ありがとうございます。

    ①の開始時刻についてですが、htmlのstartTimeは6:00のままで、デフォルトの画面表示として、16:00を指定したいです。(左にスクロールすると、16:00より手前のタイムテーブルが表示される。)
    ご指摘の通り、jq.schedule.jsファイルの、下記プログラム中 startTime: "16:00", としたのですが、どこにも変更が反映されない様子です。。このjq.schedule.jsファイルを書き換えた後に何か変更を反映するための作業が必要なのでしょうか?
    (function($) {
    $.fn.timeSchedule = function(options){
    var defaults = {
    rows : {},
    startTime: "16:00",
    endTime: "21:00",



    また、<script></script> についても、ご指摘有難うございます。削除したいと思います。

    キャンセル

  • 2016/12/12 18:13

    > jq.schedule.jsファイルを書き換えた後
    書き換えないでください。質問文にあるご自身のコードの中に「startTime」はありませんか?探してみてください。

    キャンセル

  • 2016/12/22 15:02

    htmlのstartTimeを変えると、タイムテーブルの開始の時間が16:00になってしまいます。
    そうではなく、タイムテーブルの開始の値は6:00のまま、画面を更新したときに、スクロールの開始が16:00から始まるようにしたいのです。。
    どのパラメータを変えればいいのか、、探していますが、見つかりません。。

    キャンセル

  • 2016/12/25 19:25

    scrollLeft() でスクロールしてしまえばよいのでは?

    【.scrollLeft() | jQuery 1.9 日本語リファレンス | js STUDIO】
    http://js.studio-kingdom.com/jquery/css/scroll_left

    キャンセル

  • 2017/01/12 01:32

    ありがとうございます!!!おかげ様で、無事に実現することができました。このような関数があるのですね!(どうやって見つけたんだろう。。)
    最後まで何度もご丁寧にお答え頂き、本当にありがとうございました。とっても助かりました😊

    キャンセル

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

ただいまの回答率

92.15%

関連した質問

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

  • jQuery

    3236questions

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

閲覧数の多いjQueryの質問