layouts for event, day and calendar wrapper

ayush013 · Jul 2, 2022 · 445a36f · 445a36f
1 parent 18a9be3
commit 445a36f
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 8 deletions.
diff --git a/calendar/index.html b/calendar/index.html
@@ -7,5 +7,54 @@
     <title>Calendar</title>
   </head>
 
-  <body></body>
+  <body>
+    <main class="calendar">
+      <header class="calendar--header">
+        <h1 class="calendar--title">wejf</h1>
+        <div class="calendar--actions">
+          <button class="calendar--prev">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17 11H9.41L12.71 7.71C12.8983 7.5217 13.0041 7.2663 13.0041 7C13.0041 6.7337 12.8983 6.47831 12.71 6.29C12.5217 6.1017 12.2663 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29L6.29 11.29C6.19896 11.3851 6.1276 11.4973 6.08 11.62C5.97999 11.8635 5.97999 12.1365 6.08 12.38C6.1276 12.5028 6.19896 12.6149 6.29 12.71L11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71C12.8037 17.617 12.8781 17.5064 12.9289 17.3846C12.9797 17.2627 13.0058 17.132 13.0058 17C13.0058 16.868 12.9797 16.7373 12.9289 16.6154C12.8781 16.4936 12.8037 16.383 12.71 16.29L9.41 13H17C17.2652 13 17.5196 12.8946 17.7071 12.7071C17.8946 12.5196 18 12.2652 18 12C18 11.7348 17.8946 11.4804 17.7071 11.2929C17.5196 11.1054 17.2652 11 17 11Z"
+              />
+            </svg>
+          </button>
+          <button class="calendar--today">Today</button>
+          <button class="calendar--next">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.92 11.62C17.8724 11.4973 17.801 11.3851 17.71 11.29L12.71 6.29C12.6168 6.19676 12.5061 6.1228 12.3842 6.07234C12.2624 6.02188 12.1319 5.99591 12 5.99591C11.7337 5.99591 11.4783 6.1017 11.29 6.29C11.1968 6.38324 11.1228 6.49393 11.0723 6.61575C11.0219 6.73758 10.9959 6.86814 10.9959 7C10.9959 7.2663 11.1017 7.5217 11.29 7.71L14.59 11H7C6.73478 11 6.48043 11.1054 6.29289 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.29289 12.7071C6.48043 12.8946 6.73478 13 7 13H14.59L11.29 16.29C11.1963 16.383 11.1219 16.4936 11.0711 16.6154C11.0203 16.7373 10.9942 16.868 10.9942 17C10.9942 17.132 11.0203 17.2627 11.0711 17.3846C11.1219 17.5064 11.1963 17.617 11.29 17.71C11.383 17.8037 11.4936 17.8781 11.6154 17.9289C11.7373 17.9797 11.868 18.0058 12 18.0058C12.132 18.0058 12.2627 17.9797 12.3846 17.9289C12.5064 17.8781 12.617 17.8037 12.71 17.71L17.71 12.71C17.801 12.6149 17.8724 12.5028 17.92 12.38C18.02 12.1365 18.02 11.8635 17.92 11.62Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </header>
+      <div class="calendar--grid"></div>
+    </main>
+
+    <template id="event">
+      <div class="event">
+        <h3 class="event--name"></h3>
+        <p class="event--hours"></p>
+      </div>
+    </template>
+    <template id="day">
+      <section class="day">
+        <h2 class="day--title"></h2>
+        <hr />
+        <div class="current--line hidden"></div>
+        <div class="day--events"></div>
+      </section>
+    </template>
+  </body>
 </html>
diff --git a/calendar/src/index.js b/calendar/src/index.js
@@ -1,7 +1,34 @@
 import "./style.css";
 
-class Main {
+class Calendar {
   constructor() {}
 }
 
-new Main();
+new Calendar();
+
+// template for weekday cell -> day class
+// week container as section (Calendar)
+// event class -> event cell
+// main class for wiring all together
+// api util with static helper
+
+// DAY BLUEPRINT/CLASS
+// > events, timestamp
+// setter method for events, timestamp
+// setter will have a proxy for layouts
+// takes care of today class
+
+// API UTIL CLASS -> Singleton/static utils
+// static api call method
+// static BASE URL
+
+// EVENT CLASS
+// startTime, endTime, name
+// binds to event template
+
+// CALENDAR CLASS
+// driver for entire application
+// initializeApp -> draws reference to body elements, appends week layout inside body,
+// initializes fetching of event data, adds event listener to buttons
+// set heading for week dates
+// Fetch event callback -> day.setEvents
diff --git a/calendar/src/style.css b/calendar/src/style.css
@@ -17,7 +17,7 @@
     --bg-dark: rgb(2, 20, 20);
     --bg: var(--bg-light);
 
-    --text-light: black;
+    --text-light: #333333;
     --text-dark: white;
     --text: var(--text-light);
   }
@@ -28,10 +28,9 @@
     font-size: 1rem;
     font-weight: 400;
     min-height: 100vh;
-    color: black;
+    color: var(--text);
     background-color: var(--bg);
-    display: grid;
-    place-items: center;
+    padding: 2rem;
   }
 
   *,
@@ -43,6 +42,89 @@
   }
 }
 
+.calendar {
+  border: 1px solid rgb(165, 165, 165);
+  border-radius: 0.5rem;
+
+  --space: 0.5rem;
+
+  padding: var(--space);
+}
+
+.calendar .calendar--header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: var(--space);
+  align-items: center;
+}
+
+.calendar .calendar--header .calendar--actions {
+  align-items: center;
+  display: flex;
+  gap: var(--space);
+}
+
+
+.calendar .calendar--header .calendar--actions button {
+  height: 2rem;
+  padding: 0 calc(var(--space) * 2);
+  font-weight: 500;
+  font-size: 1rem;
+  background: var(--bg);
+  border: 1px solid rgb(165, 165, 165);
+  border-radius: 0.2rem;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.calendar .calendar--grid {
+  height: 80vh;
+  border-top: 1px solid rgb(219, 219, 219);
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  overflow-x: auto;
+}
+
+.day {
+  margin-top: var(--space);
+  border-right: 1px solid rgb(235, 235, 235);
+  padding: calc(var(--space)/2);
+}
+
+.day .day--title {
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: rgb(51, 102, 150);
+}
+
+.day hr {
+  margin: var(--space) 0;
+  opacity: 0.3;
+}
+
+.calendar .calendar--grid .day:last-child {
+  border: none;
+}
+
+.day .day--events {
+  height: 100%;
+}
+
+.event {
+  background-color: #32bbaf;
+  padding: var(--space) calc(var(--space) /2);
+  border-radius: 0.5rem;
+  color: white;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+
+
+/* 
 @media (prefers-color-scheme: dark) {
   body {
     color: white;
@@ -54,4 +136,4 @@
     --text: var(--text-dark);
   }
 
-}
+} */