사용자 정의 스타일 응답 달력 사용

React 프로젝트에 사용할 달력을 찾고 있습니다. React-Calendar 구성 요소를 찾았습니다.그것은 내가 줄곧 찾고 있는 모든 기능을 가지고 있으며, 나를 위해 많은 시간을 절약하고, 스스로 그것을 구축할 필요가 없다.선택한 날짜가 응용 프로그램에 표시되는 내용에 영향을 줄 수 있도록 상태를 제어할 수 있습니다.나는 그것의 양식을 맞춤형으로 만들어서 나의 프로젝트에 적응하고 싶다. 그래서 여기는 내가 생각해 낸 것이다.
이 예제에서는 다음 구성 요소를 기준으로 합니다.

react(v17.0.2)

반응 달력(v3.5.0)

스타일링 구성 요소(v5.3.3)

최초의 풍격

나는 styled-components 패키지를 사용하여 프로젝트에 스타일을 추가할 것이지만, 만약 당신이 좋아한다면, 이 모든 것은 CSS 파일에서 완성할 수 있습니다.다음은 내 시작 코드입니다.

import Calendar from 'react-calendar';
import styled from 'styled-components';

function App() {
  return (
    <CalendarContainer>
      <Calendar calendarType='US' />
    </CalendarContainer>
  );
}

export default App;

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  max-width: 600px;
  margin: auto;
  margin-top: 20px;
  background-color: #d4f7d4;
  padding: 10px;
  border-radius: 3px;
`;

나는 <div> 달력을 저장할 수 있는 스타일을 설계했다. 이렇게 하면 달력이 허공에 떠다니지 않는다.

Note: I also applied the calendarType property to the calendar that sets the first day of the week to Sunday. This is how I'm used to seeing calendars, but by leaving this property off the week should start with Monday.

다음은 <Calendar /> 어셈블리에 스타일이 적용되기 전의 모양새입니다.

너는 이 구성 요소가 많은 단추 구성 요소로 구성된 것을 볼 수 있다.우리의 스타일을 적용하기 전에, 구성 요소를 포장할 때 사용하는 스타일시트를 먼저 봅시다.

기본 스타일시트

react calendar 구성 요소는 기본 스타일시트를 가져올 수 있습니다.파일 상단에 다음 행을 추가하여 가져올 수 있습니다.

import 'react-calendar/dist/Calendar.css';

다음은 이러한 스타일의 캘린더입니다.

많이 좋아진 것 같아!하지만 나는 그것을 내 것으로 만들고 외관을 컨트롤하고 싶다.이렇게 하면 나는 그것의 외관이 나의 응용 프로그램의 다른 부분과 일치하도록 확보할 수 있다.다행히도 우리는 자신의 스타일을 추가할 수 있다!

맞춤형 스타일

스타일링 구성 요소 (SCS와 유사) 플러그인 선택기를 사용할 수 있기 때문에, 모든 사용자 정의 스타일을 CalendarContainer 스타일링 구성 요소에 추가할 수 있습니다.React Calendar는 이미 적용된 특정 클래스를 사용하여 요소를 생성하므로 이러한 클래스를 선택기로 사용할 수 있습니다.

항행

내비게이션 업데이트부터 시작합시다.다음은 내가 하고 싶은 일이다.

달력의 전체 폭을 내비게이션으로 차지

가운데 단추의 텍스트를 굵게

화살표 버튼 확대

우리는 이렇게 할 수 있다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ... */

  /* ~~~ navigation styles ~~~ */
  .react-calendar__navigation {
    display: flex;

    .react-calendar__navigation__label {
      font-weight: bold;
    }

    .react-calendar__navigation__arrow {
      flex-grow: 0.333;
    }
  }
`;

라벨

다음은 일주일 중 며칠을 라벨의 중심에 놓고 싶습니다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ... */

  /* ~~~ label styles ~~~ */
  .react-calendar__month-view__weekdays {
    text-align: center;
  }
`;

누름단추

레이아웃은 괜찮아 보이지만 버튼에 스타일을 적용해야 합니다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ~~~ label styles ~~~ */
  /* ... */

  /* ~~~ button styles ~~~ */
  button {
    margin: 3px;
    background-color: #6f876f;
    border: 0;
    border-radius: 3px;
    color: white;
    padding: 5px 0;

    &:hover {
      background-color: #556b55;
    }

    &:active {
      background-color: #a5c1a5;
    }
  }
`;

버튼이 좀 좋아 보이는데 지금 배치가 엉망이야!이제 6일 연속이야.우리가 이 문제를 해결합시다!

격자

