Einfach zu bedienende und optisch beeindruckende Kalenderkomponente für React Native

Blog

Einfach zu bedienende und optisch beeindruckende Kalenderkomponente für React Native

React-native-calendar-strip .Einfach zu bedienende und optisch beeindruckende Kalenderkomponente für React Native.



Installieren

$ npm install react-native-calendar-strip # OR $ yarn add react-native-calendar-strip

Verwendungszweck

Einfaches Out-of-the-Box-Beispiel

Sie können diese Komponente ohne Stil oder Anpassung verwenden. Importieren Sie es einfach in Ihr Projekt und rendern Sie es:

import { View, StyleSheet } from 'react-native'; import CalendarStrip from 'react-native-calendar-strip'; const Example = () => ( ); const styles = StyleSheet.create({ container: { flex: 1 } });

Dies führt zu:



ember.js, angle.js, reagieren, Lenker

Styling und Animationen Beispiel

Obwohl diese Komponente ohne Anpassung funktioniert, ist es möglich, fast alles anzupassen, sodass Sie es so schön gestalten können, wie Sie möchten:



import React, {Component} from 'react'; import { AppRegistry, View } from 'react-native'; import moment from 'moment'; import CalendarStrip from 'react-native-calendar-strip'; class Example extends Component { let datesWhitelist = [{ start: moment(), end: moment().add(3, 'days') // total 4 days enabled }]; let datesBlacklist = [ moment().add(1, 'days') ]; // 1 day disabled render() { return (

wie aktiviere ich tcm auf roku

Props

Methods

Methods may be accessed through the instantiated component’s ref .

Prop Description
getSelectedDate()
MarkedDatesFormat-Array-Beispiel
setSelectedDate(date)

MarkedDates-Screenshot-Beispiel

Alt-Text

Komponenten ausblenden

Stütze Beschreibung Typ Standard
date Die Monatsbezeichnung ein- oder ausblenden. Bool 0
getNextWeek() Alle Daten anzeigen oder ausblenden. Bool getPreviousWeek()
updateWeekView(date, startDate) Tagesnamenslabel ein- oder ausblenden Bool date
startDate Anzeigen oder Ausblenden der Tagesnummer-Beschriftung Bool useIsoWeekday

Styling

Stütze Beschreibung Typ Standard
startingDate Stil für die CalendarStrip-Komponente der obersten Ebene. Irgendein
moment Sh Style für die reaktionsschnell dimensionierte Innenansicht. Dies ist notwendig, um Auffüllung/Rand aus der Ansicht der obersten Ebene zu berücksichtigen. Die Innenansicht hat Stil |_+_| standardmäßig. Wenn diese Komponente in einem anderen Container mit dynamischer Größe verschachtelt ist, entfernen Sie den Flex-Stil, indem Sie |_+_| übergeben. Irgendein
Date Stil für den Kopfzeilentext des Kalenders
moment Date Stil für den Kopfzeilentextwrapper des Kalenders Irgendein
selectedDate Position des Kopftextes (oben oder unten) moment Date
moment Date Format für den Kopfzeilentext des Kalenders. Optionen finden Sie unter Momente Dokumentation Zeichenfolge
onDateSelected Stil für den Namen des Tages an Werktagen im Datumsstreifen Irgendein
moment Date Style für die Zahl des Tages an Werktagen im Datumsstreifen. Irgendein
onWeekChanged Style für den Namen des Tages an Wochenendtagen im Datumsstreifen. Irgendein
moment Date Stil für die Zahl des Tages an Wochenendtagen im Datumsstreifen. Irgendein
updateWeek Ob Wochenendtermine separat gestaltet werden sollen. Bool false
True Stil für den ausgewählten Namen des Tages im Datumsstreifen. Irgendein
useIsoWeekday Stil für die ausgewählte Zahl des Tages im Datumsstreifen. Irgendein
True Stil für deaktivierten Namen des Tages im Datumsstreifen (gesteuert von dateWhitelist & dateBlacklist). Irgendein
minDate Stil für die deaktivierte Nummer des Tages im Datumsstreifen (gesteuert von dateWhitelist & dateBlacklist). Irgendein
maxDate Stil für die markierte Datumsmarkierung. Objekt
datesWhitelist Deckkraft des deaktivierten Datumsstreifens. Nummer Date
moment Date Benutzerdefiniertes Styling pro Datum, das die oben genannten Stile überschreibt. Tabelle überprüfen Unter Array
datesBlacklist Überschreiben Sie die zugrunde liegende Skalierung des Textelements, um die Schrifteinstellungen zu respektieren Bool markedDates

Responsive Größenanpassung

Stütze Beschreibung Typ Standard
// Date range format { start: (Date or moment Date) end: (Date or moment Date) } Maximale Größe, bis zu der CalendarDay reagiert. Nummer // Market dates format [ { date: '(string, Date or Moment object)', dots: [ { key: (unique number or string), color: string, selectedDotColor: string, }, ], }, ]
showMonth Mindestgröße, auf die CalendarDay reagiert. Nummer True
showDate Passen Sie die responsive Größe an. Kann positiv (Größe erhöhen) oder negativ (Größe verringern) sein. Dieser Wert wird zur berechneten Tageskomponentenbreite addiert Nummer True

Symbolgröße

Stütze Beschreibung Typ Standard
showDayName Symbol, das für das linke Symbol verwendet werden soll. Es akzeptiert eine Anforderung mit URL zum Bild (|_+_| alles, was von Moment analysiert werden kann. Irgendein True
showDayNumber einen Bereich angeben. Wenn kein endDate angegeben wird, wird startDate als einzelnes Datum behandelt. Irgendein True
style Stil für den Namen des Tages an Werktagen im Datumsstreifen Irgendein innerStyle
flex:1 Style für die Zahl des Tages an Werktagen im Datumsstreifen. Irgendein []
calendarHeaderStyle Stil für den Datumscontainer. Irgendein calendarHeaderContainerStyle
Anwendungsbeispiel:
calendarHeaderPosition

Animationen

Wochenstreifenanimation

Sequenzbeispiel (Daten werden einzeln angezeigt) Paralleles Beispiel (Daten auf einmal angezeigt)

Animationsoptionen für Wochenstreifen

Requisiten Beschreibung Typen
above, below Wählen Sie aus, welche Art von Animation Sie anzeigen möchten |_+_| oder |_+_|
above Dauer der Animation in Millisekunden Anzahl (ms)

Animation zur Tagesauswahl

Grenzbeispiel Hintergrundbeispiel

Animationsoptionen für die Tagesauswahl

Requisiten Beschreibung Typ
calendarHeaderFormat Wählen Sie aus, welche Art von Animation Sie anzeigen möchten |_+_| oder |_+_|
dateNameStyle Dauer der Animation in Millisekunden Anzahl (ms)
dateNumberStyle Randbreite des ausgewählten Tages. Erforderlich, wenn der Typ auf border eingestellt ist . Nummer
weekendDateNameStyle Randfarbe des ausgewählten Tages. Erforderlich, wenn der Typ auf border eingestellt ist . Zeichenfolge
weekendDateNumberStyle Hervorgehobene Farbe des ausgewählten Datums. Erforderlich, wenn der Typ auf Hintergrund eingestellt ist . Zeichenfolge
styleWeekend optionale Konfigurationsoptionen übergeben an LayoutAnimation irgendein
True optionale Konfigurationsoptionen übergeben an LayoutAnimation irgendein
highlightDateNameStyle optionale Konfigurationsoptionen übergeben an LayoutAnimation irgendein
highlightDateNumberStyle optionale Konfigurationsoptionen übergeben an LayoutAnimation irgendein

Lokalisierung

Requisiten Beschreibung Typ
disabledDateNameStyle Gebietsschema für Termine Objekt

Diese Requisite wird verwendet, um der Komponente 'Reactive-native-calendar-strip' eine Lokalisierung hinzuzufügen. Die Lokalisierungsregeln sind die gleichen wie bei Momenten und finden sich in Momente Dokumentation

|_+_| Requisiten Beschreibung Typ
disabledDateNumberStyle Der Name des Gebietsschemas (z. B. 'fr') Zeichenfolge
markedDatesStyle Das config-Objekt, das alle Lokalisierungsstrings enthält… Objekt

Build-Release-Informationen

Um einen Release-Build ordnungsgemäß zu erstellen, importieren Sie das entsprechende Locale-Modul mithilfe der folgenden Schritte. Wenn das Gebietsschema-Modul nicht importiert wird, stürzt der Release-Build ab (obwohl der Dev-Build funktioniert).

Linux Softlink löschen

1- MomentJs-Modul importieren:

$ Garn Moment hinzufügen

oder

$ npm Installationsmoment

2- Gehen Sie zu Ihrer index.js und importieren Sie das spezifische Gebietsschema nach dem Import des Hauptmoments. Ex:

wie man syscoin kauft
disabledDateOpacity

Der Gebietsschema-Import muss mit der in der Gebietsschema-Konfiguration angegebenen Sprache übereinstimmen (Beispiel unten).

Beispiel für ein Gebietsschemaobjekt ist:

0.3

Download-Details:

Autor: BugiDev

GitHub: https://github.com/BugiDev/react-native-calendar-strip

#reagieren-native #programmierung