react native calendars

Reagieren Sie native Kalender? Euen?

Eine deklarative plattformübergreifende native Kalenderkomponente für iOS und Android reagiert.

Dieses Modul enthält Informationen zur Verwendung dieser anpassbaren Reaktionskalenderkomponente .

Das Paket ist sowohl mit Android als auch mit iOS kompatibel

Offizielle Dokumentation

Dieses Readme bietet grundlegende Beispiele für den Einstieg mit react-native-calendars . Ausführliche Informationen finden Sie in der offiziellen Dokumentationsstelle.

Merkmale

• Reines js. Kein einheimischer Code erforderlich
• Datumskennzeichnung-Punkt, Multi-Punkt, Zeitraum, Mehrfachperioden und benutzerdefinierte Markierung
• Anpassung von Stil, Inhalten (Tage, Monate usw.) und Daten
• Detaillierte Dokumentation und Beispiele
• Steigern Sie den Kalender mit flexibles kundenspezifischem Rendering
• Scrollen Sie bis heute, wählen Sie Daten und mehr
• Bestimmte Daten zulassen oder blockieren
• Succontility -Unterstützung
• Automatische Datumsformatierung für verschiedene Orte

Probieren Sie es aus ⚡

Sie können ein Beispielmodul mit diesen Schritten ausführen:

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

$ cd react-native-calendars

$ yarn install

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

$ react-native run-ios

Sie können Beispielbildschirme Quellcode in Beispielmodulbildschirmen überprüfen

Dieses Projekt ist mit Expo/CRNA (ohne Auswahl) kompatibel, und die Beispiele wurden auf Expo veröffentlicht

Erste Schritte ?

Hier erfahren Sie, wie Sie in Ihrem React Native-Projekt mit React-nativ-Kalendern beginnen:

Installieren Sie das Paket:

 $ yarn add react-native-calendars

RN -Kalender wird in JavaScript implementiert, sodass kein natives Modulverknüpfung erforderlich ist.

Verwendung

Grundlegende Nutzungsbeispiele der Bibliothek

Ausführliche Informationen zur Verwendung dieser Komponente finden Sie auf der offiziellen Dokumentationsstelle

Importieren der Calendar

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

Verwenden Sie die Calendar in Ihrer App:

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

Einige Codebeispiele

Hier sind einige Code-Snippets, die zeigen, wie einige der wichtigsten Funktionen von React-nativ-Kalendern verwendet werden:

Erstellen eines grundlegenden Kalenders mit Standardeinstellungen:

 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 ;

Passen Sie das Erscheinungsbild des Kalenders an:

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

Konfigurieren des Gebietsschemas:

 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 ;

Hinzufügen eines globalen Themas zum Kalender:

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

Beispiele für individuelle Kalender

Kalender

Punktmarkierung

Multi-Dot-Markierung

Periodenmarkierung

Multi-Period-Markierung

Benutzerdefinierte Markierung

Datum der Ladeanzeige

Scrollierbares halbmännischer Kalender

Horizontaler Kalender

Agenda

Autoren

• Tautvilas mecinskas - Anfangscode - @ttautvilas
• Katrin Zotchev - Erstes Design - @katrin_zot

Siehe auch die Liste der Mitwirkenden, die an diesem Projekt teilgenommen haben.

Beitragen

Wir begrüßen Beiträge zu reagierenden Kalendern.

Wenn Sie eine Idee für eine neue Funktion haben oder einen Fehler entdeckt haben, öffnen Sie bitte ein Problem.

Bitte yarn test und yarn lint bevor Sie Änderungen vorantreiben.

Vergessen Sie nicht, einen Titel und eine Beschreibung hinzuzufügen, in der das Problem erläutert wird, das Sie lösen möchten, und Ihre vorgeschlagene Lösung.

Screenshots und GIFs sind sehr hilfreich, um die PR für Bewertungen hinzuzufügen.

Bitte formatieren Sie die Dateien nicht - wir versuchen, eine einheitliche Syntax aufzubewahren und den Überprüfungsprozess schnell und einfach zu halten.

Lizenz

React Native Calendars ist MIT lizenziert