Responsive example

[jonboiser]

Hi. I was wondering if you had any ideas on how one would make the 'basic demo' responsive. For example, in a narrower viewport, it would switch to a more traditional calendar, or maybe have the days of the month laid out as a column (instead of a row)

[GiovanniFrigo]

I had something like this in mind (be sure to run it on a browser window less than 1200px wide).

Basically, I'd love to find a way to make the same exact codebase work in both desktop and mobile viewports, adjusting the rendering by using just CSS rules.

This example is far from perfect, so any feedback and contribution is welcome! (code is in master branch, examples folder)

[hrlmartins]

That seems alright to me. Just missing (on the top of each moth) the day of week. Like those calendars that we have on our fridge... the traditional way :P. Is the code for that example in the repo?

[GiovanniFrigo]

@Mikah89 Sure it is: https://github.com/BelkaLab/react-yearly-calendar/tree/master/examples/mobile

To add the day of the weeks after the month name is a little bit extra work, as it requires some code changes and not only CSS.

[hrlmartins]

Yeh, but I think it's a "nice to have". Otherwise people will have the days of the month without really knowing what day of the week will be, for instance, the 25th of October. May be useful for some kind of planning.

[luchoct]

Hi @GiovanniFrigo.
First of all, thanks for this component.
I think having days of the week in mobile is a very "nice to have", indeed.
Easy way to get it with minimum code changes would rely in just removing 'table.calendar thead' from mobile media query so it is visible, and having an extra class non-first-week, only to be specified in mobile media query with value 'display:none' that would be set in every th from first week-separator onwards.

[Aditya94A]

Hello there, any updates on this? Would be awesome to make this response :D

[GeXiaoguo]

The provided example in the comment is no longer working. Do you mind sharing a screen shot or a sketch? I've been thinking about making it work for mobile but could not come up with any good design. Being yearly and also on a small screen seems to be a fundamental conflict. I am fine with coding but need help with design ideas.

[GiovanniFrigo]

@GeXiaoguo the example now lives here https://belkalab.github.io/react-yearly-calendar/responsive/. I updated the original link on the post above

[victorpinheiro]

Great work guys! Thank you.
The demo seems great. My only question is how to implement it?

[GiovanniFrigo]

Hey @victorpinheiro

since the style is not baked into the component, but relies on external stylesheets, you can easily just import the modified css file into your app (see https://github.com/BelkaLab/react-yearly-calendar/blob/master/examples/mobile/src/index.js#L5).

The stylesheet with the changes needed to get a basic mobile layout can be found here: https://github.com/BelkaLab/react-yearly-calendar/blob/master/examples/mobile/src/style.css#L191