[REACT] React로 캘린더 만들기 (2) - month이동하기, 요일써주기

1. Header에서 달을 이동시키자

import React from "react";
import { Header, Calendar } from '../components';
import moment from "moment";
import styled from "styled-components";
 
function FullCalendar() {
    const [calendarYM , setCalendarYM] = React.useState(moment());
    const [today , setToday] = React.useState(moment().format("현재 YYYY - MM - DD"));
  
    const moveMonth = (month)=>{
        setCalendarYM(calendarYM.add(month,"M"));
        // console.log(calendarYM.format("YYYY년 - MM월 DD일"))
    }
    return (
        <Layout >
          <Container>
            <Header
                calendarYM = {calendarYM}
                today= {today}
                moveMonth ={moveMonth}
              />
            <Calendar/>
          </Container>
        </Layout>
    );
  }
 
  const Layout = styled.div`
        width: 100vw;
        height: 80vh;
        border: 1px solid black;
  `;
  const Container = styled.div`
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  `;
  export default FullCalendar;

pages/FullCalendar

 

 

FullCalendar에서 moveMonth라는 함수를 만들어서 Header에 넘긴다.

moment에서 month를 받아서 add해주는 것이다.

 

 

components/Header.js

import React from "react";
import {Text, Button} from "../elements"
import styled from "styled-components";
import moment from "moment";
 
const Header = (props) =>{
    const { calendarYM, today, moveMonth} = props;
    const [text, setText] = React.useState(calendarYM.format("YYYY년 MM월"));
    
    return(
        <React.Fragment>
            <Container>  
                
                <Text>{text}</Text>
                <Text>{today}</Text>
                <div>
                    <Button 
                        _onClick={()=> {
                        moveMonth(-1);
                        setText(calendarYM.format("YYYY년 MM월"));
                        }} 
                        text="<">
                    </Button>
        
                    <Button 
                        _onClick={()=> {
                        moveMonth(1);
                        setText(calendarYM.format("YYYY년 MM월"));
                        }} 
                        text=">">
                    </Button>
                </div>
               
            </Container>
        </React.Fragment>
    );
}
 
const Container = styled.div`
    flex-basis: 50px;
    background-color: tomato;
    display:flex;
    justify-content: space-between;
`;
 
 
 
export default Header;

 

Header에서 props로 받아오고 text를 useState로 관리한다.

 

버튼 클릭할때마다 moveMonth에 -1과 1을 더해준다.

 

 

 

 

<를 클릭하면 2021년 6월 이런식으로 앞으로 가고

>를 클릭하면 2021년 8월 .. 로 뒤로간다.

 

 

 

 

2. 요일 써주기

import React from "react";
import styled from "styled-components";
 
const DateHeader = (props) =>{
    const dates  = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
    return(
        <React.Fragment>
            <Container>
           {dates.map((date, idx)=>{
               return(
            
                <WeekName
                    key = {idx}
                    >
                    {date}
                </WeekName>
                
               )
               
           })}
           </Container>
     
        </React.Fragment>
    )
}
 
const Container = styled.div`
    display: flex;
    justify-content: space-between;
    
`;
 
const WeekName = styled.div`
    margin: 0 auto;
    background-color : skyblue;
    display:block;
    width: 100%;
    text-align:center;
    
`;
export default DateHeader;

components/DateHeader.js

 

 

이렇게 요일도 써주었다.