5 ms·

Show HN: A React.js yearly calendar component

94 points by GiovanniFrigo 11y ago

fphilipe 11y ago
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).
- tehno 11y ago
  I've seen this style used in traditional wall calendars, usually with just that month's line on the bottom, but sometimes with previous/next month lines too. I once created a ColdFusion (anyone remember CFML?) module for rendering similar calendar layout on server side.
- GiovanniFrigo 11y ago
  It's definitely not common, but sometimes it's useful to have the whole year under your eyes. Basically we needed it for a project where we had to display how an year was subdivided into 4 different periods. Here we also highlighted the working, festive and prefestive days. I think it turned out to be an interesting layout, you can see it here: http://postimg.org/image/4yqaywm2r/ http://postimg.org/image/4yqaywm2r/.
- tangue 11y ago
  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 11y ago
    Yeah that's another interesting use case! Maybe I'll add the "select period" feature, thanks for the idea!
HipstaJules 11y ago
Wow, very useful. I'm going to use it for sure.
- GiovanniFrigo 11y ago
  Cool! If you find any bug or have any feature request please open an issue on github!
exizt88 11y ago
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 11y ago
  Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?
  - iandanforth 11y ago
    Cacheing? You're doing a lot of work in render that could be computed once. Try saving a few years +/- into state on componentDidMount. And for day clicks, pull rows that arn't touched from the cache.
    - GiovanniFrigo 11y ago
      Will surely do, thanks! Also, how did you test the onClick delay? by spamming timestamps in the code? :D
      - exizt88 11y ago
        Use the Chrome's "Profiles" tab in DevTools.
      - sirrocco 11y ago
        No, you open up the Chrome Dev Tools, click the Timeline tab and then start recording. Click a few days in the calendar, stop the recording and then you'll see that after each click it takes 100ms until paint events are shown.
  - jkkramer 11y ago
    Things would also be significantly sped up if you compiled in production mode. From looking at your source, all the dev mode checks are still being performed. See: https://facebook.github.io/react/downloads.html https://facebook.github.io/react/downloads.html (the note under npm section) https://github.com/facebook/react/issues/1772 https://github.com/facebook/react/issues/1772 http://stackoverflow.com/questions/22118915/how-to-turn-on-off-reactjs-development-mode http://stackoverflow.com/questions/22118915/how-to-turn-on-o...
CharlieTrip 11y ago
Thanks. Really useful and you save me a lot of time! If I found some problem I'll contact you ;)
- GiovanniFrigo 11y ago
  Please do! Also if you have any feature request use github's issues to let me know!
hueking 11y ago
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 11y ago
  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 11y ago
    Also, you can get way more competent answers on reddit (/r/reactjs) or on stackoverflow :)
- n0us 11y ago
  If you are using something like browserify you could create a module that defines the variables you want to use for theming or something and then import that module to achieve change once/ show everywhere. You could also just not do inline styles, it isn't required.
klkvsk 11y ago
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?
- alexmuro 11y ago
  imho, this is worth showing as a piece of design. Its an innovative calendar layout and while I don't know if I would use it in time / data selection, in terms of visualizing data inside of a year it has a lot of potential.
  - GiovanniFrigo 11y ago
    You definitely won't use this for date selection, but we found it useful to layout the whole year and to review it at a glance. Thanks for your kind words anyway! :)
    - haxeny1 11y ago
      I liked the layout. The main take away for me was the <today> in Red. It may be a trivial feature,but with so many widgets pounding my eye, it was nice to zoom in to todays date. I can see master planners (in inventory world) sticking with this layout, though I am sure you guys must have already done your market research.
      - GiovanniFrigo 11y ago
        No market research here, TBH! It is a component extracted from a project we did with our agency Belka, but we'd love if people start using it in other projects!
- HipstaJules 11y ago
  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?
eterm 11y ago
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 11y ago
  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
dominotw 11y ago
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 11y ago
  check out http://react-components.com http://react-components.com, they have a nice collection there!
  - theodorton 11y ago
    Also: https://react.parts/ https://react.parts/
