├── .gitignore
├── src
├── App
│ ├── index.js
│ └── App.jsx
├── Day
│ ├── index.js
│ └── Day.jsx
├── NewEventModal
│ ├── index.js
│ └── NewEventModal.jsx
├── CalendarHeader
│ ├── index.js
│ └── CalendarHeader.jsx
├── DeleteEventModal
│ ├── index.js
│ └── DeleteEventModal.jsx
├── index.jsx
└── hooks
│ └── useDate.js
├── index.html
├── package.json
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/src/App/index.js:
--------------------------------------------------------------------------------
1 | export * from './App';
2 |
--------------------------------------------------------------------------------
/src/Day/index.js:
--------------------------------------------------------------------------------
1 | export * from './Day';
2 |
--------------------------------------------------------------------------------
/src/NewEventModal/index.js:
--------------------------------------------------------------------------------
1 | export * from './NewEventModal';
2 |
--------------------------------------------------------------------------------
/src/CalendarHeader/index.js:
--------------------------------------------------------------------------------
1 | export * from './CalendarHeader';
2 |
--------------------------------------------------------------------------------
/src/DeleteEventModal/index.js:
--------------------------------------------------------------------------------
1 | export * from './DeleteEventModal';
2 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { App } from './App';
4 |
5 | ReactDOM.render(, document.getElementById('root'));
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Calendar App Vanilla JS
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/CalendarHeader/CalendarHeader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const CalendarHeader = ({ onNext, onBack, dateDisplay }) => {
4 | return(
5 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/Day/Day.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const Day = ({ day, onClick }) => {
4 | const className = `day ${day.value === 'padding' ? 'padding' : ''} ${day.isCurrentDay ? 'currentDay' : ''}`;
5 | return (
6 |
7 | {day.value === 'padding' ? '' : day.value}
8 |
9 | {day.event &&
{day.event.title}
}
10 |
7 |
Event
8 |
9 |
{eventText}
10 |
11 |
12 |
13 |
10 |
New Event
11 |
12 | setTitle(e.target.value)}
16 | id="eventTitleInput"
17 | placeholder="Event Title"
18 | />
19 |
20 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/hooks/useDate.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 |
3 | export const useDate = (events, nav) => {
4 | const [dateDisplay, setDateDisplay] = useState('');
5 | const [days, setDays] = useState([]);
6 |
7 | const eventForDate = date => events.find(e => e.date === date);
8 |
9 | useEffect(() => {
10 | const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
11 | const dt = new Date();
12 |
13 | if (nav !== 0) {
14 | dt.setMonth(new Date().getMonth() + nav);
15 | }
16 |
17 | const day = dt.getDate();
18 | const month = dt.getMonth();
19 | const year = dt.getFullYear();
20 |
21 | const firstDayOfMonth = new Date(year, month, 1);
22 | const daysInMonth = new Date(year, month + 1, 0).getDate();
23 | const dateString = firstDayOfMonth.toLocaleDateString('en-us', {
24 | weekday: 'long',
25 | year: 'numeric',
26 | month: 'numeric',
27 | day: 'numeric',
28 | });
29 |
30 | setDateDisplay(`${dt.toLocaleDateString('en-us', { month: 'long' })} ${year}`);
31 | const paddingDays = weekdays.indexOf(dateString.split(', ')[0]);
32 |
33 | const daysArr = [];
34 |
35 | for (let i = 1; i <= paddingDays + daysInMonth; i++) {
36 | const dayString = `${month + 1}/${i - paddingDays}/${year}`;
37 |
38 | if (i > paddingDays) {
39 | daysArr.push({
40 | value: i - paddingDays,
41 | event: eventForDate(dayString),
42 | isCurrentDay: i - paddingDays === day && nav === 0,
43 | date: dayString,
44 | });
45 | } else {
46 | daysArr.push({
47 | value: 'padding',
48 | event: null,
49 | isCurrentDay: false,
50 | date: '',
51 | });
52 | }
53 | }
54 |
55 | setDays(daysArr);
56 | }, [events, nav]);
57 |
58 | return {
59 | days,
60 | dateDisplay,
61 | };
62 | };
63 |
--------------------------------------------------------------------------------
/src/App/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { CalendarHeader } from '../CalendarHeader';
3 | import { Day } from '../Day';
4 | import { NewEventModal } from '../NewEventModal';
5 | import { DeleteEventModal } from '../DeleteEventModal';
6 | import { useDate } from '../hooks/useDate';
7 |
8 | export const App = () => {
9 | const [nav, setNav] = useState(0);
10 | const [clicked, setClicked] = useState();
11 | const [events, setEvents] = useState(
12 | localStorage.getItem('events') ?
13 | JSON.parse(localStorage.getItem('events')) :
14 | []
15 | );
16 |
17 | const eventForDate = date => events.find(e => e.date === date);
18 |
19 | useEffect(() => {
20 | localStorage.setItem('events', JSON.stringify(events));
21 | }, [events]);
22 |
23 | const { days, dateDisplay } = useDate(events, nav);
24 |
25 | return(
26 | <>
27 |
28 |
setNav(nav + 1)}
31 | onBack={() => setNav(nav - 1)}
32 | />
33 |
34 |
35 |
Sunday
36 |
Monday
37 |
Tuesday
38 |
Wednesday
39 |
Thursday
40 |
Friday
41 |
Saturday
42 |
45 | {days.map((d, index) => (
46 | {
50 | if (d.value !== 'padding') {
51 | setClicked(d.date);
52 | }
53 | }}
54 | />
55 | ))}
56 |
57 |