react native calendars Download - react native calendars Code Source Télécharger

react native calendars

Autre code source

1.1307.0

Télécharger

Réagir les calendriers indigènes? ️?

Un composant de calendrier natif de la plate-plaqueur déclaratif réagit pour iOS et Android.

Ce module comprend des informations sur la façon d'utiliser ce composant de calendrier natif React personnalisable.

Le package est compatible avec Android et iOS

Documentation officielle
Ce ReadMe fournit des exemples de base de la façon de commencer avec react-native-calendars . Pour des informations détaillées, reportez-vous au site officiel de la documentation.

Caractéristiques

Pur js. Aucun code natif requis
Marque de date - point, multi-points, période, multi-périodes et marquage personnalisé
Personnalisation du style, du contenu (jours, mois, etc.) et des dates
Documentation détaillée et exemples
Calendrier glissable avec rendu personnalisé flexible
Faire défiler aujourd'hui, sélectionner les dates, et plus
Permettre ou bloquer certaines dates
Prise en charge de l'accessibilité
Formatage de date automatique pour différents lieux

Essayez-le ⚡

Vous pouvez exécuter un exemple de module en utilisant ces étapes:

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

$ cd react-native-calendars

$ yarn install

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

$ react-native run-ios

Vous pouvez vérifier l'exemple d'écran Code source dans l'exemple d'écrans du module

Ce projet est compatible avec l'Expo / CRNA (sans éjection), et les exemples ont été publiés sur Expo

Commencer ?

Voici comment démarrer avec React-Native-Calendars dans votre projet Native React:

Installez le package:

 $ yarn add react-native-calendars

Les calendriers RN sont implémentés en JavaScript, donc aucun lien de module natif n'est requis.

Usage

Exemples d'utilisation de base de la bibliothèque

Pour des informations détaillées sur l'utilisation de ce composant, consultez le site de documentation officielle

Importation du composant `Calendar`

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

Utilisez le composant `Calendar` dans votre application:

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

Quelques exemples de code

Voici quelques extraits de code qui montrent comment utiliser certaines des principales caractéristiques des réactions-natifs-calendars:

Création d'un calendrier de base avec paramètres par défaut:

 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 ;

Personnalisez l'apparence du calendrier:

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

Configuration des paramètres régionaux:

 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 ;

Ajout d'un thème global au calendrier:

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