PointerReaper 11y ago
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_keyboard_focusable_and_clickable/ http://www.456bereastreet.com/archive/201302/making_elements... and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!
- GiovanniFrigo 11y ago
  Thanks for the suggestion! will surely look into making it more accessible!
CharlesMerriam2 11y ago
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?

94 points by GiovanniFrigo 11y ago

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).

tehno 11y ago
I've seen this style used in traditional wall calendars, usually with just that month's line on the bottom, but sometimes with previous/next month lines too. I once created a ColdFusion (anyone remember CFML?) module for rendering similar calendar layout on server side.
GiovanniFrigo 11y ago
It's definitely not common, but sometimes it's useful to have the whole year under your eyes. Basically we needed it for a project where we had to display how an year was subdivided into 4 different periods. Here we also highlighted the working, festive and prefestive days. I think it turned out to be an interesting layout, you can see it here: http://postimg.org/image/4yqaywm2r/ http://postimg.org/image/4yqaywm2r/.
tangue 11y ago
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 11y ago
  Yeah that's another interesting use case! Maybe I'll add the "select period" feature, thanks for the idea!

HipstaJules 11y ago

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

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

exizt88 11y ago

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 11y ago
Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?
- iandanforth 11y ago
  Cacheing? You're doing a lot of work in render that could be computed once. Try saving a few years +/- into state on componentDidMount. And for day clicks, pull rows that arn't touched from the cache.
  - GiovanniFrigo 11y ago
    Will surely do, thanks! Also, how did you test the onClick delay? by spamming timestamps in the code? :D
    - exizt88 11y ago
      Use the Chrome's "Profiles" tab in DevTools.
    - sirrocco 11y ago
      No, you open up the Chrome Dev Tools, click the Timeline tab and then start recording. Click a few days in the calendar, stop the recording and then you'll see that after each click it takes 100ms until paint events are shown.
- jkkramer 11y ago
  Things would also be significantly sped up if you compiled in production mode. From looking at your source, all the dev mode checks are still being performed. See: https://facebook.github.io/react/downloads.html https://facebook.github.io/react/downloads.html (the note under npm section) https://github.com/facebook/react/issues/1772 https://github.com/facebook/react/issues/1772 http://stackoverflow.com/questions/22118915/how-to-turn-on-off-reactjs-development-mode http://stackoverflow.com/questions/22118915/how-to-turn-on-o...

CharlieTrip 11y ago

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

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

hueking 11y ago

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 11y ago
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 11y ago
  Also, you can get way more competent answers on reddit (/r/reactjs) or on stackoverflow :)
n0us 11y ago
If you are using something like browserify you could create a module that defines the variables you want to use for theming or something and then import that module to achieve change once/ show everywhere. You could also just not do inline styles, it isn't required.

klkvsk 11y ago

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?

alexmuro 11y ago
imho, this is worth showing as a piece of design. Its an innovative calendar layout and while I don't know if I would use it in time / data selection, in terms of visualizing data inside of a year it has a lot of potential.
- GiovanniFrigo 11y ago
  You definitely won't use this for date selection, but we found it useful to layout the whole year and to review it at a glance. Thanks for your kind words anyway! :)
  - haxeny1 11y ago
    I liked the layout. The main take away for me was the <today> in Red. It may be a trivial feature,but with so many widgets pounding my eye, it was nice to zoom in to todays date. I can see master planners (in inventory world) sticking with this layout, though I am sure you guys must have already done your market research.
    - GiovanniFrigo 11y ago
      No market research here, TBH! It is a component extracted from a project we did with our agency Belka, but we'd love if people start using it in other projects!
HipstaJules 11y ago
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?

eterm 11y ago

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 11y ago
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

dominotw 11y ago

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 11y ago
check out http://react-components.com http://react-components.com, they have a nice collection there!
- theodorton 11y ago
  Also: https://react.parts/ https://react.parts/

PointerReaper 11y ago

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_keyboard_focusable_and_clickable/ http://www.456bereastreet.com/archive/201302/making_elements... and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!

GiovanniFrigo 11y ago
Thanks for the suggestion! will surely look into making it more accessible!

CharlesMerriam2 11y ago

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?