ywana-core8 0.0.908 → 0.0.910

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.908",
+  "version": "0.0.910",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/widgets/calendar/Calendar.css

@@ -1,10 +1,11 @@
 
 .calendar { 
-    margin: 0rem;
+    margin: 1rem;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    padding: .5rem;
+    padding: 0rem;
+
 }
 
 .calendar>nav {
@@ -22,11 +23,10 @@
 
 .calendar>nav>button {
     margin-left: 1px;
+    border-radius: 3px;
 }
 
 .calendar>header {
-    border: solid 1px var(--divider-color);
-    border-width: 1px 1px 0 0px;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     font-size: .8rem;
@@ -45,9 +45,9 @@
 }
 
 .week-day-cell {
-    border-left: solid 1px var(--divider-color);
+    border: solid 0px var(--divider-color);
     padding: 2px;
-    text-align: center;
+    text-align: right;
     min-width: 5rem;
 }
 
@@ -56,13 +56,19 @@
     border-width: 0 0 1px 1px;
     padding: .5rem;
     text-align: right;
-    min-height: 5rem;
+    min-height: 6rem;
     min-width: 5rem;
+    font-weight: 400;
 }
 
 .day-cell.today>header {
-    background-color: var(--primary-color-lighter);
-    padding: .3rem
+    border-bottom: solid 2px var(--primary-color);
+    padding: .3rem;
+    font-weight: 600;
+}
+
+.day-cell.other-month {
+    color: var(--text-color-lighter);
 }
 
 .day-cell:hover {

package/src/widgets/calendar/Calendar.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button } from '../../html'
+import { Button, Text } from '../../html'
 import Moment from 'moment'
 import { extendMoment } from 'moment-range';
 import 'moment/locale/es'
@@ -41,7 +41,7 @@ export const Calendar = (props) => {
 
     function today() {
         const today = moment()
-        setPosition(today)  
+        setPosition(today)
     }
 
     if (!position) return "..."
@@ -56,32 +56,38 @@ export const Calendar = (props) => {
     const days = Array.from(range.by('days'))
 
     const cells = days.map(day => {
-        const dayEvents = events.filter(event => {
-            const eventDate = moment(event.date, "YYYY-MM-DD")
-            return eventDate.isSame(day, 'day')
+
+        const eventsOfDay = events.filter(event => {
+            console.log(event.date, day.format("YYYY-MM-DD"))
+            const eventDay = moment(event.date)
+            return eventDay.isSame(day, 'day')
         })
-        return { day, events: dayEvents }
+
+        return {
+            day,
+            events: eventsOfDay
+        }
     })
 
     return (
         <div className="calendar">
             <nav>
-                <label> {monthName} {year}</label>
-                <Button icon="chevron_left" raised action={prev} />
-                <Button label="Hoy" outlined action={today}/>
-                <Button icon="chevron_right" raised action={next} />
+                <label> <Text>{monthName}</Text> {year}</label>
+                <Button icon="chevron_left" action={prev} />
+                <Button label="Today" outlined action={today} />
+                <Button icon="chevron_right" action={next} />
             </nav>
             <header>
-                <div className='week-day-cell'>Lun</div>
-                <div className='week-day-cell'>Mar</div>
-                <div className='week-day-cell'>Mié</div>
-                <div className='week-day-cell'>Jue</div>
-                <div className='week-day-cell'>Vie</div>
-                <div className='week-day-cell'>Sab</div>
-                <div className='week-day-cell'>Dom</div>
+                <div className='week-day-cell'><Text>Mon</Text></div>
+                <div className='week-day-cell'><Text>Tue</Text></div>
+                <div className='week-day-cell'><Text>Wed</Text></div>
+                <div className='week-day-cell'><Text>Thu</Text></div>
+                <div className='week-day-cell'><Text>Fri</Text></div>
+                <div className='week-day-cell'><Text>Sat</Text></div>
+                <div className='week-day-cell'><Text>Sun</Text></div>
             </header>
             <main>
-                {cells.map(cell => <DayCell cell={cell} >{children}</DayCell>)}
+                {cells.map(cell => <DayCell key={cell.day} cell={cell} >{children}</DayCell>)}
             </main>
         </div>
     )
@@ -89,11 +95,12 @@ export const Calendar = (props) => {
 
 const DayCell = (props) => {
     const { cell = [], children } = props
-    const {day, events} = cell
+    const { day, events } = cell
     const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
+    const sameMonthStyle = day.isSame(moment(), 'month') ? '' : 'other-month'
 
     return (
-        <div className={`day-cell ${todayStyle}`}>
+        <div className={`day-cell ${todayStyle} ${sameMonthStyle}`}>
             <header>
                 {day.format("DD")}
             </header>

package/src/widgets/calendar/Calendar.test.js

@@ -6,9 +6,9 @@ const CalendarTest = (prop) => {
 
     const events = [
         { id: 1, date: "2022-05-26", title: 'Event 1' },
-        { id: 1, date: "2022-05-27", title: 'Event 1' },
-        { id: 1, date: "2022-05-28", title: 'Event 1' },
-        { id: 1, date: "2022-05-29", title: 'Event 1' },
+        { id: 2, date: "2023-12-26", title: 'Event 2' },
+        { id: 3, date: "2023-12-07", title: 'Event 3' },
+
     ]
 
     return (
@@ -22,7 +22,7 @@ const CustomEvent = (props) => {
     const { event } = props
     return (
         <div className="custom-event" onClick={() => alert("!xxx")}>
-           C {event.title}
+           {event.title}
         </div>
     )
 }

package/src/widgets/planner/Planner.test.js

@@ -51,6 +51,7 @@ const PlannerTest = (prop) => {
             navigation={true} 
             //onSelectCell={console.log}
             //onChange={(data) => console.log('D&D', data)}
+            config = {{ range: "week" }}
         >
 
         </Planner>