大変失礼なことをしてしまいすいませんでした。
前提・実現したいこと
下記のボタンをクリックした時に月曜日の全時間帯を - と表示させれたらいいなと思います。
失礼なことをした以上、回答を頂けるとは思いませんがもしそれでもご教授頂けたら幸いです。
該当のソースコード
javscript
1<!-- JS --> 2<script> 3{ 4 const 5 day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], 6 day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'], 7 doc = document; 8 9 const 10 A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))), 11 B = (d, n) => d.setDate (d.getDate () + n), 12 C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''), 13 D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 14 E = (e, d) => { 15 let 16 [a,,b] = A (e, 'label', 'br', 'label'), 17 w = d.getDay () ; 18 a.textContent = d.getDate (); 19 b.textContent = day_jname[w]; 20 e.classList.add (day_name[w]); 21 }, 22 F = d => { 23 let m = d.getMonth (); 24 return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 + 25 (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m); 26 }, 27 G = ary => ary.reduce ((a, b) => { 28 let 29 c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b, 30 d = D (c); 31 if (! (d in a)) a[d] = []; 32 a[d][F(c)] = true; 33 return a; 34 }, { }) 35 , 36 H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()), 37 I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':') 38 ; 39 40 41 class Shedule { 42 constructor (date = new Date, range = 7, plan = []) { 43 this.current = H (date); 44 this.date = H (date); 45 this.range = range; 46 this.plan = G (plan); 47 this.table = document.createElement ('table'); 48 49 this.remake (); 50 } 51 52 53 add (day = this.range) { 54 let d = H (this.current); 55 d.setDate (d.getDate () + day); 56 if (+this.date <= +d) { 57 this.current = d; 58 this.remake (); 59 } 60 } 61 62 63 remake () { 64 this.prev_btn = this.next_btn = null; 65 let t = this.table; 66 [...t.childNodes].forEach (e => e.remove ()); 67 68 let 69 h = t.createTHead (), 70 tr0 = h.insertRow (-1), 71 tr1 = h.insertRow (-1), 72 d = H (this.current), 73 s = tr0.insertCell (-1), 74 c = 1, 75 m = d.getMonth (); 76 77 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 78 let td = tr1.insertCell (-1); 79 if (m !== d.getMonth ()) { 80 s.colSpan = c - 1; 81 s = tr0.insertCell (-1); 82 m = d.getMonth (); 83 c = 1; 84 } 85 s.textContent = C (d); 86 E (td, d); 87 } 88 s.colSpan = c - 1; 89 90 let e = tr0.insertCell (0); 91 e.textContent = '前の一週間'; 92 e.classList.add ('button'); 93 e.rowSpan = 2; 94 this.prev_btn = e; 95 96 e = tr0.insertCell (-1); 97 e.textContent = '次の一週間'; 98 e.classList.add ('button'); 99 e.rowSpan = 2; 100 this.next_btn = e; 101 102 //start--時間の時と分の分割処理 103 var name_start = document.getElementById('sample').value; 104 105 var result = name_start.substr( 0, 2 ); 106 var result2 = name_start.substr( 3, 4 ); 107 108 var hour_start = result, minutes_start = result2; 109 //---end 110 111 //finish 112 var name_finish = document.getElementById('sample2').value; 113 114 var result_finish = name_finish.substr( 0, 2 ); 115 var result2_finish = name_finish.substr( 3, 4 ); 116 117 var hour_end = result_finish, minutes_end = result2_finish; 118 119 //---end 120 let 121 begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。 122 end = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間 //ここをどうにかしたい 123 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間 124 o = F (this.current), 125 rst = [ ]; 126 127 for (let d = begin; d < end; d = new Date (+step + (+d))) { 128 let 129 a = new Array (this.rangi), 130 b = I (d), 131 c = this.plan[b] || []; 132 133 for (let i = 0; i < this.range; i++) 134 a[i] = c[o + i] ? '-' : '◎'; 135 136 rst.push ([b, ...a, b]); 137 } 138 139 let [tb] = A (t, 'tbody'); 140 rst.forEach (r => { 141 let tr = tb.insertRow (-1); 142 r.forEach (c => tr.insertCell (-1).textContent = c) 143 }); 144 145 } 146 147 handleEvent ({target: t}) { 148 if (t === this.prev_btn) this.add (-this.range); 149 if (t === this.next_btn) this.add (this.range); 150 } 151 152 } 153 154 this.Shedule = Shedule; 155} 156 157 158var today = new Date(); 159var year = today.getFullYear(); 160var month = today.getMonth() + 1; 161var day = today.getDate(); 162var tds = document.querySelectorAll('td'); 163var yobi= new Array("日","月","火","水","木","金","土"); 164document.getElementById('acdn-target').value = year+'年'+month+'月'+ day+'日 '; 165 166 167document.querySelector('#calendar').addEventListener('click', event => { 168 const target = event.target; 169 if (target.nodeName.toLowerCase() !== 'td') { 170 return true; 171 } 172 173 if (!(target.closest('tbody') && 1 <= target.cellIndex && target.cellIndex <= 14)) { 174 return true; 175 } 176 177 const time = target.parentNode.cells[0].textContent; 178 const table = target.closest('table'); 179 const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent.slice(0,-4); 180 const ymrow = table.tHead.rows[0]; 181 const ym = (target.cellIndex <= ymrow.cells[1].colSpan ? ymrow.cells[1] : ymrow.cells[2]).textContent; 182 document.getElementById('acdn-target').value = ym + date + '日' + time; 183 return true; 184}, false); 185 186</script>
ん?
document.getElementById : getElement
document.getElementsByClassName : getElements
document.getElementsByName : getElements
document.getElementsByTagName : getElements
s なし → 最初の一つ
sあり → 配列で取得
という前提はわかってますか?
「getElementByIdをクリック」とは、エディタ上でクリックするのでしょうか。それとも「getElementById」と書いたボタンでも配置されているのでしょうか。状況がわかりません。
@asahina 1979さん
前提は理解しています。
@kei344さん
view画面ではクリックし時の状況を想定しています。
大変分かりにくくて申し訳ございません。定休日table内の二列目のtd(○と×が表示されている列)がクリックできるようになっています。
それであれば「getElementById」は特定のidを付与された要素を探すための関数なので、タイトルおよび本文内の使い方は適切では有りません。修正されることをお勧めします。
「getElementById」では定休日に関するtableのtdをクリックした時にtd内を文字を入れ替えるだけで特に問題が無いかと思うのですが。
カレンダーと定休日のテーブルは分離しているのでUIデザインとしては問題があるかもしれませんが、実現したい処理に対して支障は無いかと思います。
idは画面内にひとつだけ。これは特にJavaScriptにはもろに影響を受けます。でも、例えば月曜日って週には一度ですけど月に何度も出てきますよね?
「特定要素」なのに複数出てきてる状態で、monのみで特定させるのは無理です。
指摘通り「getElementByIdをクリック」できるわけではないです。「クリックイベントが起きたときにその要素がgetElementByIdで取得した要素だったら」というのはできなくはないですが。
使い方や概念が間違っていると話が全く噛み合いません。そこは仕様なのでオレオレ表現はなるべく控えないとまともなアドバイスは得られませんよ。エスパーはいません。
そうなのですね。jsに関して詳しくなく失礼な発言をして申し訳ございませんでした。
それでは、定休日のidはなくgetElementsByClassNameとし、classにすればいいのでしょうか?
利用したい(できる)データは何か?
それをどう表現したいのか?
それをどう操作したいのか?
その結果をどう反映させたいのか?
「表現」するプログラムは書いてみたけれど、質問があまりにも散文的で他は理解できない。もうプロに依頼すべきではない?
どうにもできないからって、まるっきり別の質問にするのは
上でコメントくださった方々に失礼すぎませんか? to質問者さん
大変申し訳ございませんでした。質問を元に戻させていただきました。
td要素を変更できたとして、きっとそれだけで終わりではないでしょ?!
エスパーだから先が読める!
正直に言いますと、
・定休日の設定
・固定のお昼休みがある場合毎日その時間帯は(ー)にしたい
・定休日ではない日に数時間だけ予定が出来た時にその時間帯だけ(ー)としたいです。
とこの3つを最終的に実現できたらいいなと思いながら技術書と見ながらなんとか実装しようとはしているのですが、思いの外難しくて手こずっている次第です。
そのため、何度も質問させて頂きながらアドバイスやご教示して頂いたコードを元に実装しています。
今回は定休日に関してどうしても実装できそうになかったので質問させて頂きました。
根本はそこじゃないんだ!
変更した情報をどこに保存するかだ!
変更した情報を印刷して終わりなら現状でちょっといじるだけなので簡単なのさ!
「送信」とはサーバーに送信するのでしょ?!
サーバーに送る情報の書式とか考えないわけ?
railsで実装いるので、railsのヘルパーメソッドのform_forで情報をサーバーに送信しています。
form_forで送信したデータはinput type="hidden" value=<% date(適当) %>でviewに見えない形にしつつ、inputのvalueをjsに渡し、○、ーの判定をさせようかと考えています。
初学者のため、プロの皆さんから見たら適切な方法ではないかもしれませんがそのような形で何とか実装できないかとやっています。
小出し小出しで・・・ 正直、疲れました。
休息時間帯やらインターバル時間の設定で、日付はどうやって決めるのですか?
変更があったとき input要素で渡す、value値の書式はどうするのですか?
最初にページを開いたときに、サーバーから受け取る値は?
それをもとに表を作るのではないのですか?
それと、日付と時間の軸が逆だとまだ作りやすいと思います。
(提示された例で、colspanの設定に興味があったので書いてみました)
送信フォームも提示してくれたほうがまだ作りやすい。
let c = new Schedule (new Date,14,BUSY), {table: d} = c;
c.current に表の始まりとなる日付の DateObject が保持されています
c.add (n); //c.current がn日移動します
c.remake (); で表が書き換えられます
なんちゃってオブジェクト指向的なプログラムですが
きっと諦めなければ、あなたならできる!
それでは、頑張って作ってください。
一応全コードは載せましたが、恐らく高校生の私の力ではまだ意図したものを作れそうにないので何か別な実装方法で考えてみます。
せっかく色々ご教授して頂きましたが私の理解が追いつかないが為に多大なるご迷惑をおかけしてすいませんでした。
コメントにして頂いた記述を回答にしていただければベストアンサーにし、本質問を終わらせて頂きたいので差し支えがなければ回答にコピペしていただけないでしょうか?
コメントをしていただいた方々、多大なるご迷惑をおかけして申し訳ございませんでした。
回答1件
あなたの回答
tips
プレビュー