feat(calendar): Adding a Today button and a showToday prop that defaults to true

Author: arthurdenner

src/components/calendar/calendar.js

@@ -4,6 +4,7 @@ import { Segment } from 'semantic-ui-react';
 import Dayzed from 'dayzed';
 import Button from '../button';
 import CalendarCell from '../cell';
+import { getToday } from '../../utils';
 import { monthNamesShort, weekdayNamesShort } from '../../data';
 import 'semantic-ui-css/semantic.min.css';
 import './calendar.css';
@@ -13,6 +14,7 @@ const Calendar = ({
   onDateSelected,
   selected,
   selectedClassName,
+  showToday,
   ...otherProps
 }) => (
   <Dayzed
@@ -77,6 +79,15 @@ const Calendar = ({
                 );
               })
             )}
+            {showToday && (
+              <CalendarCell
+                fluid
+                {...getToday(selected)}
+                {...getDateProps({ dateObj: getToday(selected) })}
+              >
+                Today
+              </CalendarCell>
+            )}
           </div>
         </Segment>
       ))
@@ -89,10 +100,12 @@ Calendar.propTypes = {
   onDateSelected: PropTypes.func,
   selected: PropTypes.instanceOf(Date),
   selectedClassName: PropTypes.string,
+  showToday: PropTypes.bool,
 };
 
 Calendar.defaultProps = {
   onDateSelected: () => {},
+  showToday: true,
 };
 
 export default Calendar;

src/components/cell/cell.css

@@ -18,3 +18,7 @@
   background: #4f4f4f;
   color: #f2f2f2;
 }
+
+.clndr-cell-full {
+  grid-column: 1 / -1;
+}

src/components/cell/cell.js

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import './cell.css';
 
 const CalendarCell = ({
+  fluid,
   selectable,
   selected,
   selectedClassName,
@@ -12,6 +13,7 @@ const CalendarCell = ({
 }) => (
   <span
     className={cn('clndr-cell', {
+      'clndr-cell-full': fluid,
       'clndr-cell-today': today,
       'clndr-cell-disabled': !selectable,
       [selectedClassName]: selected,
@@ -21,6 +23,7 @@ const CalendarCell = ({
 );
 
 CalendarCell.propTypes = {
+  fluid: PropTypes.bool,
   selected: PropTypes.bool,
   selectable: PropTypes.bool,
   selectedClassName: PropTypes.string,

src/utils/index.js

@@ -0,0 +1,25 @@
+export const normalizeDate = date => {
+  const newDate = new Date(date.getTime());
+  newDate.setHours(0, 0, 0, 0);
+
+  return newDate;
+};
+
+const isEqual = (date, dateToCompare) => {
+  if (!date || !dateToCompare) {
+    return false;
+  }
+
+  return (
+    normalizeDate(date).getTime() === normalizeDate(dateToCompare).getTime()
+  );
+};
+
+export const getToday = selected => {
+  return {
+    date: normalizeDate(new Date()),
+    selectable: true,
+    selected: isEqual(new Date(), selected),
+    today: true,
+  };
+};