Custom schedule calendar event rendering

[kr-matthews]

Customize the styling depending on the length of the event, rather than relying on full calendar to do everything. Made 10min font size smaller, and adjusted line heights and how many lines to use for other lengths. One size effect is that the time text is slightly bigger now, which seems good/fine to me.

If/when this is merged, it will be easy to implement a tool-tip on the events, so that people can hover/tap on events to see the full time/title/etc. if the box happens to be too small. (We didn't do this originally because we didn't want to do custom event rendering just to get a tool-tip; but now it's worth it.) The changes can also be applied to the edit schedule view (it would be nice to be able to read 10 minute events when creating a schedule, especially since a tutorial is often that long). And on a related note, it would be good for mobile view to use a separate calendar per day, so that the days can stack on top of each other instead of squishing way too much.

Before:

After:

Examples of all event lengths:

[gregorbg]

Thanks for taking a look! Sorry if I'm a bit obnoxiuos, but what is the difference here? I'm having a very hard time trying to spot the difference in your Before/After...

In terms of code, where are the CSS styles in getEventStyle coming from? Did you steal them from the FullCalendar source code or did you come up with them yourself?

[kr-matthews]

Thanks for taking a look! Sorry if I'm a bit obnoxiuos, but what is the difference here? I'm having a very hard time trying to spot the difference in your Before/After...

The before/after pictures primarily show that not much has changed and I didn't break anything. The changes mainly make a difference for short events, and for that I only provided an 'after' picture (directly under "Examples of all event lengths:"). I should have added a 'before' picture, my bad.

I don't have a picture handy, but before (i.e. on the current site) 10-minute events are unreadable because the (single) line of text is cut off, and 25-minute events break onto 2 lines and the second text line is cut off. (See the linked issue for a picture of that.)

In terms of code, where are the CSS styles in getEventStyle coming from? Did you steal them from the FullCalendar source code or did you come up with them yourself?

I came up with them myself by some experimenting. For example, in some cases changing the line height seemed preferable to shrinking the text size. Styling is not my strong point so I'm very open to changes/improvements.