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

Menonaktifkan Hari Tertentu di React Native Calendar

Silahkan mencoba, semoga bermanfaat. Bila ada pertanyaan silahkan isi kolom komentar dibawah;

Download Source Code