cibernox / ember-power-calendar

Powerful and customizable calendar component for Ember

Ember Power Calendar

Customizable Calendar Component for Ember.

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above

Installation

ember install ember-power-calendar

Usage

There are many possible ways to use it, for giving you just a taste of the API:

<PowerCalendar @selected={{this.arrival}} @onSelect={{this.onChange}} as |calendar|>
  <calendar.Nav/>
  <calendar.Days/>
</PowerCalendar>

Check the full documentation at www.ember-power-calendar.com

ember-power-calendar's Issues

"showDaysAround" not implemented in power-calendar-multiple

As defined in http://ember-power-calendar.com/docs/the-days, showDaysAround=false should hide the days that aren't in current month.

The flag does not work in the power-calendar-multiple component.

Events support?

The docs obliquely mention events a couple of times but it's not clear to me how to use that feature. I suspect it is not yet implemented.

1. Is that correct?
2. Do you have a timeline for implementing them?
3. Do you have a preferred approach in mind?
4. Do you have any suggestions for a reasonable approach for hilighting days on which there are events with the current release?

Thanks!

Select year and month from dropdown

Another feature I miss from Pikaday is selecting year and month from a dropdown. This is a much faster way if the year to select is, say, 1950.

Incorrect firstDay calculation in some locales

1. In the Ember application's initialization phase, globally change the imported Moment library's locale to a locale where the first day of the week is Monday (e.g. fr). Note, this is not the service:moment library, rather whatever comes in with import moment from 'moment';
2. Pass into the power-calendar component a center attribute with the value 2016-11-01, and a locale attribute with same value from step 1 (e.g. fr).
3. View the calendar in a browser.

Observed

November 1st is a Monday.

Expected

November 1st is a Tuesday.

Remove moment dependency

Hi @cibernox! Would you consider removing moment dependency? Many people are using alternatives like date-fns or others.

I believe a good plugin shouldn't force you (if possible) too use big dependencies like that one. I really like your work with ember-power plugin family but this is kind of a deal breaker for my projects.

Keyboard selection focus problem with ranges

When using the arrow keys to make a selection with power-calendar-range, focus is lost upon picking the start date (document.activeElement becomes body). If you manage to get the focus back to pick an end date, it stays (as it should) until the next start date selection (at which point the problem repeats itself).

Ability to send dates and all others are disabled

Is there any way currently to send a list of dates and have all others disabled?

ion

Restrict selection and navigation

hi
Is there a way to restrict users such that they will not be able to selected older dates than the current day and also prevent them from navigating to previous months and also prevent navigating programatically to prev months using center?

Proposal: Remove 'focusedId' from computed 'days' as dependency

Hey, thanks for amazing work first of all.

I'm building an add-on for highlighting the current selection before user actually selecting it.

And stumbled upon re-computing days properties on each click, which actually happens with onFocusDay and onBlurDay events. From my opinion this looks inefficient and un-intuitive.

Would you be interested to just to update isFocused property for the corresponding day instead of re-computing days property? I can do PR.

e.g.

  _updateFocused(id, isFocused = true) {
    const day = this.get('days').findBy('id', id);
    day.set('isFocused', isFocused);
    this.set('focusedId', isFocused ? id : null);
  },

UPD: buildDay should return an Ember.Object at this case.

Next and Previous button navigates from current date.

Hi,

I have a date picker with preselected value (ex:05/08/1988). When I click the left arrow(Previous button) to change the date to 30/01/1982, the calendar shows the previous month from current month(June 2017). similar for 'Next' arrow as well.

Is this known behaviour or issue with my implementation? any help much appreciated.

thanks in advance.

Potentially remove ember-moment dependency

In doing a quick audit of our dependencies, I see that ember-power-calendar has ember-moment listed as a dependency. This adds about 21k to the minified vendor build. When I went through the source, it looks like it's mostly a test dependency, with one exception:

ember-power-calendar/addon/templates/components/power-calendar/nav.hbs

Line 9 in 49eff72

{{moment-format calendar.center 'MMMM YYYY' locale=calendar.locale}}

Would you be open to a PR removing ember-moment as a dependency and moving it to a devDependency for tests only?

Address Moment deprecation

@cibernox Can we address the below issue in calender?
The input might not always be

