power-calendar-range.days renders weekDayAbbrs-markup

[LevelbossMike]

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.

:wave::beers:

[LevelbossMike]

I just realized that this component is actually meant to render html output (I really should have read the README more thoroughly :/)

But nevertheless it would be cool if power-calendar provided functional components that handle date-selection and calculation of months etc. that could be used by users to build their own calendar-markup on top of ember-power-calendar.

My use case is building a calendar that renders svg.

[cibernox]

I also considered having the days component be another behavioural component without any markup a third component that is 100% markup, with little-to-none logic, but i'm not sure what would be a nice public API for that.

The following starts to feel a bit awkward (components' names are terrible, just an idea)

{{#power-calendar as |calendar|}}
  {{#calendar.month-logic as |days|}}
    {{calendar.month-grid days=days}}
  {{/calendar.month-logic}}
{{/power-calendar}}

There is however some level of logic that is hard to decouple from the actual representation. By example, in a classical month view, the behaviour of the focus and the arrow keys is somehow coupled with it's representation.

I'll experiement if I can extract the logic into another component without compromising the public API too much. Rendering a calendar with SVG is actually an interesting pattern. Could you share some screenshot of what you want to build. I'm curious.

[LevelbossMike]

Sounds good! I created a branch for this locally and extracted most of the calendering-logic parts into a power-calendar-base-component. I can most likely work on that a little bit more and share a PR over the weekend.

[cibernox]

Probably the {{power-calendar}} component is logicless enough already. It just adds a div with class, that is all. It could be tagless, but it would force me to implement myself some things like classes that ember does automatically.

The component that has both logic and markup is the {{calendar.days}} component. It knows how to build the weeks/days depending on the locale and some other options. However I'd like to spike this a bit myself before risking anyone to spend time on a possible dead end.

[neelimabhukya]

I am using power-calendar-range in my ember project but css is not reflecting in calendar what I need to do?