투데이 오늘 날짜 요일 표시

LikeLion-at-DGU · Jul 10, 2022 · bc7443b · bc7443b
1 parent e8843dd
commit bc7443b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 35 deletions.
diff --git a/runningmate/mateapp/templates/mateapp/calendar.html b/runningmate/mateapp/templates/mateapp/calendar.html
@@ -154,12 +154,15 @@
     </div>
 
     <div class="item2" id="today_date">
-      <button class="nav-btn go-prev" onclick="preDay()">&lt;</button>
+      <!-- <button class="nav-btn go-prev" onclick="preDay()">&lt;</button> -->
       <div id="today_day">
-
+        <div class="day_week">
+        </div>
+        <div class="date_week">
+        </div>
       </div>
+      <!-- <button class="nav-btn go-next" onclick="nextDay()">&gt;</button> -->
       <script src="{% static 'js/today.js'%}"></script>
-      <button class="nav-btn go-next" onclick="nextDay()">&gt;</button>
     </div>
 
     <!-- 디데이 -->

diff --git a/runningmate/runningmate/static/css/calender.css b/runningmate/runningmate/static/css/calender.css
@@ -220,6 +220,23 @@ table {
     margin-top: -11%;
 }
 
+/* 투데이 - 오늘 요일 날짜 표기 ---------*/
+.day_week {
+    font-family: 'Roboto';
+    font-size: 20px;
+    font-weight: 400;
+    text-align: center;
+    margin-top: 3%;
+    margin-bottom: 3%;
+}
+
+.date_week {
+    font-family: 'AppleSDGothicNeoB';
+    font-size: 40px;
+    text-align: center;
+    margin-bottom: 3%;
+}
+
 /* 투데이 - 디데이 */
 #dday1, #dday2, #dday3{
     background-color: white

diff --git a/runningmate/runningmate/static/js/calendar2.js b/runningmate/runningmate/static/js/calendar2.js
@@ -19,9 +19,8 @@ const renderCalendar = () => {
   const viewMonth = date.getMonth();
 
   // year-month 채우기
-  document.querySelector(".year-month").textContent = `${viewYear}년 ${
-    viewMonth + 1
-  }월`;
+  document.querySelector(".year-month").textContent = `${viewYear}년 ${viewMonth + 1
+    }월`;
 
   // 지난 달 마지막 Date, 이번 달 마지막 Date
   const prevLast = new Date(viewYear, viewMonth, 0);
@@ -123,7 +122,7 @@ $.ajaxSetup({
 function contextToJson(context) {
   const context_to_string = JSON.stringify(context);
   const string_to_json = JSON.parse(context_to_string);
-  return string_to_json; 
+  return string_to_json;
 }
 document.querySelectorAll(".date").forEach((date) => {
   date.addEventListener("click", () => {
@@ -135,15 +134,15 @@ document.querySelectorAll(".date").forEach((date) => {
       success: function (context) {
         let object = contextToJson(context);
         let status = object.status;
-        if(status == "exist1" || status == "exist2"){
-           /*데이터베이스 받아오기*/
+        if (status == "exist1" || status == "exist2") {
+          /*데이터베이스 받아오기*/
           let title1 = object.title1;
           let body1 = object.body1;
           let starttime1 = object.starttime1;
           let endtime1 = object.endtime1;
           let place1 = object.place1;
           let color1 = object.color1;
-          
+
           /*html에 영역 추가*/
           schedule_1.innerHTML = [
             "<div id = 'cal_sch1'>",
@@ -161,31 +160,31 @@ document.querySelectorAll(".date").forEach((date) => {
             "</div>",
           ].join("")
 
-          
+
           /*html에 내용 추가*/
           cal_title.innerHTML = title1;
           cal_body.innerHTML = body1;
           cal_time_place.innerHTML = starttime1 + "~" + endtime1 + "/" + place1;
-          
+
           /*제목 색 css 변경 (과목 색이랑 같게) */
-          cal_title.style.color =color1;
+          cal_title.style.color = color1;
 
           /*미모지 css 변경 추가*/
-          sch1_team1.style.backgroundColor=color1;
-          sch1_team2.style.backgroundColor=color1;
-          sch1_team3.style.backgroundColor=color1;
-          sch1_team4.style.backgroundColor=color1;
-          sch1_team5.style.backgroundColor=color1;
-          sch1_team6.style.backgroundColor=color1;
+          sch1_team1.style.backgroundColor = color1;
+          sch1_team2.style.backgroundColor = color1;
+          sch1_team3.style.backgroundColor = color1;
+          sch1_team4.style.backgroundColor = color1;
+          sch1_team5.style.backgroundColor = color1;
+          sch1_team6.style.backgroundColor = color1;
           sch1_team1.style.marginRight = '5px';
           sch1_team2.style.marginRight = '5px';
           sch1_team3.style.marginRight = '5px';
           sch1_team4.style.marginRight = '5px';
           sch1_team5.style.marginRight = '5px';
           sch1_team6.style.marginRight = '5px';
 
-        } 
-        
+        }
+
         else {
           schedule_1.innerHTML = "<div id = 'no_schedule'>아직 등록된 일정이 없어요</div>";
         }

diff --git a/runningmate/runningmate/static/js/today.js b/runningmate/runningmate/static/js/today.js
@@ -1,18 +1,36 @@
-let today = new Date.now();
+// let today = new Date.now();
 
+// var week = [
+//     "Sun",
+//     "Mon",
+//     "Tue",
+//     "Wed",
+//     "Thu",
+//     "Fri",
+//     "Sat",
+// ];
+// const renderDay = () => {
+//     const viewDay = date.getDay();
+//     const weekofday = week[viewDay];
+
+//     document.querySelector(".today_day").textContent = '{weekofday}';
+// } // today_day
+
+
+const today1 = new Date();
+
+const year = today1.getFullYear();
+const month = today1.getMonth() + 1;
+const day = today1.getDate();
 var week = [
-    "Sun",
-    "Mon",
-    "Tue",
-    "Wed",
-    "Thu",
-    "Fri",
-    "Sat",
+    "SUNDAY",
+    "MONDAY",
+    "TUESDAY",
+    "WEDENSDAY",
+    "THURSDAY",
+    "FRIDAY",
+    "SATURDAY",
 ];
-const renderDay = () => {
-    const viewDay = date.getDay();
-    const weekofday = week[viewDay];
-
-    document.querySelector(".today_day").textContent = '{weekofday}';
-} // today_day
 
+document.querySelector(".day_week").innerHTML = week[today1.getDay()];
+document.querySelector(".date_week").innerHTML = year + '.' + month + '.' + day;