react native calendars how to mark selected day with code examples 2

React Native is a popular framework for building mobile applications using JavaScript and React. One of the features that is commonly used in mobile apps is a calendar. In this article, we will show you how to mark a selected day on a calendar in React Native, with code examples.

First, let's set up a basic calendar using the popular "react-native-calendars" library. To install the library, you can use the following command:

npm install react-native-calendars --save

Once the library is installed, you can import it into your project and use it in your component like this:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-calendars';

class MyCalendar extends Component {
  render() {
    return (
      <View>
        <Calendar
          // other calendar props
        />
      </View>
    );
  }
}

export default MyCalendar;

To mark a selected day on the calendar, you can use the "markedDates" prop. This prop allows you to specify an object that contains the dates you want to mark, and the style you want to use for those dates.

Here's an example of how you can use the "markedDates" prop to mark the current day:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-calendars';

class MyCalendar extends Component {
  state = {
    markedDates: {}
  }

  componentDidMount() {
    // get the current date
    const currentDate = new Date();
    const formattedDate = currentDate.toISOString().split('T')[0];

    // update the state with the current date
    this.setState({
      markedDates: {
        [formattedDate]: { selected: true }
      }
    });
  }

  render() {
    return (
      <View>
        <Calendar
          markedDates={this.state.markedDates}
          // other calendar props
        />
      </View>
    );
  }
}

export default MyCalendar;

In this example, we are using the "componentDidMount" lifecycle method to get the current date, format it in the ISO format, and update the "markedDates" state with the current date. We also added a style { selected: true } to the current date.

You can also mark multiple dates by passing an object to markedDates prop like

markedDates={{
    '2022-01-01': {selected: true, selectedColor: 'blue'},
    '2022-01-02': {selected: true, selectedColor: 'green'},
    '2022-01-03': {selected: true, selectedColor: 'red'},
    '2022-01-04': {selected: true, selectedColor: 'purple'},
    '2022-01-05': {selected: true, selectedColor: 'orange'}
  }}

In this way, you can mark multiple dates and can also change the color of selected date using selectedColor property.
In addition to marking selected days on a calendar, the "react-native-calendars" library also provides other useful features such as disabling certain days, customizing the appearance of the calendar, and handling events.

One way to disable certain days on the calendar is by using the "disableAllTouchEventsForDisabledDays" and "disabledDates" props. The "disableAllTouchEventsForDisabledDays" prop allows you to prevent users from interacting with disabled days, while the "disabledDates" prop allows you to specify an array of dates that should be disabled.

Here's an example of how you can use these props to disable weekends:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-calendars';

class MyCalendar extends Component {
  state = {
    disabledDates: []
  }

  componentDidMount() {
    // get the current month
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth();

    // get the number of days in the current month
    const daysInMonth = new Date(currentDate.getFullYear(), currentMonth + 1, 0).getDate();

    // generate an array of dates to disable
    const disabledDates = [];
    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(currentDate.getFullYear(), currentMonth, i);
      if (date.getDay() === 0 || date.getDay() === 6) {
        disabledDates.push(date.toISOString().split('T')[0]);
      }
    }

    // update the state with the disabled dates
    this.setState({ disabledDates });
  }

  render() {
    return (
      <View>
        <Calendar
          disableAllTouchEventsForDisabledDays={true}
          disabledDates={this.state.disabledDates}
          // other calendar props
        />
      </View>
    );
  }
}

export default MyCalendar;

In this example, we are using the "componentDidMount" lifecycle method to get the current month, and then generating an array of dates that correspond to weekends. We then update the state with these dates, and use the "disabledDates" prop to disable them on the calendar.

Another useful feature of the "react-native-calendars" library is the ability to customize the appearance of the calendar. This can be done by using the "theme" prop, which allows you to specify an object that contains various styling options for the calendar.

Here's an example of how you can use the "theme" prop to change the background color of the calendar:

import React, { Component } from 'react';
import { View } from 'react-native';
import { Calendar } from 'react-native-calendars';

class MyCalendar extends Component {
  render() {
    return (
      <View>
        <Calendar
          theme={{
            backgroundColor: 'pink',
          }}
          // other calendar props
        />
      </View>
    );
  }
}

export default MyCalendar;

In this example, we are using the "theme" prop to change the background color of the calendar to pink

Popular questions

  1. What library can be used to create a calendar in React Native?
    Answer: The "react-native-calendars" library can be used to create a calendar in React Native.

  2. How can you mark a selected day on a calendar in React Native?
    Answer: The "markedDates" prop can be used to mark a selected day on a calendar in React Native. This prop allows you to specify an object that contains the dates you want to mark, and the style you want to use for those dates.

  3. How can you prevent users from interacting with disabled days on a calendar in React Native?
    Answer: The "disableAllTouchEventsForDisabledDays" prop can be used to prevent users from interacting with disabled days on a calendar in React Native.

  4. How can you customize the appearance of a calendar in React Native?
    Answer: The "theme" prop can be used to customize the appearance of a calendar in React Native. This prop allows you to specify an object that contains various styling options for the calendar.

  5. How can you disable specific dates on a calendar in React Native?
    Answer: The "disabledDates" prop can be used to disable specific dates on a calendar in React Native. This prop allows you to specify an array of dates that should be disabled.

Tag

Calendars.

Have an amazing zeal to explore, try and learn everything that comes in way. Plan to do something big one day! TECHNICAL skills Languages - Core Java, spring, spring boot, jsf, javascript, jquery Platforms - Windows XP/7/8 , Netbeams , Xilinx's simulator Other - Basic’s of PCB wizard
Posts created 1713

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top