HomeOur TeamContact

Calendar List (Vertical)

By Omkar Lubal
Published in Calendars
June 13, 2022
1 min read
Calendar List (Vertical)

Table Of Contents

01
Introduction 📆
02
Installation
03
Example
04
Tutorial

Introduction 📆

This module includes various customizable React-Native calendar components.

The package is both Android and iOS compatible.

Installation

 npm install --save react-native-calendars

Example


import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { CalendarList } from 'react-native-calendars';

export default function App() {
  return (

    <View style={styles.container}>
  <CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
/>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Tutorial


Previous Article
Combination of Period and Simple
Next Article
Basic Swiper
Omkar Lubal

Omkar Lubal

Computer Science Aficionado

Related Posts

Jalaali Modern Date Picker
Jalaali Modern Date Picker
April 08, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media