search

grubersjoe / react-github-calendar

A React component to display a GitHub contributions calendar
https://grubersjoe.github.io/react-github-calendar
MIT License
453 stars 40 forks source link

[Question] adjusting the calendar in mobile #102

Closed 1chooo closed 2 months ago

1chooo commented 2 months ago

I am currently using this package, and I have successfully displayed it on my webpage. However, when loading in mobile mode, the slider is on the far left, and I want it to be displayed from the far right at the beginning. How can I make it?

Or I can switch the different GitHub stats between PC and mobile mode, mobile will auto render the smaller calendar.

Current

image

Expected

image

Thanks

grubersjoe commented 2 months ago

Hey. I think you have several possibilities:

Using media queries and transformData

You could add something like react-responsive to query the viewport width in React and dynamically reduce the amount of data you show using the transformData prop:

Demo with code

Scroll to the end using scrollLeft

Or if you really want to scroll the container you can set the scrollLeft property of the HTML element using a React ref:

Demo with code

grubersjoe commented 2 months ago

@1chooo I realized there was a bug in the scrollLeft approach, it did not scroll on the initial page load. I've updated the Codesandbox above to fix that.

1chooo commented 1 month ago

@1chooo I realized there was a bug in the scrollLeft approach, it did not scroll on the initial page load. I've updated the Codesandbox above to fix that.

Thank you!