ดาวน์โหลด react native calendars react native calendars ซอร์สโค้ด

react native calendars

ซอร์สโค้ดอื่น ๆ

1.1307.0

ดาวน์โหลด

ตอบสนองปฏิทินพื้นเมือง? ️?

ส่วนประกอบปฏิทินพื้นเมืองที่ประกาศข้ามแพลตฟอร์มตอบสนองสำหรับ iOS และ Android

โมดูลนี้มีข้อมูลเกี่ยวกับวิธีการใช้ส่วนประกอบปฏิทิน ดั้งเดิม ที่ปรับแต่งได้นี้

แพ็คเกจนี้เข้ากันได้กับทั้ง Android และ iOS

เอกสารอย่างเป็นทางการ
readme นี้ให้ตัวอย่างพื้นฐานของวิธีการเริ่มต้นด้วย react-native-calendars สำหรับข้อมูลโดยละเอียดโปรดดูเว็บไซต์เอกสารอย่างเป็นทางการ

คุณสมบัติ

JS บริสุทธิ์ ไม่จำเป็นต้องใช้รหัสดั้งเดิม
การทำเครื่องหมายวันที่-dot, หลายจุด, ระยะเวลา, การทำเครื่องหมายหลายระยะเวลาและแบบกำหนดเอง
การปรับแต่งสไตล์เนื้อหา (วันเดือน ฯลฯ ) และวันที่
เอกสารและตัวอย่างโดยละเอียด
ปฏิทินที่สามารถเลื่อนได้พร้อมการเรนเดอร์แบบกำหนดเองที่มีความยืดหยุ่น
เลื่อนไปที่วันนี้เลือกวันที่และอื่น ๆ
อนุญาตหรือปิดกั้นวันที่บางอย่าง
การสนับสนุนการเข้าถึง
การจัดรูปแบบวันที่อัตโนมัติสำหรับสถานที่ต่าง ๆ

ลองใช้⚡

คุณสามารถเรียกใช้โมดูลตัวอย่างโดยใช้ขั้นตอนเหล่านี้:

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

$ cd react-native-calendars

$ yarn install

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

$ react-native run-ios

คุณสามารถตรวจสอบตัวอย่างหน้าจอซอร์สโค้ดในหน้าจอโมดูลตัวอย่าง

โครงการนี้เข้ากันได้กับ Expo/CRNA (โดยไม่ต้องออก) และตัวอย่างได้รับการเผยแพร่ในงานแสดงสินค้า

เริ่มต้น?

นี่คือวิธีเริ่มต้นใช้งาน React-Native-Calendars ในโครงการ React Native ของคุณ:

ติดตั้งแพ็คเกจ:

 $ yarn add react-native-calendars

ปฏิทิน RN ถูกนำไปใช้ใน JavaScript ดังนั้นจึงไม่จำเป็นต้องมีการเชื่อมโยงโมดูลดั้งเดิม

การใช้งาน

ตัวอย่างการใช้งานขั้นพื้นฐานของห้องสมุด

สำหรับข้อมูลโดยละเอียดเกี่ยวกับการใช้ส่วนประกอบนี้ดูเว็บไซต์เอกสารอย่างเป็นทางการ

การนำเข้าองค์ประกอบ `Calendar`

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

ใช้ส่วนประกอบ `Calendar` ในแอพของคุณ:

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

ตัวอย่างรหัสบางส่วน

นี่คือตัวอย่างโค้ดสองสามตัวอย่างที่แสดงให้เห็นถึงวิธีการใช้คุณสมบัติที่สำคัญบางอย่างของ React-Native-Calendars:

การสร้างปฏิทินพื้นฐานพร้อมการตั้งค่าเริ่มต้น:

 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 ;

ปรับแต่งลักษณะที่ปรากฏของปฏิทิน:

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

การกำหนดค่าสถานที่:

 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 ;

การเพิ่มธีมทั่วโลกในปฏิทิน:

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