description unreadable with short duration events

[yanir401]

Any recommendations for a workaround?

Thanks

[yanir401]

Hi there, I managed to find a solution with the hoursInDisplay, but now I have a new issue when I'm booking events in sequence. see the image:

also, do you have a way to limit the hours inside the view (based on the range of hours of fetched data)

Thanks

[pdpino]

Any recommendations for a workaround?

Don't know if is the best idea, but you could use the EventComponent prop, and pass a custom react component that includes a text and adjust the size, for example:

const MyComponent = ({ event, position }) => (
  <Text style={{ fontSize: calculateFontSize(position.height), ...otherStyles }}>
    {event.description}
  </Text>
)

In calculateFontSize() you would customize the font size given the height of the event: if the event is too small, you could make the fontSize smaller. You can customize the text further, such as displaying only a shortened description, etc.
See an example for the usage of the EventComponent prop in the readme.

UPDATE: You could try a simpler solution: pass the prop eventContainerStyle={{ minHeight: 10 }} (or other amount of pixels), this should set every event to be at least 10 pixels in height. (Though I haven't tested it).

[pdpino]

I have a new issue when I'm booking events in sequence.

This is because the events are overlapped, i.e. the second event starts at the same time or before the first event ends (measured in milliseconds). A possible solution is to change the startDate or endDate of your events, but I recognize this may not be ideal for your app.

I had a similar problem and applied a hacky solution (in my fork): I added an allowOverlapSeconds prop, which indicates the amount of seconds the events can be overlapped without displaying them smaller in width. For example, if your events are overlapped by 1 second, using allowOverlapSeconds = 1 would fix this.
@hoangnm I can send a PR with this change if is not too hacky, you can see the commit here

[pdpino]

do you have a way to limit the hours inside the view (based on the range of hours of fetched data)

This is the purpose of the hoursInDisplay prop, to choose the amount of hours showing (e.g. if hoursInDisplay == 12, the component should show from 8am to 8pm).
However, I think there is a bug: the actual amount is miscalculated and displaying less hours, e.g. if you set hoursInDisplay = 12, it may show only 10 or 11 hours. We should fix this bug 🙂

[hoangnm]

@pdpino about the events in sequence issue, I agree that the width of event items should be full width of the column. But can we just have a constant for it?

[pdpino]

@hoangnm do you mean not passing as prop? something like ALLOW_OVERLAP_SECONDS = 2?
Sure, I can do that

[pdpino]

@yanir401 were u able to apply a workaround for your use case? The latest PR #53 should fix the overlap problem

[RimApp]

Nice, I encountered the same problem, when will the changes be integrated on the master ?

[pdpino]

@RimApp which of the problems described here? the (1) description unreadable with short events or (2) events in sequence overlapping?

For (1), you should be able to apply any of the fixes described in the comment above. If that does not work for you, please let me know.

For (2), the changes are already merged to master (PR #53), and incorporated in version 0.1.1. Events that are overlapped by less than 2 seconds should not get shrinked in width. Again, if you have any issues with this let me know 🙂

[flobady]

it works perfectly on the master branch.
Thanks!

[RimApp]

My bad, it's work perfectly :)

[pdpino]

@hoangnm I think u can close this issue?

[hoangnm]

yes, thanks for your help @pdpino !