Components react native to create a calendar that can run the calendar year, Buddhist era, and Christian era

Usage

import React, { useEffect, useState } from 'react';
import {
  SafeAreaView,
  Dimensions,
  StyleSheet,
  useColorScheme,
  View,
} from 'react-native';
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import { FontSize } from './src/react-native-datepicker-th//src/FontSizeHelper';
import CalendarScreen from '@blacksakura013/th-datepicker'
 
const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';
  const [Vel1, setVel1] = useState(new Date());
   const dateStr = '12/06/1998';
  const parts = dateStr.split('/');
  const [Vel2, setVel2] = useState(new Date(parts[2], parts[0] - 1, parts[1]));
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  useEffect(() => {
    console.log(Vel1)
  }, [Vel1]);

  useEffect(() => {
    console.log(Vel2)
  }, [Vel2]);

  return (
    <SafeAreaView style={backgroundStyle}>
      <View style={{ alignItems: 'center' }}>
        <CalendarScreen
          language={'th'}
          era={'be'}
          format={'dd month yyyy'}
          borderColor={Colors.buttonColorPrimary}
          linkTodateColor={Colors.itemColor}
          calendarModel={{ backgroundColor: Colors.backgroundColor, buttonSuccess: { backgroundColor: Colors.itemColor }, pickItem: { color: Colors.itemColor } }}
          borderWidth={1}
          icon={{ color: Colors.buttonColorPrimary }}
          fontSize={FontSize.medium}
          fontColor={Colors.fontColor}
          width={deviceWidth * 0.95}
          borderRadius={10}
          onChange={(vel) => setVel1(vel)} />
        <CalendarScreen
          language={'en'}
          era={'bc'}
          value={Vel2}
          format={'dd mon yyyy'}
          width={deviceWidth}
          onChange={(vel) => setVel2(vel)} />
      </View>
    </SafeAreaView>
  );
};


export default App;

version 1.0.16 update warning of translations/I18n

custom main styles

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |height|number|0-99..|Set the height of the button| |width|number|0-99..|Set the width of the button| |fontSize|number|0-99..|Set font size of the button| |language|Text|TH/EN|Specify the language to set the desired language (supports English and Thai)| |value|Date|Date()|Set start date| |era|Text|BC/BE|Determine the type of calendar B.C. or B.E.| |format|Text|'DD/MM/YYYY''DD/MON/YYYY' 'DD/MONTH/YYYY' 'DD-MM-YYYY' 'DD-MON-YYYY' 'DD-MONTH-YYYY' 'DD MM YYYY' 'DD MON YYYY' 'DD MONTH YYYY'|Set the display format of the calendar| |padding|number|0-99..|Set the spacing of letters and button edges| |borderRadius|number|0-99..|Set the roundness of the button border| |borderColor|Text|color|Set the background color of the borderColor| |backgroundColor|Text|color|Set the background color of the button| |fontColor|Text|color|Set font color| |linkTodateColor|Text|color|Set font color|

custom icon

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |name|Text|'carlenda'|Set icon image Reference icon from 'react-native-vector-icons/FontAwesome'| |size|number|0-99..|Set the icon size| |color|Text|color|Set the icon color|

custom calendarModel

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |backgroundColor|Text|color|Set the calendar background color|

custom calendarModel dropdownlist

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |borderRadius|number|0-99..|Set the roundness of the dropdownlist border| |borderWidth|number|0-99..|Set the width of the dropdownlist| |borderColor|Text|colorSet the dropdownlist border thickness |fontColor|Text|color|Set font color| |backgroundColor|Text|color|Set the background color of the dropdownlist|

custom calendarModel pickItem

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |color|Text|color|Set pickItem color|

custom calendarModel buttonSuccess

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |backgroundColor|Text|color|Set the background color of the buttonSuccess| |fontColor|Text|color|Set the font color of the buttonSuccess|

custom calendarModel buttonSuccess

|NAME|PROPS TYPE|DATA FORMAT|DESCERIPTION| |----|-----|-------|-------| |backgroundColor|Text|color|Set the background color of the buttonSuccess| |fontColor|Text|color|Set the font color of the buttonSuccess|

Please install these packages first

'react-native-vector-icons/FontAwesome'

'@react-native-picker/picker'

'react-native-localize'

'react-native-responsive-screen'