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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

Q&A

解決済

1回答

8991閲覧

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

ln-lv

総合スコア7

jQuery

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

0グッド

0クリップ

投稿2016/12/03 13:17

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

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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

JavaScript

1// (1) 2startTime: "16:00", // schedule start time(HH:ii)

CSS

1/* (2) */ 2#schedule .sc_menu, 3#schedule .sc_menu .sc_header { 4 height:60px; /* 適当な高さに。 */ 5} 6/* (3) */ 7#schedule .sc_menu .sc_header .sc_time { 8 text-align: left; 9}

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

投稿2016/12/04 08:45

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ln-lv

2016/12/12 08: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> についても、ご指摘有難うございます。削除したいと思います。
kei344

2016/12/12 09:13

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

2016/12/22 06:02

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

2017/01/11 16:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問