https://www.kyoto-station-building.co.jp/app/themes/kyoto-station-…/common/js/event.js?ver=20261002-0753

1const eventArea = {
2  data:null,
3  currentDate:null,
4}
5
6eventArea.addEventDateList = () => {
7  let dom_dateList = document.getElementsByClassName("js_event_date_list")
8  let _date = new Date();
9  let dayList = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
10  let _html = "";
11  if(dom_dateList.length > 0) {
12    for(i = 0; i < 14; i++){
13      let activeClass = (_date.getDate() == new Date().getDate() )?" active":"";
14      let dateText = _date.toLocaleDateString("ja-JP", {year: "numeric",month: "2-digit",day: "2-digit"});
15
16      _html += `<button type="button" class="date_item${activeClass}" data-date="${dateText}">`
17      _html += `<p class="date_text">${_date.getDate()}</p>`
18      if(_date.getDay() == 6) {
19        _html += `<p class="yobi_text blue">${dayList[_date.getDay()]}</p>`
20      } else if (_date.getDay() == 0) {
21        _html += `<p class="yobi_text red">${dayList[_date.getDay()]}</p>`
22      } else {
23        _html += `<p class="yobi_text">${dayList[_date.getDay()]}</p>`
24      }
25      _html += `</button>`
26      _date.setDate(_date.getDate() + 1)
27    }
28    for (i = 0;i < dom_dateList.length;i++) {
29      dom_dateList[i].innerHTML = _html;
30    }
31  }
32}
33
34eventArea.updateArea0Result = () => {
35  let html = "";
36    html += `
37    <p class="white">予定されておりません</p>
38    `
39  $(".event_card_list .event_card_list_inner").html(html);
40}
41
42eventArea.updateArea = (filterData) => {
43  let dayList = ["日","月","火","水","木","金","土"]
44  let html = "";
45  filterData.forEach((v,i) => {
46    html += `
47    <div class="event_card_item">
48      <a href="${v.url}">
49        <div class="card_image">
50          <img src="${v.image_path}" width="404" height="270" loading="lazy" alt="${v.title}">
51        </div>
52        <div class="card_body">
53          <p class="title">${v.title}</p>
54          <div class="description_area">
55            <p class="date_text">${new Date(v.start).getFullYear()}年${new Date(v.start).getMonth() + 1}月${new Date(v.start).getDate()}日 (${dayList[new Date(v.start).getDay()]})`;
56    if ('' !== v.end) {
57      html += `〜<br>${new Date(v.end).getFullYear()}年${new Date(v.end).getMonth() + 1}月${new Date(v.end).getDate()}日 (${dayList[new Date(v.end).getDay()]})`;
58    }
59    html += `</p>`;
60    if (0 !== v.place.length) {
61      html += `<p class="place_text">${v.place}</p>`
62    }
63    html += `</div>
64        </div>
65      </a>
66    </div>
67    `
68  });
69  $(".event_card_list .event_card_list_inner").html(html);
70}
71
72eventArea.filterData = () => {
73  let currentDate = +(eventArea.currentDate.replace(/\//g,''));
74  let filterData = eventArea.data.filter((v,i) => {
75    let start = +(v.start.replace(/\//g,''));
76    let end = +(v.end.replace(/\//g,''));
77    if (0 !== end) {
78      return (start <= currentDate && currentDate <= end);
79    } else {
80      return (start === currentDate);
81    }
82  });
83  if(filterData.length === 0) {
84    eventArea.updateArea0Result();
85  } else {
86    eventArea.updateArea(filterData);
87  }
88}
89
90eventArea.changeCurrentDate = (currentDate) => {
91  eventArea.currentDate = currentDate;
92  eventArea.filterData();
93}
94
95eventArea.setUIEvent = () => {
96  $("body").on("click","#js_event_date_list .date_item", (e) => {
97    let currentDate = $(e.currentTarget).attr("data-date");
98    eventArea.changeCurrentDate(currentDate);
99    $(e.currentTarget).parent().find(".date_item").removeClass("active");
100    $(e.currentTarget).addClass("active");
101  })
102}
103
104eventArea.loadData = () => {
105  const jsonPath = themeUrl + "/common/js/event.json"
106  fetch(jsonPath)
107  .then(response => response.json())
108  .then(data => {
109    eventArea.data = data;
110    eventArea.init();
111  })
112  .catch(error => {
113    console.error('エラー:', error);
114  });
115}
116
117eventArea.init = () => {
118  eventArea.addEventDateList();
119  let currentDate = $("#js_event_date_list .date_item.active").attr("data-date");
120  eventArea.changeCurrentDate(currentDate);
121  eventArea.setUIEvent();
122}
123
124eventArea.loadData();