diff --git a/Readme.md b/Readme.md index c87bf87..26346cf 100644 --- a/Readme.md +++ b/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. \ No newline at end of file +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" +// ... + +// ... +``` + +### 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 +} +``` \ No newline at end of file diff --git a/example/package.json b/example/package.json index 5fe772f..d5c964c 100644 --- a/example/package.json +++ b/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" }, diff --git a/example/src/index.css b/example/src/index.css index ec2585e..4551eb2 100644 --- a/example/src/index.css +++ b/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; diff --git a/example/yarn.lock b/example/yarn.lock index 1f0fa80..728ad61 100644 --- a/example/yarn.lock +++ b/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" diff --git a/package.json b/package.json index 8ff0f4e..985cd61 100644 --- a/package.json +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index b32b9d6..f5ede7c 100644 --- a/src/index.tsx +++ b/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 = ({ eventList, initialViewer, diff --git a/src/types.ts b/src/types.ts index 0188ea3..285bbaf 100644 --- a/src/types.ts +++ b/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, } diff --git a/src/views/Day.tsx b/src/views/Day.tsx index 63b0fe0..1406ef5 100644 --- a/src/views/Day.tsx +++ b/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" > - + @@ -50,17 +51,21 @@ const DayViewer: React.FC = () => { } return ( -
- -
-

{day.number}

-

{getMonthName(month.number, monthNames) + ' ' + year}

+ <> +
+ +
+

{day.number}

+

+ {getMonthName(month.number, monthNames) + ' ' + year} +

+
    {day.events?.map((event, eventIndex) => ( @@ -70,7 +75,7 @@ const DayViewer: React.FC = () => { ))}
-
+ ) } diff --git a/src/views/Month.tsx b/src/views/Month.tsx index a3c6ec5..4961246 100644 --- a/src/views/Month.tsx +++ b/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() + ) : [], })) ) diff --git a/src/views/styles.ts b/src/views/styles.ts index ddc5db4..c5663e9 100644 --- a/src/views/styles.ts +++ b/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