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.

github mattermost / mattermost-mobile / app / components / autocomplete / date_suggestion / date_suggestion.js View on Github external
}).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;
    };
github Skjutsgruppen / skjutsgruppen-reactnative / app / App.js View on Github external
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 = () => (
github mattermost / mattermost-mobile / app / components / autocomplete / date_suggestion / date_suggestion.js View on Github external
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(','),
github Skjutsgruppen / skjutsgruppen-reactnative / app / App.js View on Github external
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}
    >
github wheatandcat / Peperomia / PeperomiaNative / src / components / pages / Calendars / Page.tsx View on Github external
'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'),
];
github BelkaLab / react-native-declarative-ui / src / options / SharedOptions.ts View on Github external
setLocale(locale: string) {
    LocaleConfig.defaultLocale = locale;
    numbro.registerLanguage(Languages[locale]);
    numbro.setLanguage(locale);
  }
}
github Skjutsgruppen / skjutsgruppen-reactnative / app / lang / i18n.js View on Github external
async function loadLocal() {
  const lang = await LangService.getLanguage();
  if (lang) {
    I18n.locale = lang;
    LocaleConfig.defaultLocale = lang;
  }
}
github Skjutsgruppen / skjutsgruppen-reactnative / app / services / lang / lang.js View on Github external
setLanguage(lang = 'en') {
    LocaleConfig.defaultLocale = lang;
    return this.session.set(this.langKey, lang);
  }
github wheatandcat / Peperomia / PeperomiaNative / src / components / pages / Calendars / Page.tsx View on Github external
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月',
github BelkaLab / react-native-declarative-ui / index.js View on Github external
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

MIT
Latest version published 4 days ago

Package Health Score

92 / 100
Full package analysis

Similar packages