Added day view page styling, fixed some global styling errors, added documentation

Readme.md

@@ -1,3 +1,84 @@
 # React-eventful-calendar
 
-It is a React calendar component with events support. It can only display fullday events yet, but time-specific events are coming soon.
+It is a React calendar component with events support. It can show events by day in month view and by time in day view.
+
+# Usage example
+
+```jsx
+import Calendar, { Viewers } from "react-eventful-calendar"
+// ...
+<Calendar
+  eventList={events}
+  locale={locale}
+  initialViewer={Viewers.MonthViewer}
+/>
+// ...
+```
+
+### Events
+
+`events` is an array of objects of the following type:
+
+```typescript
+type EventT = {
+  id: number
+  title: string
+  startDate: string
+  endDate: string
+  color: string
+}
+```
+
+For example:
+```javascript
+const events = [
+  {
+    id: 1,
+    title: "Test",
+    startDate: "Wed Oct 22 2020 17:00:00 GMT+0500 (Yekaterinburg Standard Time)",
+    endDate: "Wed Oct 22 2020 20:00:00 GMT+0500 (Yekaterinburg Standard Time)",
+    color: "#e57373"
+  },
+]
+```
+
+### Locale
+
+`locale` is an object containing arrays of strings. `monthNames` and `weekdaysNames` are currently supported. Strings in array should be in lowercase. For example:
+```javascript
+const locale = {
+  monthNames: [
+    "sunday",
+    "monday",
+    "tuesday",
+    "wednesday",
+    "thursday",
+    "friday",
+    "saturday",
+  ],
+  weekdaysNames: [
+    "january",
+    "february",
+    "march",
+    "april",
+    "may",
+    "june",
+    "july",
+    "august",
+    "september",
+    "october",
+    "november",
+    "december",
+  ],
+}
+```
+
+### Viewers
+
+`Viewers` is an enum, which contains supported calendar viewers. Definition:
+```typescript
+enum Viewers {
+  MonthViewer, // Month view
+  DayViewer, // Single day view
+}
+```

example/package.json

@@ -8,7 +8,7 @@
     "@types/react-dom": "^16.9.8",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-eventful-calendar": "../",
+    "react-eventful-calendar": "^1.0.1",
     "react-scripts": "4.0.0",
     "typescript": "^4.0.3"
   },

example/src/index.css

@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

example/yarn.lock

@@ -8847,8 +8847,10 @@ react-error-overlay@^6.0.8:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
-react-eventful-calendar@../:
-  version "1.0.0"
+react-eventful-calendar@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-eventful-calendar/-/react-eventful-calendar-1.0.1.tgz#816c774b3b4d599d4832484eac1b680ec48f2e98"
+  integrity sha512-W4/G4xep3udE3JC5PsaO8e+DLptarkZ5IDI8dMmkfqkMY0vMO8o4M5twbiwFrK2J/JPySbJYZ/11Q9+Sq6SPJw==
 
 react-is@^16.8.1:
   version "16.13.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-eventful-calendar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React calendar component",
   "main": "build/index.js",
   "module": "build/index.es.js",

src/index.tsx

@@ -1,9 +1,21 @@
+/** @module react-eventful-calendar */
+
 import React from 'react'
+
 import CalendarInContext from './CalendarInContext'
 import { CalendarProvider as CalendarContextProvider } from './context/calendar'
 import { ICalendarProps } from './types'
 import { LocaleProvider as LocaleContextProvider } from './context/locale'
 
