Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Date Number Style and Day Number Style not working.

See original GitHub issue

Both the Day and Date Number styles seem to be not working and I cannot figure out why.

I am trying to make the style responsive to a dark/light background. But the text color is black whether the background is black or white.

I have checked on text_color below via the console to make sure it isn’t a tinycolor issue. And used a direct string value for color: {color: 'red'} - neither are working.

Here’s my component:

import React, {Component} from 'react';
import { View } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
import {AppContext} from './ContextProvider';
import tinycolor from 'tinycolor2';

class CalStrip extends Component {
  render() {
    const {header_color} = this.props;
    var color1 = tinycolor(header_color);
    var text_color = color1.isDark() ? '#fff' : '#000';

    return (
          {(context) =>
              calendarAnimation={{type: 'sequence', duration: 10}}
              daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: text_color}}
              style={{height: 100, paddingTop: 20, paddingBottom: 10}}
              calendarHeaderStyle={{color: text_color}}
              dateNumberStyle={{color: text_color}} // Not working XXX
              dateNameStyle={{color: text_color}} // Not working XXX
              highlightDateNumberStyle={{color: text_color}}
              highlightDateNameStyle={{color: text_color}}
              disabledDateNameStyle={{color: 'grey'}}
              disabledDateNumberStyle={{color: 'grey'}}
              iconContainer={{flex: 0.1}}
              onDateSelected={(value) => context.setDate(value)}

export default CalStrip;

And this is what the output looks like: cal_strip_screenshot

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10

github_iconTop GitHub Comments

peacechencommented, Nov 15, 2018

1.3.5 has been published. Apologies for the delay

peacechencommented, Aug 7, 2020

A new prop needs to be added to set the container’s style. Please open a new issue, or submit a PR that adds a highlightDateContainerStyle.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Format numbers as dates or times - Microsoft Support
In the Category box, click Date or Time, and then choose the number format that is closest in style to the one you...
Read more >
How to Fix Excel Dates That Won't Change Format - Contextures
How to fix Excel dates that will not change format. Fix dates that end up in the wrong order when sorted. Use built-in...
Read more >
6 Ways to Fix Dates Formatted as Text in Excel
6 ways to fix dates formatted ast text in Excel, plus a bonus technique using Power Query to fix various formats.
Read more >
Excel date formatting NOT working? Dates not sorting in Excel?
If you are having date format or sort issues in Excel ( dates sort by months instead of day of month, you can't...
Read more >
Excel Date Format Won't Change - YouTube
... file: date - format -wont-change-i-cant-change-excel- date - format /In this video I explore a problem.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found