Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: add marked dates #121

Merged
merged 9 commits into from
Dec 28, 2018

Conversation

hellpirat
Copy link
Contributor

Add feature for adding marked dates.

Usage example:

markedDates={{
   '2018-12-03': { dots: [ { key: 1, color: 'red', selectedDotColor: 'blue' }, { key: 2, color: 'blue', selectedDotColor: 'red' } ] },
   '2018-12-04': { dots: [ { key: 3, color: 'green', selectedDotColor: 'blue' }, { key: 4, color: 'blue', selectedDotColor: 'red' } ] },
   '2018-12-05': { dots: [ { key: 5, color: 'white', selectedDotColor: 'blue' }, { key: 6, color: 'blue', selectedDotColor: 'red' } ] },
 }}

@peacechen
Copy link
Collaborator

Thanks @hellpirat for this handy feature. Some suggestions:

  1. Add a screenshot. You can place one in this thread, then use the image link in the documentation.
  2. For consistency with the rest of the library, markedDates should support any Moment paseable date value (string, Date or Moment object).
  3. Change markedDates to an array of objects. Each entry would contain a date key along with the dots key, enabling support for #2 above.
  4. Update getDateMarking to search the array for a matching date. Parse and compare the date with Moment (e.g. moment(date).isSame(day, 'day')
  5. Set the default prop value for markedDates to an empty array. This reduces the error-checking code needed.

@hellpirat
Copy link
Contributor Author

@peacechen Hi, I updated a code :) Please check it.

Usage example:

markedDates={[
  {
    date: '2018-12-26',
    dots: [
      { key: 1, color: 'red', selectedDotColor: 'blue' },
      { key: 2, color: 'blue', selectedDotColor: 'red' },
    ],
  },
  {
    date: '2018-12-28',
    dots: [
      { key: 1, color: 'red', selectedDotColor: 'blue' },
      { key: 2, color: 'blue', selectedDotColor: 'red' },
    ],
  },
  {
    date: moment(),
    dots: [
      { key: 1, color: 'red', selectedDotColor: 'blue' },
      { key: 2, color: 'blue', selectedDotColor: 'red' },
    ],
  },
]}

@peacechen
Copy link
Collaborator

peacechen commented Dec 28, 2018

Thanks @hellpirat
This looks great. I'll review some more and merge.

Update: Would you post a screenshot sample in this thread?

@hellpirat
Copy link
Contributor Author

@peacechen

image

@peacechen peacechen merged commit 012f9d0 into BugiDev:master Dec 28, 2018
@peacechen
Copy link
Collaborator

peacechen commented Dec 28, 2018

@hellpirat Commits merged. I'll publish on npm shortly.

The marked / unmarked dates don't center vertically. It looks like you may need to add a blank spacer for dates that are unmarked, but only if the markedDates prop is provided. Would you like me to wait for you to fix that, or go ahead and publish?

hellpirat added a commit to hellpirat/react-native-calendar-strip that referenced this pull request Dec 29, 2018
@hellpirat
Copy link
Contributor Author

@peacechen #123 I fixed and created a new pull request because of the previous merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants