Bagaimana cara (Disable/Enable) menonaktifkan hari tertentu di React Native Calendar. Dan hanya mengaktifkan hari yang sudah ditentukan.
Di tutorial ini saya ingin memberi contoh dalam 1 bulan saya hanya ingin mengaktifkan tanggal di hari senin, kamis, dan jumat.
TLDR; Download Link ada di paling bawah.
Secara teori bisa dijabarkan seperti ini :
- Mendapatkan hari di setiap bulannya menggunakan moment js.
- Menyimpan hari yang sudah kita dapatkan tadi ke dalam state &
- menentukan hari mana saja yang kita non aktifkan ke dalam state.
Pertama kita install dulu project serta dependency-nya :
react-native init DisEnCalendar
Install react-native-calendar menggunakan npm install atau yarn add
npm install --save react-native-calendars
Install Moment js
npm install --save moment
Source Code Calendar
import React, {Component} from 'react'; import {ScrollView, View, Text, StatusBar} from 'react-native'; import {Calendar} from 'react-native-calendars'; import moment from 'moment'; const DAYS_EN = [ 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY', ]; // MONDAY, THURSDAY, FRIDAY // SENIN, KAMIS, JUMAT const activeDays = [0, 3, 4]; class App extends Component { constructor(props) { super(props); const date = new Date(); const currentMonth = date.getMonth(); const year = date.getFullYear(); this.state = { initDays: this.getDays(currentMonth, year), markDates: this.getDays(currentMonth, year), }; this.onDayPress = this.onDayPress.bind(this); } onDayPress(day) { this.setState(prevState => ({ markDates: {...prevState.initDays, [day.dateString]: {selected: true}}, })); } // Populate days in month getDays(month, year) { let start = moment() .month(month) .year(year) .startOf('month'); const end = moment() .month(month) .year(year) .endOf('month'); let dates = {}; const disabled = {disabled: true, selected: false}; while (start.isBefore(end)) { DAYS_EN.forEach((day, i) => { if (!activeDays.includes(i)) { dates[start.day(day).format('YYYY-MM-DD')] = disabled; } }); start.add(7, 'days'); } return dates; } render() { const today = new Date(); return ( <ScrollView> <StatusBar barStyle="dark-content" /> <View> <Text style={{ textAlign: 'center', padding: 10, fontSize: 18 }} > Disable/Enable Days Calendar </Text> <Calendar minDate={today} theme={{ textSectionTitleColor: '#000000', selectedDayBackgroundColor: 'red', selectedDotColor: 'green', }} onDayPress={this.onDayPress} markedDates={this.state.markDates} onMonthChange={date => { this.setState({ initDays: this.getDays(date.month - 1, date.year), markDates: this.getDays(date.month - 1, date.year), }); }} /> </View> </ScrollView> ); } } export default App;
Hasilnya akan seperti ini
Silahkan mencoba, semoga bermanfaat. Bila ada pertanyaan silahkan isi kolom komentar dibawah;
Comments