Descarga react native calendars - Descargar el código fuente react native calendars

react native calendars

Otro código fuente

1.1307.0

Descargar

¿Reaccionar los calendarios nativos? ️?

Un declarante componente de calendario nativo reaccionando para iOS y Android.

Este módulo incluye información sobre cómo usar este componente calendario nativo React personalizable.

El paquete es compatible con Android e iOS

Documentación oficial
Este ReadMe proporciona ejemplos básicos de cómo comenzar con react-native-calendars . Para obtener información detallada, consulte el sitio de documentación oficial.

Características

JS puro. No se requiere código nativo
Marcado de fecha: punto, múltiples puntos, período, múltiples períodos y marcas personalizadas
Personalización del estilo, contenido (días, meses, etc.) y fechas
Documentación detallada y ejemplos
Calendario deslizable con representación personalizada flexible
Desplazarse hasta hoy, seleccionar fechas y más
Permitir o bloquear ciertas fechas
Soporte de accesibilidad
Formateo automático de la fecha para diferentes lugares

Pruébalo ⚡

Puede ejecutar un módulo de muestra usando estos pasos:

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

$ cd react-native-calendars

$ yarn install

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

$ react-native run-ios

Puede verificar el código fuente de las pantallas de ejemplo en las pantallas del módulo de ejemplo

Este proyecto es compatible con Expo/CRNA (sin expulsar), y los ejemplos se han publicado en Expo

Empezando ?

Aquí le mostramos cómo comenzar con React-Native-Calendars en su proyecto React Native:

Instale el paquete:

 $ yarn add react-native-calendars

Los calendarios RN se implementan en JavaScript, por lo que no se requiere un enlace del módulo nativo.

Uso

Ejemplos de uso básico de la biblioteca

Para obtener información detallada sobre el uso de este componente, consulte el sitio de documentación oficial

Importación del componente `Calendar`

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

Use el componente `Calendar` en su aplicación:

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

Algunos ejemplos de código

Aquí hay algunos fragmentos de código que demuestran cómo usar algunas de las características clave de React-Native-Calendars:

Creación de un calendario básico con configuración predeterminada:

 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 ;

Personaliza la apariencia del calendario:

 < 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' }
  } }
/>

Configuración de la ubicación:

 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 ;

Agregar un tema global al calendario:

    < 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 >