ywana-core8 0.0.938 → 0.0.939

package/package.json

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

package/src/incubator/planner.css

@@ -39,6 +39,21 @@
     justify-content: center;
 }
 
+.day-cell.current-week {
+    border-bottom: solid 2px var(--accent-color);
+}
+
+.day-cell.today .daynum {
+    background-color: var(--accent-color);
+    color: var(--accent-color-text);
+    border-radius: 3px;
+    padding: .2rem;
+}
+
+.day-cell.weekend {
+    background-color: var(--secondary-color-lighter);
+}
+
 .weekday {
     font-size: .6rem;
     font-weight: 400;
@@ -73,6 +88,10 @@
     background-color: var(--hover-color);
 }
 
+.content-cell.weekend {
+    background-color: var(--secondary-color-lighter);
+}
+
 .row-header {
     position: sticky;
     left: 0px;

package/src/incubator/planner.js

@@ -5,26 +5,41 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
 
   const [days, setDays] = useState([]);
   const lastDay = new Date(to);
+  const today = new Date();
 
   useEffect(() => {
     const day = new Date(from);
     const nextDays = [];
     while (day <= lastDay) {
+      const isToday = day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
+      const isWeekend = day.getDay() === 0 || day.getDay() === 6;
       nextDays.push({
         day: day.getDate(),
         weekday: day.toLocaleString('en-US', { weekday: 'short' }),
         month: day.toLocaleString('en-US', { month: 'short' }),
         monthNum: day.getMonth() + 1,
         year: day.getFullYear(),
+        isToday,
+        isWeekend,
+        isInCurrentWeek: isInCurrentWeek(day)
       });
       day.setDate(day.getDate() + 1);
     }
     setDays(nextDays);
   }, [from, to])
 
+  function isInCurrentWeek(date) {
+    const today = new Date();
+    const first = today.getDate() - today.getDay();
+    const last = first + 5;
+    const firstDay = new Date(today.setDate(first));
+    const lastDay = new Date(today.setDate(last));
+    return date >= firstDay && date <= lastDay;
+  }
+
   function selectCell(cell) {
     if (onSelectCell) onSelectCell(cell)
-  } 
+  }
 
   const uniqueMonths = Array.from(
     new Set(days.map(({ month }) => month))
@@ -63,12 +78,17 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
       <div className="days-row" style={{ display: 'flex', width: `${totalDaysWidth}rem` }}>
         <div className="row-header" style={{ minWidth: `${rowHeaderWidth}rem`, maxWidth: `${rowHeaderWidth}rem` }}>
         </div>
-        {days.map(({ day, weekday, month }) => (
-          <div className='day-cell' style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`day_${month}-${day}`}>
-            <div className="weekday">{weekday.substring(0, 2)}</div>
-            <div className="daynum">{day}</div>
-          </div>
-        ))}
+        {days.map(({ day, weekday, month, isToday = false, isWeekend = false, isInCurrentWeek }) => {
+          const todayClass = isToday ? 'today' : '';
+          const weekendClass = isWeekend ? 'weekend' : '';
+          const currentWeekClass = isInCurrentWeek ? 'current-week' : '';
+          return (
+            <div className={`day-cell ${todayClass} ${weekendClass} ${currentWeekClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`day_${month}-${day}`}>
+              <div className="weekday">{weekday.substring(0, 2)}</div>
+              <div className="daynum">{day}</div>
+            </div>
+          )
+        })}
       </div>
 
       {lanes.map((lane, index) => {
@@ -78,7 +98,7 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
             <div className="row-header" style={{ minWidth: `${rowHeaderWidth}rem`, maxWidth: `${rowHeaderWidth}rem` }} >
               {lane.title}
             </div>
-            {days.map(({ day, weekday, month, monthNum, year }) => {
+            {days.map(({ day, weekday, month, monthNum, year, isWeekend }) => {
               const dayDate = new Date(year, monthNum - 1, day);
               const dayEvents = laneEvents.filter((event) => {
                 const eventDate = new Date(event.date);
@@ -86,9 +106,10 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
                   eventDate.getMonth() === dayDate.getMonth() &&
                   eventDate.getFullYear() === dayDate.getFullYear();
               });
+              const weekendClass = isWeekend ? 'weekend' : '';
               return (
-                <div className="content-cell" style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${year}-${month}-${day}`} onClick={() => selectCell({ lane:lane.id, date: dayDate })}>
-                    {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
+                <div className={`content-cell ${weekendClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${year}-${month}-${day}`} onClick={() => selectCell({ lane: lane.id, date: dayDate })}>
+                  {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
                 </div>
               )
             })}
@@ -129,24 +150,24 @@ const CalendarTest = (props) => {
   ]
 
   const events = [
-    { id: "1", lane: "1", date: "2023-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2023-01-04", color: "yellow", title: "Event One" },
-    { id: "1", lane: "1", date: "2023-01-05", color: "yellow", title: "Event One" },
-    { id: "2", lane: "1", date: "2023-01-05", color: "red", title: "Event One" },
-    { id: "3", lane: "1", date: "2023-01-05", color: "blue", title: "Event One" },
-    { id: "4", lane: "1", date: "2023-01-05", color: "red", title: "Event One" },
-    { id: "5", lane: "2", date: "2023-01-04", color: "yellow", title: "Event One" },
-    { id: "6", lane: "2", date: "2023-01-05", color: "red", title: "Event One" },
-    { id: "7", lane: "2", date: "2023-01-06", color: "blue", title: "Event One" },
-    { id: "8", lane: "2", date: "2023-01-07", color: "red", title: "Event One" },
-    { id: "9", lane: "3", date: "2023-01-04", color: "yellow", title: "Event One" },
-    { id: "10", lane: "3", date: "2023-01-05", color: "red", title: "Event One" },
-    { id: "11", lane: "3", date: "2023-01-06", color: "blue", title: "Event One" },
+    { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
+    { id: "1", lane: "1", date: "2024-01-04", color: "yellow", title: "Event One" },
+    { id: "1", lane: "1", date: "2024-01-05", color: "yellow", title: "Event One" },
+    { id: "2", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
+    { id: "3", lane: "1", date: "2024-01-05", color: "blue", title: "Event One" },
+    { id: "4", lane: "1", date: "2024-01-05", color: "red", title: "Event One" },
+    { id: "5", lane: "2", date: "2024-01-04", color: "yellow", title: "Event One" },
+    { id: "6", lane: "2", date: "2024-01-05", color: "red", title: "Event One" },
+    { id: "7", lane: "2", date: "2024-01-06", color: "blue", title: "Event One" },
+    { id: "8", lane: "2", date: "2024-01-07", color: "red", title: "Event One" },
+    { id: "9", lane: "3", date: "2024-01-04", color: "yellow", title: "Event One" },
+    { id: "10", lane: "3", date: "2024-01-05", color: "red", title: "Event One" },
+    { id: "11", lane: "3", date: "2024-01-06", color: "blue", title: "Event One" },
   ]
 
   return (
     <>
-      <Planner2 from="2023-01-03" to="2023-01-13" lanes={lanes} events={events} EventRenderer={EventCard} />
+      <Planner2 from="2024-01-01" to="2024-12-01" lanes={lanes} events={events} EventRenderer={EventCard} />
     </>
   )
 }