Package Exports

@jjunyjjuny/react-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jjunyjjuny/react-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📅 react-calendar

calendar component in React
you can use this component in JavaScript or TypeScript

🔲Sample

click

🚀 Installation

Using npm :

$ npm i @jjunyjjuny/react-calendar

Usage with styled-components

with TypeScript

import { useState } from "react";
import styled, { css } from "styled-components";
import Calendar, { OnClickResult, Controller } from "./calendar/Calendar";

export default function Sample() {
  const [target, setTarget] = useState("start");

  const onClickDay = (result: OnClickResult) => {
    setTarget(result.nextClickTarget);
  };

  return (
    <TestWrapper>
      <ControllerContainer>
        <Controller start>
          <Button
            isNext={target === "start"}
            onClick={() => {
              setTarget("start");
            }}
          >
            checkIn
          </Button>
        </Controller>
        <Controller end>
          <Button
            isNext={target === "end"}
            onClick={() => {
              setTarget("end");
            }}
          >
            checkOut
          </Button>
        </Controller>
      </ControllerContainer>
      <Calendar onClickDay={onClickDay} countOfMonth={2} />
    </TestWrapper>
  );
}

const TestWrapper = styled.div`
  width: 800px;
  margin: 150px auto;
  padding: 1rem;
  border-radius: 3rem;
  border: 1px solid black;
`;

const ControllerContainer = styled.div`
  width: 30%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
`;

const Button = styled.div<{ isNext: boolean }>`
  height: 2rem;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  ${({ isNext }) =>
    isNext &&
    css`
      background: #21618b;
      color: white;
    `};
  & + & {
    margin-left: 2rem;
  }
`;

📃 props

Calendar

Name	Value	Description
onClickDay	function	Callback function to be executed when the date is clicked
countOfMonth	number	Number of months to show at one time
lang	string	select calendar language 'en' or 'ko'. defualt is 'en'

About onClcikDay

This function receives an object called "result".
The "result" object contains information about the date you clicked on.

// example "result"
{
    year : 2021,
    month : 5,
    day : 29
    week : "SAT",
    nextClickTarget : "end" // Date type of next click
}

All you need to do is create a function that takes this "result" object and runs it and passes it to the onClickDay function of the Calendar component!
Check out the Sample

Controller

Name	Value	Description
start, end	boolean	Type of date to click in calendar

Wait is Controller?

Controller is a wrapper that allows you to specify if the date to be clicked is start or end
you can create checkIn, checkOut button by using this.
check sample code!