+/**
+ * Calendar component
+ *
+ * @component
+ *
+ * @param eventList - List of events
+ * @param initialViewer - View which should be showen on first component mount
+ * @param locale - object containing two arrays: list of days of week and list of months
+ */
 const Calendar: React.FC<ICalendarProps> = ({
   eventList,
   initialViewer,

src/types.ts

@@ -12,8 +12,15 @@ export type UseCalendarSwitchFT = () => (increase: boolean) => void
 
 // Calendar component
 
+/**
+ * Enum for calendar views
+ * @readonly
+ * @enum {number}
+ */
 export enum Viewers {
+  /** Month view */
   MonthViewer,
+  /** Single day view */
   DayViewer,
 }
 

src/views/Day.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { useCalendarContext, useLocaleContext } from '../hooks'
 import { Viewers } from '../types'
 import { getEventLength, getMonthName } from '../utils'
+import styles from './styles'
 
 import { IDayViewer } from './types'
 
@@ -13,7 +14,7 @@ const HomeIcon = () => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g fill="#000000">
+    <g fill="#FFFFFF">
       <path d="M11.5 5.21591L20.125 13.2268V22H14.375V16.2609H8.625V22H2.875V13.2268L11.5 5.21591ZM23 10.6633L11.5 0L0 10.649L1.30429 12.0503L11.5 2.6113L21.6957 12.0646L23 10.6633Z"></path>
     </g>
   </svg>
@@ -50,17 +51,21 @@ const DayViewer: React.FC<IDayViewer> = () => {
   }
 
   return (
-    <div>
-      <button
-        title="Return to main"
-        onClick={handle}
-        style={{ background: 'none', border: 'none', cursor: 'pointer' }}
-      >
-        <HomeIcon />
-      </button>
-      <div>
-        <h1>{day.number}</h1>
-        <h3>{getMonthName(month.number, monthNames) + ' ' + year}</h3>
+    <>
+      <div style={styles.dayHeader}>
+        <button
+          title="Return to main"
+          onClick={handle}
+          style={{ ...styles.zeroMP, ...styles.dayHomeButton }}
+        >
+          <HomeIcon />
+        </button>
+        <div style={styles.dayDateBlock}>
+          <h1 style={styles.zeroMP}>{day.number}</h1>
+          <h3 style={styles.zeroMP}>
+            {getMonthName(month.number, monthNames) + ' ' + year}
+          </h3>
+        </div>
       </div>
       <ul>
         {day.events?.map((event, eventIndex) => (
@@ -70,7 +75,7 @@ const DayViewer: React.FC<IDayViewer> = () => {
           </li>
         ))}
       </ul>
-    </div>
+    </>
   )
 }
 

src/views/Month.tsx

@@ -34,7 +34,16 @@ const MonthView: React.FC = () => {
           number: dayNumber,
           events:
             index == 1
-              ? filterEventsByDay(eventList, dayNumber, monthNumber, yearNumber)
+              ? filterEventsByDay(
+                  eventList,
+                  dayNumber,
+                  monthNumber,
+                  yearNumber
+                ).sort(
+                  (a, b) =>
+                    new Date(a.startDate).getTime() -
+                    new Date(b.startDate).getTime()
+                )
               : [],
         }))
       )

src/views/styles.ts

@@ -6,6 +6,7 @@ const calendar: Style = {
   border: '1px black solid',
   borderRadius: '5px',
   overflow: 'hidden',
+  boxSizing: 'border-box',
 }
 
 // Month header
@@ -20,7 +21,6 @@ const weekdaysListHeader: Style = {
 const monthSwitchHeader: Style = {
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
-  width: '100%',
   gap: '5px',
   backgroundColor: 'black',
   color: 'white',
@@ -99,6 +99,35 @@ const monthDayNumber: Style = {
   margin: '0px',
 }
 
+const dayHeader: Style = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '5px',
+  backgroundColor: 'black',
+  color: 'white',
+  padding: '5px',
+}
+
+const dayHomeButton: Style = {
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+}
+
+const dayDateBlock: Style = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '5px',
+  flexGrow: 1,
+  marginRight: '25px',
+}
+
+const zeroMP: Style = {
+  margin: '0px',
+  padding: '0px',
+}
+
 const styles = {
   switchMonthButton,
   calendar,
@@ -112,6 +141,10 @@ const styles = {
   monthDayEvent,
   monthDayBottomShade,
   monthDayNumber,
+  dayHomeButton,
+  dayHeader,
+  dayDateBlock,
+  zeroMP,
 }
 
 export default styles