Unduh react native calendars - react native calendars Source Code Unduh

react native calendars

Kode sumber lainnya

1.1307.0

Unduh

Bereaksi Kalender Asli? ️?

Platform lintas-platform deklaratif bereaksi komponen kalender asli untuk iOS dan Android.

Modul ini mencakup informasi tentang cara menggunakan komponen kalender Native React yang dapat disesuaikan ini.

Paket ini kompatibel dengan Android dan iOS

Dokumentasi resmi
Readme ini memberikan contoh-contoh dasar tentang cara memulai dengan react-native-calendars . Untuk informasi terperinci, lihat situs dokumentasi resmi.

Fitur

JS murni. Tidak ada kode asli yang diperlukan
Penandaan Tanggal-titik, multi-dot, periode, multi-periode dan penandaan khusus
Kustomisasi gaya, konten (hari, bulan, dll) dan tanggal
Dokumentasi dan contoh terperinci
Kalender swipable dengan rendering khusus yang fleksibel
Menggulir ke hari ini, memilih tanggal, dan banyak lagi
Memungkinkan atau memblokir tanggal tertentu
Dukungan aksesibilitas
Pemformatan tanggal otomatis untuk berbagai lokal

Cobalah ⚡

Anda dapat menjalankan modul sampel menggunakan langkah -langkah ini:

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

$ cd react-native-calendars

$ yarn install

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

$ react-native run-ios

Anda dapat memeriksa contoh kode sumber layar di layar modul contoh

Proyek ini kompatibel dengan Expo/CrNA (tanpa mengeluarkan), dan contoh -contoh telah diterbitkan di Expo

Memulai?

Inilah cara memulai dengan kalendar asli reaksi di proyek React Native Anda:

Instal paket:

 $ yarn add react-native-calendars

Kalender RN diimplementasikan dalam JavaScript, jadi tidak diperlukan modul asli yang diperlukan.

Penggunaan

Contoh Penggunaan Dasar Perpustakaan

Untuk informasi terperinci tentang penggunaan komponen ini, lihat situs dokumentasi resmi

Mengimpor komponen `Calendar`

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

Gunakan komponen `Calendar` di aplikasi Anda:

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

Beberapa contoh kode

Berikut adalah beberapa cuplikan kode yang menunjukkan cara menggunakan beberapa fitur utama dari react-native-calendar:

Membuat Kalender Dasar dengan Pengaturan Default:

 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 ;

Kustomisasi penampilan kalender:

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

Mengkonfigurasi Lokal:

 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 ;

Menambahkan tema global ke 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 >