Adding grid on react-native-calendars

Question

I am using the react-native-calendars library in my app with a custom day component. Last thing to add is grid, I've tried to add a a border but the appearance is not ok: there's still a space between horizontal borders and the vertical borders overlap an appear thicker. Here is the code:

// calendar screen
      <View>
        <CalendarList
          onVisibleMonthsChange={months => {
            // console.log('now these months are visible', months);
          }}
          firstDay={1}
          pastScrollRange={0}
          futureScrollRange={50}
          scrollEnabled
          showScrollIndicator={false}
          markedDates={markedDates}
          theme={{
            'stylesheet.calendar.main': {
              monthView: {
                backgroundColor: colors.grey30,
              },
              week: {
                flexDirection: 'row',
                justifyContent: 'space-around',
                backgroundColor: '#fff',
                // margin: 1,

                // borderBottomWidth: 1,
                // borderBottomColor: colors.grey30,
              },
            },

            'stylesheet.calendar.header': {
              header: {
                borderWidth: 0,
                paddingTop: 10,
                marginLeft: 10,
                ...globalStyles.regular,
              },
              monthText: {
                alignSelf: 'stretch',
                textAlign: 'left',
              },
              week: {
                marginTop: 7,
                flexDirection: 'row',
                justifyContent: 'space-around',
              },
            },
            textDayFontFamily: 'source-sans-pro-bold',
            textMonthFontFamily: 'source-sans-pro',
            textDayHeaderFontFamily: 'source-sans-pro-light',
            textDayFontSize: 14,
            // textMonthFontSize: 16,
            // textDayHeaderFontSize: 16
          }}
          dayComponent={({ date, state }) => {
            const dayMissions = missionsByDay ? missionsByDay[`${date.dateString}`] : null;
            const isNextMissionDay =
              missions && missions.length && missions[0].dateString === date.dateString;

            return (
              <DayComponent
                onPress={() => this.onDayPress(dayMissions, date.dateString)}
                isToday={isDateToday(date.dateString)}
                missions={dayMissions}
                date={date}
                state={state}
                isNextMissionDay={isNextMissionDay}
              />
            );
          }}
        />
      </View>

// DayComponent

    <TouchableOpacity
      onPress={onPress}
      style={{
        height: dayWidth,
        width: dayWidth,
        justifyContent: 'center',
        alignItems: 'center',
        // borderWidth: 1, //isToday ? 1 : 0,
      }}>
      {missions && missions.length > 1 && (
        <Text
          style={{
            position: 'absolute',
            right: 2,
            top: 2,
            width: 14,
            height: 14,
            borderRadius: 7,
            backgroundColor: '#000',
            color: '#fff',
            fontSize: 10,
            textAlign: 'center',
            textAlignVertical: 'center',
            overflow: 'hidden',
          }}>
          {missions.length}
        </Text>
      )}
      {missions && missions.length > 0 && (
        <BalaiIcon
          tintColor={isNextMissionDay ? colors.orange : colors.black}
          width="26"
          height="26"
        />
      )}
      {!missions && (
        <Text
          style={{
            textAlign: 'center',
            color: state === 'disabled' ? 'gray' : 'black',
          }}>
          {date.day}
        </Text>
      )}
    </TouchableOpacity>

Here is the result i am getting

How can I have the result below (only the grid) ?

Answer 1

You can afford that modifying the theme property inside the Calendar component with the following code:

theme={{
        'stylesheet.calendar.main': {
          dayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          emptyDayContainer: {
            borderColor: '#D1D3D4',
            borderWidth: 1,
            flex:1,
            padding:10
          },
          week: {
            marginTop: 0,
            marginBottom: 0,
            flexDirection: 'row',
            justifyContent: 'space-around'
          },
        }
      }}

The idea is to modify the preexistent styling of the components inside the calendar. You will have to find the specific ID for the component that you want to modify, but if something crashes you will not be supported on that, do it under your own risk.

You could find all components/styles on the repository. In my case just to show you an example I'm modifying these at the Calendar component:

https://github.com/wix/react-native-calendars/blob/master/src/calendar/style.js (id='stylesheet.calendar.main')

And there are another customized things(like header styling, where days are displayed in black and full-length) but it looks like that:

Customized grid: