Finish month view

Author: fatorius

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qwik-calendar",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Um componente de calendário para aplicações Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",

src/components/calendar/calendar.module.css

@@ -21,4 +21,4 @@
 
 #qwikCalendar *{
     box-sizing: border-box;
-}
+}

src/components/calendar/index.jsx

@@ -12,7 +12,6 @@ export const Calendar = component$((props) => {
 
   const onChangeCurrentDate$ = $((newCurrentDate) => {
     currentDate.value = newCurrentDate;
-    console.log("aqui no calendar")
   }); 
 
   return (
@@ -24,6 +23,7 @@ export const Calendar = component$((props) => {
             onChangeCurrentDate$={onChangeCurrentDate$}
           />
           <MonthView
+            locale={locale}
             dateObj={currentDate.value}
           />
         </div>

src/components/days/days.module.css

@@ -0,0 +1,24 @@
+#days{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.day, .priorDay{
+    flex: 0 0 14.2857%;
+    overflow: hidden;
+    margin-inline-end: 0px;
+    
+    max-width: 100%;
+    padding: 10px 6.6667px;
+    background: none;
+    text-align: center;
+    line-height: 16px;
+}
+
+.priorDay{
+    color: #757575;
+}
+
+.weekendDayDay{
+    color: #d10000;
+}

src/components/days/index.jsx

@@ -0,0 +1,103 @@
+import { component$ } from "@builder.io/qwik";
+
+import css from "./days.module.css";
+
+const Day = component$((props) => {
+    const thisDate = new Date(props.dateObj);
+    const today = new Date();
+
+    let textColor = thisDate.getDay() === 0 || thisDate.getDay() === 6 ? "#d10000" : "#000000";
+    
+    let bgColor = Math.round(props.dateObj / 8.64e7) === Math.round(today.valueOf() / 8.64e7) ? "#FFFF76" : "transparent"
+
+    return (
+        <>
+            <button class={css.day} style={{color: textColor, backgroundColor: bgColor}}>
+                <abbr>{thisDate.getDate()}</abbr>
+            </button>
+        </>
+    );
+});
+
+const PriorDay = component$((props) => {
+    const thisDate = new Date(props.dateObj);
+
+    return (
+        <>
+            <button disabled class={css.priorDay}>
+                <abbr>{thisDate.getDate()}</abbr>
+            </button>
+        </>
+    );
+})
+
+function getDaysSinceLastSunday(dateObj){
+    let days = [];
+
+    while (dateObj.getDay() !== 0){
+        dateObj.setDate(dateObj.getDate() - 1);
+        days.unshift(<PriorDay key={dateObj.valueOf()} dateObj={dateObj.valueOf()}/>);
+    }
+    
+    return days;
+}
+
+function getMonthLength(dateObj){
+    let year = dateObj.getFullYear();
+    let month = dateObj.getMonth() + 1;
+
+    return new Date(year, month, 0).getDate();
+}
+
+function getDaysOfTheMonth(dateObj){
+    let days = [];
+
+    let lens = getMonthLength(dateObj)
+
+    for (let i = 0; i < lens; i++){
+        days.push(<Day key={dateObj.valueOf()} dateObj={dateObj.valueOf()}/>);
+        dateObj.setDate(dateObj.getDate() + 1);
+    }
+
+    return days;
+}
+
+function getDaysUntilNextSaturday(dateObj){
+    let year = dateObj.getFullYear();
+    let month = dateObj.getMonth();
+
+    let newDateObj = new Date(year, month, 0);
+
+    let days = [];
+
+    let delta = 6 - newDateObj.getDay();
+    
+    for (let i = 0; i < delta; i++){
+        newDateObj.setDate(newDateObj.getDate() + 1);
+        days.push(<PriorDay key={newDateObj.valueOf()} dateObj={newDateObj.valueOf()}/>);
+    }
+
+    return days;
+}
+
+export const Days = component$((props) => {
+    let newDate = new Date(props.dateObj);
+    newDate.setDate(1);
+    let daysSinceLastSunday = getDaysSinceLastSunday(newDate);
+    
+    newDate = new Date(props.dateObj);
+    newDate.setDate(1);
+    let daysOfTheMonth = getDaysOfTheMonth(newDate);
+    
+    let daysUntilNextSaturday = getDaysUntilNextSaturday(newDate);
+
+    let days = [...daysSinceLastSunday, ...daysOfTheMonth, ...daysUntilNextSaturday];
+
+    return (
+        <>
+            <div id={css.days}>
+                {days}
+            </div>
+        </>
+    );
+});

src/components/monthview/index.jsx

@@ -1,10 +1,19 @@
 import { component$ } from "@builder.io/qwik";
 
+import css from "./monthview.module.css";
+import { WeekDays } from "../weekdays";
+import { Days } from "../days";
+
 export const MonthView = component$((props) => {
   return (
     <>
-        <div>
-            <p>{props.dateObj.toLocaleString(props.locale, {month: 'long'})}</p>
+        <div id={css.monthview}>
+            <WeekDays
+              locale={props.locale}
+            />
+            <Days 
+              dateObj={props.dateObj}
+            />
         </div>
     </>
   );

src/components/monthview/monthview.module.css

@@ -0,0 +1,7 @@
+#monthview{
+    flex-grow: 1;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.75em;
+}

src/components/navigation/index.jsx

@@ -18,7 +18,6 @@ export const Navigation = component$((props) => {
     useVisibleTask$(({ track }) => {
         track(() => dateObj.value);
         props.onChangeCurrentDate$(dateObj.value);
-        console.log("executei")
     });
 
     return (

src/components/weekdays/index.jsx

@@ -0,0 +1,33 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+import css from "./weekdays.module.css";
+import { weekdays } from "../../locale";
+
+const WeekDay = component$((props) => {
+    return (
+        <div class={css.weekday}>
+            <abbr aria-label={props.label} title={props.label}>
+                <Slot/>
+            </abbr>
+        </div>
+    );
+});
+
+export const WeekDays = component$((props) => {
+
+    let daysOfTheWeek = weekdays[props.locale];
+
+    return (
+        <>
+            <div id={css.weekdays}>
+                <WeekDay label={daysOfTheWeek[0]}>{daysOfTheWeek[0].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[1]}>{daysOfTheWeek[1].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[2]}>{daysOfTheWeek[2].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[3]}>{daysOfTheWeek[3].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[4]}>{daysOfTheWeek[4].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[5]}>{daysOfTheWeek[5].slice(0, 3)}</WeekDay>
+                <WeekDay label={daysOfTheWeek[6]}>{daysOfTheWeek[6].slice(0, 3)}</WeekDay>
+            </div>
+        </>
+    );
+});

src/components/weekdays/weekdays.module.css

@@ -0,0 +1,11 @@
+#weekdays{
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.weekday{
+    flex: 0 0 14.2857%;
+    overflow: hidden;
+    margin-inline-end: 0px;
+    padding: 0.5em;
+}

src/locale.js

@@ -0,0 +1,7 @@
+const weekdays = {
+    "pt-br": [
+        "Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"
+    ]
+}
+
+export {weekdays}