import React, {useState} from 'react' import styled from '@emotion/styled' import { Box, Container, Grid, Paper, Typography, Badge } from '@mui/material'; import { grey } from '@mui/material/colors'; import { DateCalendar, PickersDay } from '@mui/x-date-pickers'; const SuiteAndBTCGraphic = ( ); const CustomDiv = styled.div` background-color: ${(props) => props.theme.palette.primary.brightest}; height: 140vh; width: 100%; display: flex; align-items: center; `; const isFirstWednesday = (day) => { let date = new Date(day); return date.getDay() === 3 && date.getDate() <= 7; } const MeetupDay = (props) => { const {day, outsideCurrentMonth, ...other } = props; const isSelected = !props.outsideCurrentMonth && isFirstWednesday(day); return ( ); } /* The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 1. Perhaps the modal is actually seperate and is just passed the dates from a click event? *** 2. We also want to have the only badge be on the first wednesday of each month - onMonthChange has been added. Need to get this info to the day components to render badge - Since there will be a default month, use that and onMonthChange to set badges 3. Also need to change colors */ const CalendarPage = () => { return ( Calendar Trade Looking to buy bitcoin? Sell bitcoin? Buy goods and services with bitcoin? Come and meet up with us! Lets change our world one transaction at a time. Education Curious? Skeptical? Can’t get enough? We have monthly meetups where we teach people what BTC is, why it matters, and how it works. Let us show you how BTW can help YOU! Socialize Just feel like hanging out with people that understand the the value of financial empowerment and freedom? We love to get together for coffee, a drink, or a bite and talk about bitcoin and everything else. {SuiteAndBTCGraphic} ) } export default CalendarPage