[FEATURE] Add duration to event elements for custom styling

[ryanomite]

Added a separate class to event elements to indicate how long the event is:

• duration-xs - under 30 mins
• duration-small - under 1 hour
• duration-medium - under 2 hours
• duration-large - under 4 hours
• duration-xl - under 6 hours
• duration-xxl - 6+ hours

This can be then used to add additional style to events based on how long they are. For example, I've made large and xl events have a minimum height style, so they appear "bigger" in my event list.

Finally, added a data-duration data attribute (in integer minutes) for utility purposes.

[ryanomite]

By the way, the use case this enables - at least, for me - is events with variable height. Makes it easy to tell where the "big" events are.

[brions]

Another option - though I'm not sure how difficult it is to get the total event durations for the entire day when rendering a single event - would be to size the event box proportional to how much of the total event time this event takes for the day.

For example:
Given the 3 events on Wed. 10th (durations: 1h, 1.25h, 2h) with a total event time of 4.25hr - each event could fill their relative amount of space in the day if the entire day is 100% of the event durations (4.25 hrs in this case).

So the first event fills ~24% of the area, the second event ~29%, and the 3rd event ~47% of the area.

If an option were provided to scale the events proportional to 24 hrs each day (with a minimum size), then they'd be much smaller but more accurate proportionally to the day. Just a thought.