
Show HN: A React.js yearly calendar component - GiovanniFrigo
https://github.com/BelkaLab/react-yearly-calendar
======
fphilipe
That's an interesting way of showing a calendar. Is this common practice? I've
never seen this before. I think the only yearly calendar I've seen more often
lately is the one used on the GitHub profiles (here's a d3 one:
[http://bl.ocks.org/mbostock/4063318](http://bl.ocks.org/mbostock/4063318)).

~~~
tangue
I've hardcoded this kind of calendar in a lot of hotel backends (to fill
availability) but I suspect they are useful for any season related form.

~~~
GiovanniFrigo
Yeah that's another interesting use case! Maybe I'll add the "select period"
feature, thanks for the idea!

------
exizt88
100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013
MBP. Seems a bit too much for making a number bold.

~~~
GiovanniFrigo
Any idea on how one could optimize the rendering function to reduce this lag
(which BTW I can barely see on my 2015 MBP)?

~~~
guscost
One common optimization is to strategically use shouldComponentUpdate to limit
the number of components that render each time the state changes. In this case
you could create a Month component which renders a single <tr> element. This
component would then implement shouldComponentUpdate to check if the state
used to render that month has changed. If not, shouldComponentUpdate returns
false and the month does not re-render. This means that clicking on a Day
should re-render two Months at most.

The same shouldComponentUpdate optimization could be added to both Calendar
and Day, but in this case clicking a Day would always require the Calendar to
re-render, and running through 365 shouldComponentUpdate functions (returning
false from at least 363 of them) without first limiting by Month would not be
ideal.

If the state is managed with ImmutableJS or a similar library,
shouldComponentUpdate would only have to do a single reference equality check.
Either way you should see a big improvement from any implementation that
allows the individual Month components to skip rendering:

[http://facebook.github.io/react/docs/advanced-
performance.ht...](http://facebook.github.io/react/docs/advanced-
performance.html)

~~~
GiovanniFrigo
Great! thanks for the explanation and the docs!

------
eterm
I'd like to see an option to move the start of the week (first column and
bolded column) to Monday (for those of us who prefer w/c monday).

I'll have a go myself when I get home, if I'm successful I'll submit a pull
request.

~~~
GiovanniFrigo
Great! yeah that was definitely something I wanted to add, here in Italy we
usually use Monday as week start.

Feel free to submit a pull request then! I just kindly ask you if you could
use airbnb's Javascript and React style guides, that is a pretty good standard
IMHO
[https://github.com/airbnb/javascript/tree/master/react](https://github.com/airbnb/javascript/tree/master/react)

------
hueking
Sorry for asking this here, but I'm trying wrap my head around React. With the
fact that we want to isolate styles for each component, how do we go about
theming the components later on?

~~~
GiovanniFrigo
I suggest you to read this
([http://stackoverflow.com/a/31638988/2304450](http://stackoverflow.com/a/31638988/2304450))
very good stack overflow answer, you'll find some interesting introduction to
inline styles if that's what you were looking for.

A different approach could be to pass a `classScope` string props down to the
components, and each component then applies it to the classes it uses
(Example: return (<div className={this.props.classScope + "inner-
div"}></div>); ). This way we could achieve better css selector scoping, at a
cost of a slightly more verbose code when using a component.

~~~
GiovanniFrigo
Also, you can get way more competent answers on reddit (/r/reactjs) or on
stackoverflow :)

------
PointerReaper
You might consider some people won't be able to use this calendar as-is; it
isn't accessible. Consider
[http://www.456bereastreet.com/archive/201302/making_elements...](http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/)
and perhaps change the spans to native HTML elements with visual and keyboard
focus. Thanks for sharing!

~~~
GiovanniFrigo
Thanks for the suggestion! will surely look into making it more accessible!

------
CharlesMerriam2
I'm confused.

1\. This is a fork from Hanse Kristian, who doesn't appear to work for your
company. That is, it doesn't look like BelkaLab did anything but change
package.json to name itself as the author.

2\. It's a bit confusing why you put the generated demo.js file as part of the
repository and have npm (.npmignore) ignore the src files. Is there something
special about this demo.js file instead of it being browserify output?

------
CharlieTrip
Thanks. Really useful and you save me a lot of time! If I found some problem
I'll contact you ;)

~~~
GiovanniFrigo
Please do! Also if you have any feature request use github's issues to let me
know!

------
dominotw
Nice work!!.

Side comment: I was expecting some sort of a 'marketplace' to emerge for react
components. I am surprised by so few reusable react components.

~~~
GiovanniFrigo
check out [http://react-components.com](http://react-components.com), they
have a nice collection there!

~~~
theodorton
Also: [https://react.parts/](https://react.parts/)

------
HipstaJules
Wow, very useful. I'm going to use it for sure.

~~~
GiovanniFrigo
Cool! If you find any bug or have any feature request please open an issue on
github!

------
klkvsk
Is that really worth showing to HN? I mean, I dont want to be rude -- your
code is ok, no problem here -- but it's not even a library, it is just a
widget in 200 LOC, that renders a single table. What's the achievement here?

~~~
HipstaJules
Is that comment really worth sharing on HN? I mean, I don't want to be rude -
the English is ok, no problem here - but it's not useful at all, it's just
complaining about a thing upvoted by 50 people. What's the purpose here?

~~~
klkvsk
I can tell from your own previous submissions that you are somehow affiliated
with "belka.us", same company that open-sourced this calendar widget, so I am
sure you were first here to upvote, and I understand why you are being so
passive-aggresive now. But I really do not want HN to be a platform for such
kind of self-promotion.

~~~
bmelton
It's a "Show HN" article. From the "Show HN" rules:

> Show HN is for something you've made that other people can play with. HN
> users can try it out, give you feedback, and ask questions in the thread.

[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html)

There is nothing even remotely inappropriate being done here, except for your
comment, which violates the self-same rules:

> Be respectful. Anyone sharing work is making a contribution, however modest.

~~~
klkvsk
So when you'll find yourself looking at front page full of "woo look at my
helloworld app btw here's our website"-like posts, would you still think the
same? Every tolerance should have its limits.

~~~
bmelton
Unlikely, but considering we have a Show HN section that is specifically
intended for that, which garners its own interest, and competes against the
other, non-Show articles for front page space, if the front page were filled
with Show HN content, it would either be due to a slow news day, or because
people were cranking out worthwhile-enough apps to merit front page supremacy.

Either way, your parade of horribles is unlikely to occur, or be that horrible
if it were. To each their own though.

