Skip to content

/ ionic-framework

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

feat(calendar): Adding calendar component #20332

Open
wants to merge 13 commits into
base: master
from
Open

feat(calendar): Adding calendar component #20332

wants to merge 13 commits into from
+1,056 −0

Conversation

@corysmc
Copy link

corysmc commented Jan 29, 2020 •
edited

Here's a first pass at the ion-calendar... Still has a ways to go, but wanted to get an initial code review before continuing - to fix bugs/issues that are likely present :)

  • Swipe R/L To go to next/previous month
  • Props to pass in selectedDates, disabledDates, disabledBeforeDate, disabledAfterDate, disabledDays (weekdays), availableDates
  • Remove date-fns dependency
  • Fix flash on older devices - when swiping between months, there's an awkward flash as the animation ends and the current month is re-rendered.
  • Add internationalization options - pass in month names, and weekday names
  • RTL support
  • Add a vertical scrolling calendar option
  • accessibility: hover states, focus states
  • add css variables for color, padding, etc.

Related issues

  • Ionic Components - Desktop support #15500
corysmc added 12 commits Jan 23, 2020
@corysmc
Adding ion-calendar
fe81c0b
@corysmc
Adding month / year props, multiple selected dates
6f3c289
@corysmc
Removing click event after dragging on desktop
4e3e292
@corysmc
Merge remote-tracking branch 'ionic-team/master' into ion-calendar
b5592d8
@corysmc
Using animations api to show/hide years
a0766d9
@corysmc
Fixing code styling
7d5abdc
@corysmc
Adding initial documentation
4ce7780
@corysmc
Merge remote-tracking branch 'ionic-team/master' into ion-calendar
a8fca1c
@corysmc
Center align day headers
f0f20f9
@corysmc
Adding check for undefined / null date
71308af
@corysmc
Adding additional disabled props
73dfdff
@corysmc
Merge remote-tracking branch 'ionic-team/master' into ion-calendar
Loading status checks…
250ca65 
# Conflicts:
#	core/package.json
@brandyscarney
brandyscarney reviewed Jan 29, 2020
View changes
Copy link
Member

brandyscarney left a comment

This is looking great! I'll have to dive into the CSS & Property names more later. 🙂
core/src/components/calendar/calendar.tsx Outdated Show resolved Hide resolved
core/src/components/calendar/calendar.tsx
</ion-button>
</div>
<div />
<ion-button

This comment has been minimized.

Sign in to view
@brandyscarney

brandyscarney Jan 29, 2020

Member

Can this be a native button? I can help with this. We usually don't use ion-button when building components because it pulls in all of the button CSS to this component. See ion-menu-button: https://github.com/ionic-team/ionic/blob/master/core/src/components/menu-button/menu-button.tsx#L76-L105
@corysmc
Moving decorators to one line
Loading status checks…
1392e10
@AndreasGassmann
Copy link
Contributor

AndreasGassmann commented Feb 6, 2020

Great to see someone is working on this, that will be very helpful :).

I've briefly looked at the code without testing it, but it looks like ranges are not supported, right? Is this something that is planned? I really like the kiwi.com date picker on desktop, but it also works well on mobile (although the feedback/snappiness could be better there).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandyscarney brandyscarney

Assignees
No one assigned
Labels
package: angular package: core
Projects
None yet
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
@corysmc @AndreasGassmann @brandyscarney
You can’t perform that action at this time.