-
Notifications
You must be signed in to change notification settings - Fork 73
Responsive example #10
Comments
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) |
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? |
@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. |
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. |
Hi @GiovanniFrigo. |
Hello there, any updates on this? Would be awesome to make this response :D |
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. |
@GeXiaoguo the example now lives here https://belkalab.github.io/react-yearly-calendar/responsive/. I updated the original link on the post above |
Great work guys! Thank you. |
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 |
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)
The text was updated successfully, but these errors were encountered: