サイドバーにスケジュール表示機能をつけたいと思っています。

現在作成中のサイトに於いて、サイドバーに添付画像のようなスケジュールを表示する機能をつけたいと思っています。

機能としましては
1）「20日」「1月21日」「22日」「当日」の部分がリンクとなっており、
クリックした日のスケジュールが下記に表示される。
2）「20日」をクリックするとバーの表示は「19日＜＜1月20日＞＞21日　　当日」となり
下には1月20日のスケジュールを表示(22日の方も同様)
3）「当日」クリックで本日のスケジュールに戻る

【ソース】
＜html＞

<div class="contentBox">
  <div class="heading flex">
    <div class="schedule">20日&lt;&lt;1月21日&gt;&gt;22日</div>
    <div class="today">当日</div>
  </div>
  <div class="text">
    ～スケジュール～
  </div>
</div><!-- /contentBox -->

＜css＞

.contentBox {
  border: 1px solid #f2f2f2;
  box-sizing: border-box;
  margin-bottom: 1em;
}
.contentBox a {
  color: #fff;
}
.contentBox a:hover {
  color: #ccc;
}
.heading {
  background: #86888a;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  position: relative;
}
.schedule {
  box-sizing: border-box;
  float: left;
  padding-right: 5px;
  width: 80%;
  /* 3点リーダ */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today {
  min-width: 30px;
  width: 12%;
}

※こちらのソースはまだ仮のものであるため、この組み方では実現できない、等ありましたら組み替えることは可能です。

ざっくりとしたイメージで申し訳ないのですが、どうかお力をお貸しいただければと思います。
(他に必要な情報、不明な箇所等ありましたら追記いたしますのでお申し付けください)

m.ts10806

2019/03/20 00:45

スケジュール自体はどこからどう取得するのでしょうか。というか、質問は何でしょうか。「力を貸して」と言われてもどこにどう関わってほしいのかが書かれていませんので、具体的に追記願います。

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

回答1件

ベストアンサー

やっつけで

javascript
1<script>
2function setSchedule(d){
3  var dd=[{},{},{}];
4  var text     = d.setDate(d.getDate()-1);
5  dd[0].text   = text-text%(60*60*24*1000);
6  text         = d.setDate(d.getDate()+1);
7  dd[1].text   = text-text%(60*60*24*1000);
8  text         = d.setDate(d.getDate()+1);
9  dd[2].text   = text-text%(60*60*24*1000);
10  dd[0].date   = new Date(dd[0].text);
11  dd[1].date   = new Date(dd[1].text);
12  dd[2].date   = new Date(dd[2].text);
13  dd[0].content= dd[0].date.getDate()+"日<<";
14  dd[1].content= (dd[1].date.getMonth()+1)+"月"+dd[1].date.getDate()+"日";
15  dd[2].content= ">>"+dd[2].date.getDate()+"日";
16  with(document.querySelector('.schedule .prev')){
17    textContent     = dd[0].content;
18    dataset["date"] = dd[0].text;
19  }
20  with(document.querySelector('.schedule .current')){
21    textContent     = dd[1].content;
22    dataset["date"] = dd[1].text;
23  }
24  with(document.querySelector('.schedule .next')){
25    textContent     = dd[2].content;
26    dataset["date"] = dd[2].text;
27  }
28}
29window.addEventListener('DOMContentLoaded', function(e){
30  setSchedule(new Date());
31  document.querySelector('.today').addEventListener('click',function(e){
32    var d=new Date();
33    setSchedule(d);
34  });
35  document.querySelector('.schedule .prev').addEventListener('click',function(e){
36    var d=new Date(parseInt(e.target.dataset["date"]));
37    setSchedule(d);
38  });
39  document.querySelector('.schedule .next').addEventListener('click',function(e){
40    var d=new Date(parseInt(e.target.dataset["date"]));
41    setSchedule(d);
42  });
43});
44</script>
45<div class="contentBox">
46  <div class="heading flex">
47    <div class="schedule"><span class="prev"></span><span class="current"></span><span class="next"></span></div>
48    <div class="today">当日</div>
49  </div>
50  <div class="text">
51    ～スケジュール～
52  </div>
53</div>