Styling Individual Dates With React Native, Don't Use Marked Dates

Styling Individual Dates With React Native, Don't Use Marked Dates

If you're looking to style individual dates in your React Native app, you may have come across the option to use "marked dates" in your calendar component. However, there's a better way to achieve this using custom styles.

The Problem with Marked Dates

Marked dates can be useful if you want to highlight a group of dates with a certain style. However, if you want to style individual dates with unique styles, marked dates can become cumbersome and difficult to manage.

For example, let's say you want to style the 5th of every month with a blue background and white text, and the 15th of every month with a red background and black text. With marked dates, you would have to create two separate arrays of dates and styles, which can become messy and hard to read.

The Solution: Custom Styles

Instead of using marked dates, you can create custom styles for each individual date in your calendar component. Here's how:

1. Create an array of objects, where each object represents a date and its corresponding style. For example:

const dateStyles = [
  { date: '2022-09-05', style: { backgroundColor: 'blue', color: 'white' } },
  { date: '2022-09-15', style: { backgroundColor: 'red', color: 'black' } }
]
  

1. In your calendar component, use the dayComponent prop to render each day with its custom style. Here's an example:

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

const CustomDay = ({ date, state }) => {
  const customStyle = dateStyles.find((item) => item.date === date.dateString)?.style;
  
  return (
    
      {date.day}
    
  );
};

const CustomCalendar = () => {
  return (
    
  );
};

export default CustomCalendar;
  

In the CustomDay component, we first find the corresponding style object for the current date using the find method on the dateStyles array. We then apply any custom styles to the day's container view using the spread operator.

We also add a check for the state prop, which tells us whether the day is disabled (e.g. if it falls outside of the calendar's range). If the day is disabled, we add an opacity of 0.2 to the container view to indicate that it cannot be selected.

Finally, we render the day's number in a centered Text component with a white color.

Conclusion

Using custom styles to style individual dates in your React Native app can be much easier and more flexible than using marked dates. By creating an array of objects with date and style properties, and rendering each day with its custom style using the dayComponent prop, you can achieve a calendar that is both beautiful and easy to manage.