#450 Add truncation to the activity title in week view calendar

[veranika-karpava]

Authored by: @veranika-karpava

Proposed changes

This pull request resolves #450 by:

• Adding truncate feature to the activity title in week view calendar that reduces the amount of text displayed and add (...).

Checklist

• [x] Are the issues being addressed linked to this PR?
• [x] Do all commit messages start with the issue number?
• [x] Are all code changes sufficiently tested?
• [x] Are there screenshots for UI changes?

[seidior]

It looks good so far; I'm really impressed that you were able to accomplish this with minimal unintended side effects and target just the activities in the Week view.

It also seems like your changes to switching which calendar view is being presented don't cause any problems with the calendar view switcher, which is good.

I only have two comments, neither of which relate to whether or not this PR should be "approved", but it might lead to some interesting discussion in standup tomorrow:

• I notice that because of this change, it's now truncating time ranges in week view. Where previously it might have said "10:00AM – 10:50AM", it now says "10:00AM – 10:50 ..." Is that an either-or situation, either we truncate the activity title (and also the time range gets truncated) or we don't truncate the activity title?
• I also noticed that in your screenshot, every event title gets truncated, even when the event has enough room to fit the full title, such as in "Bulk Development", which previously just wrapped to the next line. Is it possible to get the full title when there's room and a truncated version if there isn't, or again is that another either-or situation?

I wonder also if we should drop the font size of the calendar as a whole, which may address some (but not all, of course) of these issues. But that may be outside of the scope of this GitHub issue.

[veranika-karpava]

As for time ranges I can delete truncation and it looks good on screen size 1168px: but doesn't look good on the smaller size:

Also I can change font-size for event:

I like idea to change font-size for week and month view.

[daveytech]

Great work on this issue and PR. Thank you for including the screenshots and quickly addressing Spencer's feedback. The smaller font size is great and we can discuss as a team in the morning more about Spencer's notes but looks great to me.

[veranika-karpava]

As for the activity truncation, I'm not sure that I can do it because I use text-overflow that doesn't work with no wrap value of white-space property. I've been doing quick research and didn't find anything like this.

I did something like that, but it didn't work correctly.

[SanazDn]

Great job! You did great job but to remove extra space you can use height: auto and if you wanna have less code and leaner code you could find the specific class that you are working on it in the inspect of the browser and then put in index.css file and overwrite the class like: .rbc-event { height: auto !important; } in the index.css and in this way you have much less code, but you did amazing coding here.

[veranika-karpava]

@seidior thank you for your comments. Based on Spencer's comments and team's decision I updated the code.

• don't use truncating time ranges in week view.
• use truncation for activity titles that doesn't have enough space to wrap.
• leave default font-size.

Now it looks like that: