3

I have events which I want to display as shown below:

enter image description here

The features which are important to me: 1. Week days/calender days are displayed as rows and not columns 2. The whole 24h of a day are shown

I have tried to use react-google charts. But it's a complete mess since I have to add dummy events at 0 and 24h as well as set every event to the same day behind the scenes since the timeline chart only shows elements that are on the same day. enter image description here

I have looked at a couple of calendar packages but they all use a vertical timeline. enter image description here

What library would you recommend?
Do I have to build such a component from scratch?

siva
  • 1,183
  • 3
  • 12
  • 28
  • 1
    It is easy to generate calendar. The complicated part is the adding of events to the calender which requires higher level knowledge in CSS/Html. I would recommend you to take a look at react-big-calendar repository - fork it and then customise your own using the repository code examples, as well as inspecting the calendars to see how it is done. It ain't easy at all, but you should be able to do it once you get the hang of it. – Someone Special Apr 23 '21 at 06:46
  • 1
    Have you tried https://github.com/namespace-ee/react-calendar-timeline . I think you could add events and group them by day, creating one group for each day. – mortadelo Sep 02 '21 at 11:46

0 Answers0