improving calendar

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -433,56 +433,59 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 </div>
               ))}
             </div>
-            <div
-              style={{
-                borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
-                padding: "4px 0px",
-              }}
-            >
-              {/** Column settings section */}
-              <div style={{ padding: "4px 0px" }}>
-                <div
-                  className="menu-item sort-button"
-                  onMouseEnter={() => setShowSettings(true)}
-                  onMouseLeave={() => setShowSettings(false)}
-                  ref={setSettingsReferenceElement}
-                >
-                  <span className="svg-icon svg-text icon-margin">
-                    <AdjustmentsIcon />
-                  </span>
-                  <span>Settings</span>
-                </div>
-                {showSettings && (
+            {!column.isMetadata && (
+              <div
+                style={{
+                  borderTop: `1px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
+                  padding: "4px 0px",
+                }}
+              >
+                {/** Column settings section */}
+
+                <div style={{ padding: "4px 0px" }}>
                   <div
-                    className={`menu ${c("popper")}`}
-                    ref={setSettingsPopperElement}
+                    className="menu-item sort-button"
                     onMouseEnter={() => setShowSettings(true)}
                     onMouseLeave={() => setShowSettings(false)}
-                    {...settingsPopper.attributes.popper}
-                    style={{
-                      ...settingsPopper.styles.popper,
-                      width: 200,
-                      zIndex: 4,
-                      padding: "4px 0px",
-                    }}
+                    ref={setSettingsReferenceElement}
                   >
-                    <FormGroup>
-                      <FormControlLabel
-                        control={
-                          <Switch
-                            checked={isInline}
-                            onChange={(event) => {
-                              handleChangeToggleInlineFrontmatter(event);
-                            }}
-                          />
-                        }
-                        label="Inline"
-                      />
-                    </FormGroup>
+                    <span className="svg-icon svg-text icon-margin">
+                      <AdjustmentsIcon />
+                    </span>
+                    <span>Settings</span>
                   </div>
-                )}
+                  {showSettings && (
+                    <div
+                      className={`menu ${c("popper")}`}
+                      ref={setSettingsPopperElement}
+                      onMouseEnter={() => setShowSettings(true)}
+                      onMouseLeave={() => setShowSettings(false)}
+                      {...settingsPopper.attributes.popper}
+                      style={{
+                        ...settingsPopper.styles.popper,
+                        width: 200,
+                        zIndex: 4,
+                        padding: "4px 0px",
+                      }}
+                    >
+                      <FormGroup>
+                        <FormControlLabel
+                          control={
+                            <Switch
+                              checked={isInline}
+                              onChange={(event) => {
+                                handleChangeToggleInlineFrontmatter(event);
+                              }}
+                            />
+                          }
+                          label="Inline"
+                        />
+                      </FormGroup>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       )}

src/components/portals/CalendarPortal.tsx

@@ -22,9 +22,12 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
   /** state of cell value */
   const { value, setValue } = useContext(CellContext);
 
-  const [calendarState, setCalendarState] = useState(
-    DateTime.fromFormat(value.value, "yyyy-MM-dd").toJSDate()
-  );
+  let initialDate = new Date();
+  if (DateTime.isDateTime(value.value)) {
+    initialDate = DateTime.fromFormat(value.value, "yyyy-MM-dd").toJSDate();
+  }
+  const [calendarState, setCalendarState] = useState(initialDate);
+
   function handleCalendarChange(date: Date) {
     setCalendarState(date);
     setShowCalendar(false);
@@ -51,7 +54,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
           zIndex: 4,
           minWidth: 200,
           maxWidth: 320,
-          padding: "0.75rem",
+          padding: "0.5rem",
           background: StyleVariables.BACKGROUND_SECONDARY,
         }}
         onBlur={() => setShowCalendar(false)}

styles.css

@@ -339,7 +339,7 @@
 .react-calendar {
   width: 350px;
   max-width: 100%;
-  background: white;
+  background: var(--background-secondary);
   border: 1px solid #a0a096;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.125em;
@@ -421,7 +421,7 @@
 }
 
 .react-calendar__month-view__days__day--weekend {
-  color: #d10000;
+  color: var(--background-modifier-error);
 }
 
 .react-calendar__month-view__days__day--neighboringMonth {