diff --git a/components/calendar.tsx b/components/calendar.tsx new file mode 100644 index 0000000..8759cda --- /dev/null +++ b/components/calendar.tsx @@ -0,0 +1,64 @@ +import React, { useState } from 'react' +import cx from 'classnames' +import useSWR from 'swr' +import moment from 'moment' +import { Calendar } from 'react-calendar-component' +import { dateFormatBackend } from '../helpers/date' + +const fetcher = (path: string) => fetch(path).then((r) => r.json()) + +export default function MyCalendar() { + const { data: daysBooked, error: fetchBookedOnError } = useSWR( + '/api/daysbooked', + fetcher + ) + + const [date, setDate] = useState(moment()) + + function dayBooked(day: Date) { + return daysBooked && daysBooked.includes(dateFormatBackend(day)) + } + + if (fetchBookedOnError) { + return ( +
+ Entschuldige, aber die Buchungszeiten konnten nicht geladen werden. + Versuchen Sie es später nochmals. +
+ ) + } + + return ( + <> +

Buchungsübersicht

+ setDate(date)} + date={date} + renderDay={({ day, classNames, onPickDate }) => ( +
onPickDate(day)} + > + {day.format('D')} +
+ )} + renderHeader={({ date, onPrevMonth, onNextMonth }) => ( +
+ +
+ {date.format('MMMM YYYY')} +
+ +
+ )} + onPickDate={() => {}} + /> + + ) +} diff --git a/package-lock.json b/package-lock.json index 9c3ec3e..f93818c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9525,6 +9525,17 @@ "prop-types": "^15.6.2" } }, + "react-calendar-component": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-calendar-component/-/react-calendar-component-3.0.0.tgz", + "integrity": "sha512-vua/pu+hTeLD9SSc+NH79IwCLc3REvl4gL9C3dtUo/+cGhPiQo6CGC/Jm8AVgTBhO4CtNr21tEWAdlCVqIxBbA==", + "requires": { + "@babel/preset-react": "^7.0.0", + "classnames": "^2.2.5", + "moment": "^2.19.1", + "prop-types": "^15.7.2" + } + }, "react-dom": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", diff --git a/package.json b/package.json index 80c19da..c35a7e6 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "mongoose": "^5.9.25", "next": "^9.5.2", "react": "16.13.1", + "react-calendar-component": "^3.0.0", "react-dom": "16.13.1", "rebass": "^4.0.7", "swr": "^0.3.0", diff --git a/pages/index.tsx b/pages/index.tsx index 3577e1a..ea7d714 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,6 +2,7 @@ import Head from 'next/head' import React from 'react' import Footer from '../components/footer' import Header from '../components/header' +import Calendar from '../components/calendar' import Wizard from '../components/wizard/index' export default function Home() { @@ -14,6 +15,7 @@ export default function Home() {
+