따라서 기본적으로 보기에는 스타일 display: flex; 이 적용되어 있으며, 불행하게도 프로젝트가 일주일에 7일 동안 다른 줄로 넘쳐납니다.다행히도 우리는 grid를 사용하여 이 행위를 덮어쓸 수 있다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ~~~ label styles ~~~ */
  /* ~~~ button styles ~~~ */
  /* ... */

  /* ~~~ day grid styles ~~~ */
  .react-calendar__month-view__days {
    display: grid !important;
    grid-template-columns: 14.2% 14.2% 14.2% 14.2% 14.2% 14.2% 14.2%; 

    .react-calendar__tile {
      max-width: initial !important;
    }
  }
`;

대단합니다. 7열(열당 14.2%)을 포함하는 격자를 만들어서 우리는 매주 7일로 돌아왔습니다!

Note that some elements that react-calendar creates have styles applied directly to the element. To overwrite these, we need the !important rule so our class selectors can take precedence.

다가오는 달과 주말

인접 월의 일수는 현재 활성 월의 일수와 동일해 보이지만 이를 변경할 수도 있습니다.우리는 주말의 업무 방식도 바꿀 수 있다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ~~~ label styles ~~~ */
  /* ~~~ button styles ~~~ */
  /* ~~~ day grid styles ~~~ */
  /* ... */

  /* ~~~ neighboring month & weekend styles ~~~ */
  .react-calendar__month-view__days__day--neighboringMonth {
    opacity: 0.7;
  }
  .react-calendar__month-view__days__day--weekend {
    color: #dfdfdf;
  }
`;

행사일

React Calendar를 사용하면 사용자가 클릭한 날짜가 활성 날짜로 설정됩니다.그러나 사용자는 현재 어느 날을 선택했는지 판단할 수 없기 때문에 이 문제를 해결하겠습니다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ~~~ label styles ~~~ */
  /* ~~~ button styles ~~~ */
  /* ~~~ day grid styles ~~~ */
  /* ~~~ neighboring month & weekend styles ~~~ */
  /* ... */

  /* ~~~ active day styles ~~~ */
  .react-calendar__tile--range {
      box-shadow: 0 0 6px 2px black;
  }
`;

기타 관점

우리의 월시도는 보기에는 괜찮은 것 같지만, 다른 시도는?연경을 살펴보자.

따라서 연경은 약간의 개선이 필요할 것이다.우리가 단추에 자신의 스타일을 추가했기 때문에, 일부 단추는 다음 줄로 밀렸다.유사한 문제도'10년'과'세기'의 관점에 나타난다.다행히도 우리는 이전처럼 사용grid을 통해 이 문제를 해결할 수 있다.우리는 월 목록을 3열 4줄의 격자로 표시할 것이다.10년 및 세기 뷰의 버튼 10개는 5열 2행의 격자에 배치됩니다.

const CalendarContainer = styled.div`
  /* ~~~ container styles ~~~ */
  /* ~~~ navigation styles ~~~ */
  /* ~~~ label styles ~~~ */
  /* ~~~ button styles ~~~ */
  /* ~~~ day grid styles ~~~ */
  /* ~~~ neighboring month & weekend styles ~~~ */
  /* ~~~ active day styles ~~~ */
  /* ... */

  /* ~~~ other view styles ~~~ */
  .react-calendar__year-view__months, 
  .react-calendar__decade-view__years, 
  .react-calendar__century-view__decades {
    display: grid !important;
    grid-template-columns: 20% 20% 20% 20% 20%;

    &.react-calendar__year-view__months {
      grid-template-columns: 33.3% 33.3% 33.3%;
    }

    .react-calendar__tile {
      max-width: initial !important;
    }
  }
`;

갈게요!스타일링 어셈블리를 통해 스타일링된 React 캘린더 어셈블리입니다.

결론

React Calendar 구성 요소의 스타일을 변경하는 것은 매우 간단합니다. 어떤 종류의 선택기를 사용해야 하는지 알기만 하면 됩니다.내가 여기서 정리한 스타일은 그중의 하나일 뿐이다.모든 선택기와 스타일이 준비되면 프로젝트에 맞는 옵션을 쉽게 조작할 수 있습니다.
이 블로그를 위한 응용 프로그램과 상호작용을 하려면 GitHub 방문할 수 있습니다.모든 스타일이 적용된 파일here을 찾을 수 있습니다.
내가 현재 개발하고 있는 응용 프로그램에서 이 구성 요소도 매우 비슷한 양식을 응용했다. 만약 당신이 흥미를 느낀다면 check that out here.이 응용 프로그램은 아직 개발 중입니다. 달력을 보려면 등록을 해야 합니다. 다음은 현재 화면 캡처입니다.

읽어주셔서 감사합니다!