How to use react-native-calendars - 10 common examples
To help you get started, we’ve selected a few react-native-calendars examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mattermost / mattermost-mobile / app / components / autocomplete / date_suggestion / date_suggestion.js View on Github 
}).split(','),
monthNamesShort: formatMessage({
id: 'mobile.calendar.monthNamesShort',
defaultMessage: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
}).split(','),
dayNames: formatMessage({
id: 'mobile.calendar.dayNames',
defaultMessage: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
}).split(','),
dayNamesShort: formatMessage({
id: 'mobile.calendar.dayNamesShort',
defaultMessage: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat',
}).split(','),
};
LocaleConfig.defaultLocale = props.locale;
};import React from 'react';
import configureStore from '@redux/store';
import Router from '@routes';
import { ApolloProvider } from 'react-apollo';
import Apollo from '@services/apollo';
import Internet from '@components/connection/internet';
import { PersistGate } from 'redux-persist/lib/integration/react';
import AppLoading from '@components/appLoading';
import PushNotification from '@services/firebase/pushNotification';
import KeyboradView from '@components/utils/keyboardView';
import { LocaleConfig } from 'react-native-calendars';
const initialState = {};
const { persistor, store } = configureStore(initialState);
LocaleConfig.locales.sv = {
monthNames: ['januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
dayNamesShort: ['sön', 'mån', 'tis', 'ons', 'tor', 'fre', 'lör'],
today: 'i dag',
};
LocaleConfig.locales.en = {
monthNames: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
monthNamesShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
dayNames: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
dayNamesShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
today: 'Today',
};
const App = () => (setCalendarLocale = (props = this.props) => {
const {formatMessage} = this.context.intl;
LocaleConfig.locales[props.locale] = {
monthNames: formatMessage({
id: 'mobile.calendar.monthNames',
defaultMessage: 'January,February,March,April,May,June,July,August,September,October,November,December',
}).split(','),
monthNamesShort: formatMessage({
id: 'mobile.calendar.monthNamesShort',
defaultMessage: 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec',
}).split(','),
dayNames: formatMessage({
id: 'mobile.calendar.dayNames',
defaultMessage: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
}).split(','),
dayNamesShort: formatMessage({
id: 'mobile.calendar.dayNamesShort',
defaultMessage: 'Sun,Mon,Tue,Wed,Thu,Fri,Sat',
}).split(','),import AppLoading from '@components/appLoading';
import PushNotification from '@services/firebase/pushNotification';
import KeyboradView from '@components/utils/keyboardView';
import { LocaleConfig } from 'react-native-calendars';
const initialState = {};
const { persistor, store } = configureStore(initialState);
LocaleConfig.locales.sv = {
monthNames: ['januari', 'februari', 'mars', 'april', 'maj', 'juni', 'juli', 'augusti', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'mar', 'apr', 'maj', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['söndag', 'måndag', 'tisdag', 'onsdag', 'torsdag', 'fredag', 'lördag'],
dayNamesShort: ['sön', 'mån', 'tis', 'ons', 'tor', 'fre', 'lör'],
today: 'i dag',
};
LocaleConfig.locales.en = {
monthNames: 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),
monthNamesShort: 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),
dayNames: 'Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday'.split('_'),
dayNamesShort: 'Sun_Mon_Tue_Wed_Thu_Fri_Sat'.split('_'),
today: 'Today',
};
const App = () => (
}
persistor={persistor}
>'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
dayNames: ['日', '月', '火', '水', '木', '金', '土'],
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
};
LocaleConfig.defaultLocale = 'jp';
const images = [
require('../../../img/months/january.png'),
require('../../../img/months/february.png'),
require('../../../img/months/march.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/october.png'),
require('../../../img/months/november.png'),
require('../../../img/months/december.png'),
];setLocale(locale: string) {
LocaleConfig.defaultLocale = locale;
numbro.registerLanguage(Languages[locale]);
numbro.setLanguage(locale);
}
}async function loadLocal() {
const lang = await LangService.getLanguage();
if (lang) {
I18n.locale = lang;
LocaleConfig.defaultLocale = lang;
}
}setLanguage(lang = 'en') {
LocaleConfig.defaultLocale = lang;
return this.session.set(this.langKey, lang);
}import EStyleSheet from 'react-native-extended-stylesheet';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import 'dayjs/locale/ja';
import Color from 'color';
import { SelectCalendar } from '../../../lib/db/calendar';
import theme from '../../../config/theme';
import GlobalStyles from '../../../GlobalStyles';
import ImageDay from '../../organisms/Calendars/Image';
dayjs.extend(advancedFormat);
const width = Dimensions.get('window').width;
const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
LocaleConfig.locales.jp = {
monthNames: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月',
],
monthNamesShort: [
'1月',import { LocaleConfig } from 'react-native-calendars';
import { ComposableForm } from './src/ComposableForm';
import { KeyboardAvoidingScrollView } from './src/KeyboardAvoidingScrollView';
import SharedOptions from './src/options/SharedOptions';
export { ComposableForm, KeyboardAvoidingScrollView, SharedOptions };
LocaleConfig.locales['it-IT'] = {
monthNames: [
'Gennaio',
'Febbraio',
'Marzo',
'Aprile',
'Maggio',
'Giugno',
'Luglio',
'Agosto',
'Settembre',
'Ottobre',
'Novembre',
'Dicembre'
],
monthNamesShort: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
dayNames: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],react-native-calendars
React Native Calendar Components