moment("2014-04-25T01:32:21.196Z"); // iso string, utc timezone
moment("2014-04-25T01:32:21.196+0600"); // iso string with timezone
moment("2014 04 25", "YYYY MM DD"); // string with format

Moment Issue

moment.min.js:6 Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
Error
    at Function.createFromInputFallback (http://localhost:4200/assets/vendor.js:137353:7002)
    at da (http://localhost:4200/assets/vendor.js:137353:7484)
    at Ba (http://localhost:4200/assets/vendor.js:137353:11268)
    at Aa (http://localhost:4200/assets/vendor.js:137353:11165)
    at za (http://localhost:4200/assets/vendor.js:137353:10886)
    at Ca (http://localhost:4200/assets/vendor.js:137353:11581)
    at Da (http://localhost:4200/assets/vendor.js:137353:11615)
    at n.hb [as isSame] (http://localhost:4200/assets/vendor.js:137353:16244)
    at Class.dayIsSelected (http://localhost:4200/assets/vendor.js:183539:44)
    at Class.buildDay (http://localhost:4200/assets/vendor.js:183530:26)

Since we cant always know the format I do the below:

getMomentFromUnknownFormat(date, toFormat) {
    let momentDate = moment(new Date(date).toLocaleDateString(), 'MM/DD/YYYY');
    return toFormat ? momentDate.format(toFormat) :momentDate ;
 }

This even happens when we display the date in a particular format inside the trigger textbox and we click on the trigger again, looks like the date is being read from the textbox value apart from selected property

What do you think?
Also is there a way the calendar can return dates in a particular format such as MMM DD YYYY, as of now the docs are not updated so am not sure.

Website is broken

When I visit ember-power-calendar.com, there is no website, just an error page that says "You have reached a domain that is pending ICANN verification" and gives various instructions.

Potentially missing Pikaday functionality

Just browsed through ember-pikaday and Pikaday, some things I suspect that are missing are:

• minDate, maxDate
• i18n?
• acceptance test helpers? i.e. selectDate

Let me know, I'd be happy to contribute too.

IE11 support

Any intention to support IE11 styling? I believe I have most of the apparent problems figured out and could submit a PR, if desired.

Observed

Expected

new version of ember-cli-moment-shim breaks it.

Looks like the new version of ember-cli-moment-shim is breaking it. Error is broccoli-persistent-filter:Mapper: Expected Broccoli node, got undefined for inputNodes[0]

power-calendar-range.days renders weekDayAbbrs-markup

edit I realized that the range component is meant to render markup please see my comment below for my actual feature request

First of all thanks for this great addon. I just realized that the power-calendar-range.days-component renders markup that displays weekday name-abbreviations. At least for me that was unexpected behaviour because I assume this component is meant to be a functional component that doesn't render any markup.

This of course happens because of this part of the power-calendar/days.hbs-template.

While debugging this I also realized that there was a power-calendar-range/days.hbs-template in the project that never gets used because the power-calendar-range/days-component uses the same layout as power-calendar/days.

I'm not sure how to solve this in a way that aligns best with your vision of the project. Imo the easiest approach would be to really use the power-calendar-range/days-template and just yield the parts of the calendar that we assume users expect when using the range component. This means of course that we could basically reverse the inheritance chain in the plugin and make power-calendar-range/days the base class of the calendar responsible for calculating the relevant date information.

the power-calendar/days-component would be a presentational component then that actually outputs markup.

Do you think that's a good idea? I'd be happy to submit a pull-request for that.

👋🍻

week/month views

First, thanks again for another superb addon! Date pickers are always a struggle and with that, very excited to give this a shot!

All that said, given that this seems to be a base calendar component to be expanded upon, what's the effort level to build out a full-on calendar with month and week views? There's currently ember-calendar, which attempts to tackle the full-blown Calendar using pure-Ember, but not actively maintained.

Not asking you to tackle this -- but just curious on what the current public API will allow for 😄

Cheers.

Wrong date is activating when clicked

http://www.ember-power-calendar.com/docs/multiple-selection

On the calendar with the absurd prime date example, if you click on the 27th, the 29th will be activated.

I've confirmed in Safari and Chrome.

Request: Constant Calendar Height

When using the nav to cycle through months, the height of the calendar changes depending on how long or short the month is — this can be seen using the nav demo and looking at the months of July and August, which I've pasted below for posterity:

When used in ember-power-datepicker, and the widget is above the trigger, this means the navigation buttons jump up and down as you cycle through months causing mis-clicks and frustration.

I'd like to request that a flag, or feature, be implemented such that the calendar's height never changes. Other date pickers, such as pickadate implement this by having a constant number of weeks displayed (i.e. 6).

Is it possible to start with a particular week instead of centering on one month?

Is it possible to have the calendar start with a particular week instead of centering on a particular month? Imagine it is the last week of the month and what we are really interested in showing are future events. Thanks.

Allow calendar colors to be styled from ember-power-calendar mixin

Currently to change the color of the selected day users have to manually override the ember-power-calendar-day--selected styles, which is inconvenient to say the least.

Error: Assertion Failed: A helper named "format-date" could not be found

I'm getting this error: Error: Assertion Failed: A helper named "format-date" could not be found

After upgrading ember-power-calendar recently.

and using: {{power-calendar-range}}

{{power-calendar}} on the other hand works fine.

DNS - ember-power-calendar.com

Looks like the naked top-level domain needs to be set up for ember-power-calendar.com

dig ember-power-calendar.com

; <<>> DiG 9.8.3-P1 <<>> ember-power-calendar.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 30034
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 1, ADDITIONAL: 0

;; QUESTION SECTION:
;ember-power-calendar.com.	IN	A

;; AUTHORITY SECTION:
ember-power-calendar.com. 3543	IN	SOA	lorna.ns.cloudflare.com. dns.cloudflare.com. 2022923245 10000 2400 604800 3600

dig www.ember-power-calendar.com

; <<>> DiG 9.8.3-P1 <<>> www.ember-power-calendar.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 33497
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;www.ember-power-calendar.com.	IN	A

;; ANSWER SECTION:
www.ember-power-calendar.com. 243 IN	A	104.28.12.37
www.ember-power-calendar.com. 243 IN	A	104.28.13.37

Unselect day?

Hi, great addon. Is there a way to unselect a day if you click the same day? I'd like to return it to empty/nil.

weekday --> isoWeekday

Hi,
Thanks for this awesome addon.
I have one issue though. You are using moment().weekday instead of moment().isoWeekday() and that gives problems. Could you please change that to the iso version?

Thanks in advance.

Add Time Selection

I dont know if you want to add this feature. (or maybe it is better as an addon) but I think having the ability to select a time as well as a date would really nice. this might not be the best UX but here is an example of a datetime picker: https://eonasdan.github.io/bootstrap-datetimepicker/

CCS breaks the layout in Safari

Please note that the numbers are not centred within their respective cells in Safari 10.0.3.

I believe it is caused by the unnecessary (in my opinion) display: flex inside .ember-power-calendar-day { which is located here https://github.com/cibernox/ember-power-calendar/blob/master/app/styles/ember-power-calendar.scss#L55

Can't change center without an 'onCenterChange' input

Hey, I was just working with this example and basically I ran into a really arcane error message when trying to get the center to change.

I was using this code

{{#power-calendar
        selected=previousDates
        center=center
        onSelect=(action 'on-select' value="moment") 
        as |calendar|}}
      <nav local-class='calendar-nav'>
        <button local-class='month-select' 
          disabled={{gte (moment-diff calendar.currentCenter startDate precision='months') 1}}
          onclick={{action calendar.actions.moveCenter -1 'month'}}>
            <
        </button>
        <div class="ember-power-calendar-nav-title">
          {{moment-format calendar.center 'MMMM YYYY'}}
        </div>
        <button onclick={{action calendar.actions.moveCenter 1 'month'}}>></button>
      </nav>
      {{/power-calendar}}

It has other problems, but one of the harder things to catch was that you can't call moveCenter if you don't have an onCenterChange function. This is mostly due to the lack of asserts and the generator that it's in. For example, Ember's queue flusher actually had an issue which was hiding the real error from coming out, which was just this.get(...) is not a function.

After a couple breakpoints I found it. Let me know if you want a PR to add an assert to the calendar change action.

firefox moment issue.

firefox is freezing when hitting this method if you pass a moment.js date object to the addon.

    lastDay: function lastDay(calendar) {
      var localeStartOfWeek = this.get('localeStartOfWeek');
      var lastDay = calendar.center.clone().endOf('month');
      var localeEndOfWeek = (localeStartOfWeek + 6) % 7;
      while (lastDay.isoWeekday() % 7 !== localeEndOfWeek) {
        lastDay.add(1, 'day');
      }
      return lastDay;
    },

Why are you destroying moment.tz?

In my ember app moment.tz is undefined after installing ember-power-calendar. Why?

Release 0.5.1 not published on npm?

Is release 0.5.1 not published on npm? Should it be?

Does it work without "Moment.js" ?

I've read through the documentation, but what I've found is only that Moment.js is supported, not that it's a requirement. Is that correct or do I need Moment.js to use these components?

Feature: Selected as array of arrays.

In my organization we use this plugin to mark existing dates in a calendar. Currently we need to display multiple types of dates. All we need is to add different class next to ember-power-calendar-day-selected Maybe ...-selected-{index}. Like this:

selected: [
  ['2017-03-11', '2017-03-12'],
  ['2017-03-15'] 
]

That would generate classes like ember-power-calendar-day-selected ember-power-calendar-day-selected-0 for dates in array at index 0 and ...-selected-1 for dates in array at index 1. For same dates in both array, it would apply both classes and then its on user to handle it.

I could work on PR for this, just wanted to get some feedback from you first. If you prefere some other approach or not implementing this at all.

---

Sure also solution where selected is array of hashes would be great, but I don't wanna complicate things too much.

😡 One is not prime 😡

😡 One is not prime 😡

Import conflict when using in a project along-side ember-auto-import

Hi, when using this addon in a project which also uses "ember-auto-import" the moment import in the addon seems to trigger ember-auto-import instead of ember-cli-moment-shim

ember-auto-import:splitter bundleForPath("ember-power-calendar-utils/index.js")=app +0ms
ember-auto-import:splitter output {
"app": {
  "static": [
    {
      "specifier": "moment",
      "entrypoint": "/myproj/node_modules/moment/moment.js",
      "importedBy": [
        {
          "package": "ember-power-calendar-moment",
          "path": "ember-power-calendar-utils/index.js",
          "isDynamic": false
        }
      ]
    },

this way I end up with moment imported twice into my vendor.js
I tried using the exclusefrom ember-auto-import without success. Not sure if the problem is ehre or with https://github.com/ef4/ember-auto-import

single day 'ranges' dont get both start and end classes

when you have a power-calendar-range component with the range start and end on the same day, that element only gets a ember-power-calendar-day--range-start class and not any specific class that denotes it as the range-end

`power-calendar-multiple` creates duplicate entries when clicking single selection

This can be seen pretty clearly when interacting with the final multiple-selection example:

I'd expect it to either uncheck the selection or (if a date must be selected) not add a duplicate in this case.

Request: make it possible to render a given/multiple months

I've implemented a datepicker based on ember-power-calendar which has UX optimisations for mobile. I've been thinking about adding swipable months/pages in there. In order to do that I would need to be able to render the previous and next month next to the selected month. I haven't really investigated in the changes that would be necessary yet, but quickly looking at the components it would just involve changes in the days component where a date or "offset" from the current date can optionally be set.

Would you accept a PR for such a feature?

Single row of days or one week

Hi,

Could you recommend a way to build the calander to only show a single week? I can't figure out if that should be done using the date object or if that is something that should be accomplished with days.weeks

Thanks,

Martien

Super nice work, well done! EOM

Style sheet not applied, Mime type mismatch

Hi,

I am trying to integrate the calendar into my application.hbs file.
The steps taken:

1. Install the ember-power-calendar using the command: ember install ember-power-calendar
2. Include the @import "ember-power-calendar"; in app.scss file
3. Include the code to dispaly calendar in application.hbs file
   {{#power-calendar center=wedding as |calendar|}} {{calendar.nav}} {{calendar.days}} {{/power-calendar}}

The calendar is being shown on the page but with out any style applied.
The error I am getting on the console is:

Refused to apply style from 'http://localhost:4200/assets/calendar-test.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Can anybody please help me understand where I am going wrong. Being new to Ember am unable to pin point the issue.

Thanks

Add REST parameters in memory.locale redifinition

It would be great if you add moment(...locale) in withLocale helper

See moment.locale documentation

Add ability to set `center` on `{{power-calendar/days}}`

It would be great to be able to set the center property on the days component in order to display another month before / after the calendar's center. My use case involves displaying two months, similar to AirBnB's datepicker:

By making this change, I would be able to do something like:

{{#power-calendar}}
  <h3>January</h3>
  {{calendar.days}}

  <h3>February</h3>
  {{calendar.days center=nextMonth}}
{{/power-calendar}}

Problem while building months-component

Hello @cibernox ,

I'm building a months-component, because I need a date-picker, where user can select months:

but I encountered a weird issue, I cannot solve so far. You solved it at days-component, but I cannot figure out why. The issue is, that if user clicks a not-focused-month, the focus event is fired and the month get focused. However the click event is not fired. So month is focused, but not selected.

If user clicks an already focused month, onfocus and onclick event are fired and month is selected properly

I'm very confused, because the days-implementation is more or less the same and there it works. Furthermore I have problems with onkeydown-event, which get not fired at all, if there's a onfocus-event is used.

<div class="ember-power-calendar-month-grid" >
  {{#each thirds as |third|}}
    <div class="ember-power-calendar-row ember-power-calendar-third">
      {{#each third.months as |month|}}
        <button type="button"
          data-month="{{month.id}}"
          class="ember-power-calendar-month {{if onSelect 'ember-power-calendar-month--interactive'}} {{if month.isSelected "ember-power-calendar-month--selected"}} {{if month.isFocused 'ember-power-calendar-month--focused'}}"
          onclick={{action calendar.actions.select month calendar}}
          onfocus={{action "onFocusMonth" month}}
          onblur={{action "onBlurMonth"}}
          disabled={{month.isDisabled}}>
          {{#if hasBlock}}
            {{yield day publicAPI}}
          {{else}}
            {{month.name}}
          {{/if}}
        </button>
      {{/each}}
    </div>
  {{/each}}
</div>

  actions: {
    onFocusMonth(month, e) {
      scheduleOnce('actions', this, this._updateFocused, month.id);
    },

    onBlurMonth() {
      scheduleOnce('actions', this, this._updateFocused, null);
    }
  },

  _updateFocused(id) {
    this.set('focusedId', id);
  },

Thank you

Display nav and days if hasBlock is false

Having good defaults is one of the core messages of ember power components. As we've been using power calendar in our own app, I've noticed that a lot of the time, my usage looks something like this:

{{#power-calendar as |calendar|}}
  {{calendar.nav}}
  {{calendar.days}}
{{/power-calendar}}

I think that it might be a good idea to make

{{power-calendar}}

shorthand for the above. I can do a PR this afternoon if this is something you're interested in?

eps 1.4.2 appears to break epc positioning

I recently upgraded from ember-power-calendar 0.1.8 to 0.2.0 and ember-power-select 1.4.0 to 1.4.2 and the positioning of the calendar is no longer bound to the input from where it originates. Instead, it shows up in the upper-left of my screen.

I'll try and get a twiddle up soon, but wanted to post the issue before I forget :)

Importing test helpers to an acceptance test makes them inoperative

Hey, I tried out the results of #96 in a project and found that when I imported the helpers with import { calendarCenter, calendarSelect } from 'ember-power-calendar/test-support';, they actually didn’t do anything when executed.

I made a repository to demonstrate this, though it’s somewhat less clear than I’d wish because I also had to ember install ember-native-dom-helpers because the tests failed without that. This wasn’t a problem in the project I’m actually adding Ember Power Calendar to, since it uses Ember Paper which already has that as a dependency. So that seems like an unrelated problem and I could open another issue for it, if you prefer. (Actually maybe I’ll open a PR because I might know how to fix it.)

But you can see after I added the dependency, the test with the classic registerPowerCalendarHelpers() technique passed. When I changed to use the new import technique, the test failed.

I didn’t try it in an integration test, but I suspect it works as there’s a test for it!

I’m fine using the old approach but it might be confusing to have a non-working technique in the documentation 😳

Thanks again for your work on this, my preliminary attempt to incorporate a date range filter into an open source project I’m developing was so quick thanks to this!

Ability to customize `weekDaysAbbrs`

As far as I can tell, customizing the week day abbreviation headers also requires rebuilding the weeks and weeks.days collections. Is there a way to change the abbreviations without doing that?