react native calendars 다운로드 react native calendars 소스 코드 다운로드

react native calendars

기타 소스코드

1.1307.0

다운로드

기본 달력에 반응합니까? ️?

iOS 및 Android의 선언적 크로스 플랫폼 반응 기본 캘린더 구성 요소.

이 모듈에는이 사용자 정의 가능한 React Native Calendar 구성 요소를 사용하는 방법에 대한 정보가 포함되어 있습니다.

패키지는 Android 및 iOS 와 호환됩니다

공식 문서
이 readme는 react-native-calendars 시작하는 방법에 대한 기본 예를 제공합니다. 자세한 정보는 공식 문서 사이트를 참조하십시오.

특징

순수한 JS. 기본 코드가 필요하지 않습니다
날짜 마킹-도트, 다중 도트, 기간, 다중 기간 및 사용자 정의 표시
스타일, 컨텐츠 (일, 달 등) 및 날짜의 사용자 정의
자세한 문서 및 예
유연한 맞춤형 렌더링이있는 스 와이프 캘린더
오늘으로 스크롤, 날짜 선택 등
특정 날짜를 허용하거나 차단합니다
접근성 지원
다른 로케일에 대한 자동 날짜 형식

시도해보십시오

다음 단계를 사용하여 샘플 모듈을 실행할 수 있습니다.

 $ git clone [email protected]:wix/react-native-calendars.git

$ cd react-native-calendars

$ yarn install

$ cd ios && pod install && cd ..

$ react-native run-ios

예제 모듈 화면에서 예제 스크린 소스 코드를 확인할 수 있습니다.

이 프로젝트는 Expo/CRNA (배출없이)와 호환되며 예제는 Expo에 게시되었습니다.

시작하기?

React Native Project에서 React Native-Calendars를 시작하는 방법은 다음과 같습니다.

패키지 설치 :

 $ yarn add react-native-calendars

RN 캘린더는 JavaScript로 구현되므로 기본 모듈 링크가 필요하지 않습니다.

용법

라이브러리의 기본 사용 예

이 구성 요소 사용에 대한 자세한 정보는 공식 문서 사이트를 참조하십시오.

`Calendar` 구성 요소 가져 오기

 import { Calendar , CalendarList , Agenda } from 'react-native-calendars' ;

앱에서 `Calendar` 구성 요소를 사용하십시오.

 < Calendar
  onDayPress = { day => {
    console . log ( 'selected day' , day ) ;
  } }
/>

일부 코드 예제

다음은 React-Native-Calendars의 주요 기능을 사용하는 방법을 보여주는 몇 가지 코드 스 니펫입니다.

기본 설정으로 기본 캘린더 만들기 :

 import React , { useState } from 'react' ;
import { Calendar , LocaleConfig } from 'react-native-calendars' ;

const App = ( ) => {
  const [ selected , setSelected ] = useState ( '' ) ;

  return (
    < Calendar
      onDayPress = { day => {
        setSelected ( day . dateString ) ;
      } }
      markedDates = { {
        [ selected ] : { selected : true , disableTouchEvent : true , selectedDotColor : 'orange' }
      } }
    />
  ) ;
} ;

export default App ;

캘린더의 모양을 사용자 정의하십시오.

 < Calendar
  // Customize the appearance of the calendar
  style = { {
    borderWidth : 1 ,
    borderColor : 'gray' ,
    height : 350
  } }
  // Specify the current date
  current = { '2012-03-01' }
  // Callback that gets called when the user selects a day
  onDayPress = { day => {
    console . log ( 'selected day' , day ) ;
  } }
  // Mark specific dates as marked
  markedDates = { {
    '2012-03-01' : { selected : true , marked : true , selectedColor : 'blue' } ,
    '2012-03-02' : { marked : true } ,
    '2012-03-03' : { selected : true , marked : true , selectedColor : 'blue' }
  } }
/>

로케일 구성 :

 import { LocaleConfig } from 'react-native-calendars' ;
import React , { useState } from 'react' ;
import { Calendar , LocaleConfig } from 'react-native-calendars' ;

LocaleConfig . locales [ 'fr' ] = {
  monthNames : [
    'Janvier' ,
    'Février' ,
    'Mars' ,
    'Avril' ,
    'Mai' ,
    'Juin' ,
    'Juillet' ,
    'Août' ,
    'Septembre' ,
    'Octobre' ,
    'Novembre' ,
    'Décembre'
  ] ,
  monthNamesShort : [ 'Janv.' , 'Févr.' , 'Mars' , 'Avril' , 'Mai' , 'Juin' , 'Juil.' , 'Août' , 'Sept.' , 'Oct.' , 'Nov.' , 'Déc.' ] ,
  dayNames : [ 'Dimanche' , 'Lundi' , 'Mardi' , 'Mercredi' , 'Jeudi' , 'Vendredi' , 'Samedi' ] ,
  dayNamesShort : [ 'Dim.' , 'Lun.' , 'Mar.' , 'Mer.' , 'Jeu.' , 'Ven.' , 'Sam.' ] ,
  today : "Aujourd'hui"
} ;

LocaleConfig . defaultLocale = 'fr' ;

const App = ( ) => {
  const [ selected , setSelected ] = useState ( '' ) ;

  return (
    < Calendar
      onDayPress = { day => {
        setSelected ( day . dateString ) ;
      } }
      markedDates = { {
        [ selected ] : { selected : true , disableTouchEvent : true , selectedDotColor : 'orange' }
      } }
    />
  ) ;
} ;

export default App ;

캘린더에 글로벌 테마 추가 :

    < Calendar
      style = { {
        borderWidth : 1 ,
        borderColor : 'gray' ,
        height : 350 ,
      } }
      theme = { {
        backgroundColor : '#ffffff' ,
        calendarBackground : '#ffffff' ,
        textSectionTitleColor : '#b6c1cd' ,
        selectedDayBackgroundColor : '#00adf5' ,
        selectedDayTextColor : '#ffffff' ,
        todayTextColor : '#00adf5' ,
        dayTextColor : '#2d4150' ,
        textDisabledColor : '#dd99ee'
      } }
    </ Calendar >