Events Plugin 📆

angus · April 11, 2018, 8:25am

Ok, I’ll take a look tomorrow.

craisp · April 11, 2018, 3:27pm

Is it possible that the user‘s computer/phone has a wrong timezone? The locale is only used for date/time formatting using moment.js afaik. The time for your event shown to me is also 20:30. My timezone is Berlin.

ChrisBeach · April 11, 2018, 3:55pm

That is entirely possible as the user is from Germany I think!

I’d still want the events to be shown in London time for all users though, due to the nature of my forum

angus · April 12, 2018, 11:03am

As @craisp suggested, the way it’s meant to work is that it shows the user the event time in their own timezone. If the user is in Germany the time will be different.

I added the setting Include timezone in event label. to handle the case of users in multiple timezones, i.e. so there would be no confusion about what time was being displayed.

However I guess you’re after a setting that will always show the event in a certain timezone.

Well now that we have a default timezone, this is possible without also requiring the timezone to be entered each time an event is added. So I’ll add it.

Updated tasklist (for my reference);

1 - Address long title display.

2 - Add setting to always display time in default timezone, unless timezone is explicitly set.

3 - RSVP feature(@steve_pd I haven’t forgotten about this, sorry it’s taking so long).

4 - Add event details to onebox previews.

? - Event calendar for groups

angus · April 13, 2018, 6:50am

New feature: Event cards.

Screenshot%20at%20Apr%2013%2016-46-58

Now when you click on an event in the calendar in desktop, you will see an event card, with the topic title, metadata (including event label) and a topic excerpt. Clicking the title, the event label or the excerpt takes you to the topic itself. Event cards do not display on mobile. They are somewhat similar to the event details display in Google Calendar.

@tobiaseigen This addresses the title display issue.

https://github.com/angusmcleod/discourse-events/commit/dd04227c53af0313bab2601f42bfeef5e58e034a

angus · April 13, 2018, 11:48pm

Timezones update

I’ve simplified the way timezones are handled.

Event creation, editing and display

For creating, editing and displaying an event, the timezone is set according to this hierarchy:

// Start with the user's timezone, guessed by momentjs.
let timezone = moment.tz.guess();

// If a default timezone is set in the site setting use that instead.
const defaultTimezone = Discourse.SiteSettings.events_default_timezone;
if (defaultTimezone) {
  timezone = defaultTimezone;
}

// If the event has a custom timezone use that instead.
if (event['timezone']) {
  timezone = event['timezone'];
}

return timezone;

The decision on whether or not to display a timezone label next to a datetime is determined according to this logic:

const defaultTimezone = Discourse.SiteSettings.events_default_timezone;
const standardTimezone = defaultTimezone || moment.tz.guess();

if (!allDay && event['timezone'] && event['timezone'] !== standardTimezone) {
  dateString += `, ${timezoneLabel(event['timezone'])}`;
}

Basically, if the event is not an all day event and has a custom timezone that is different from the standard timezone (either the site setting or the user’s own timezone), then the timezone is displayed.

Zone list

I’ve also updated the timezone list (used for both the default timezone setting and the custom timezone input in event creation / editing modal) to filter duplicate values in the ActiveSupport::TimeZone::MAPPING. This simplifies the selection of zones (e.g. prevents issues with having objects with duplicate keys in a combo-box)

timezones = ActiveSupport::TimeZone::MAPPING
zone_map = []
remove_zones = []

# Remove the duplicate zones where the label doesn't include the city in the zone.
timezones.each do |k, v|
  if zone_map.include?(v)
    duplicates = timezones.select { |key, val| val === v }
    remove = duplicates.select{ |key, val| !val.include?(key) }
    remove_zones.push(*remove.keys)
  end

  zone_map.push(v)
end

timezones.except!(*remove_zones)

Basically, this means that when you have two or more “Readable” labels referring to the same IANA zone such as

"Edinburgh" => "Europe/London",
"London" => "Europe/London"

The zone with a label that does not match in the city in the IANA zone is removed. In this case Edinburgh would be removed.

Emails

The timezone of event times in emails is set according to this logic:

event_timezone = SiteSetting.events_default_timezone
event_timezone = event[:timezone] if event[:timezone].present?

i.e. Start with the default timezone, then use the custom event timezone if one is used.

I’ve also added a setting that toggles the display of timezones in event emails: events_emails_include_timezones. Default is true. The event time in the email is still going to be localised according to the logic above regardless of this setting.

@ChrisBeach Amongst other things, I hope this addresses your various timezone issues.

https://github.com/angusmcleod/discourse-events/commit/8fd960e2c3e65a0996155bead509891a04748004

ChrisBeach · April 13, 2018, 11:57pm

Thanks Angus - sounds like you’ve made some comprehensive changes. I’ve upgraded and notified the user that was seeing this issue. I’ll let you know if it’s resolved.

Cheers!

ChrisBeach · April 14, 2018, 12:06am

Good job that man

tran · April 14, 2018, 12:10pm

Can the time in the calendar be showed as 24-hour? If just one time，it can show more event info

if 2 times of the same day，Can the end time be showed in the calendar just like the google calendar？
I think it will be more clear. The effect as blow:
test2

tran · April 14, 2018, 5:03pm

@angus In general, last month and next month’s figures do not show or have a lighter color.

And I don’t know how to set up a week from Sunday

angus · April 16, 2018, 12:15am

@tran Thanks for the specific feedback! I’ll take a closer look today or tomorrow.

For this one, the start of the week is set according to the moment.js locale (see here) for whatever locale the forum or the user has set.

Users can also set a custom start of the week in their account settings, under “Interface”.

Screenshot%20at%20Apr%2016%2010-16-34

tobiaseigen · April 17, 2018, 1:03am

Nice work, Angus! I updated my community to latest and it is looking really good. Super happy to be able to just click around the calendar without ‘committing’ to go look at any one event.

Minor issue - I see in your screenshot and in my site that the & html encoding seems to be a bit broken in the event cards.

angus · April 17, 2018, 3:33am

Yeah, I think it may be a core issue though (cf. this bug report). Will check it tomorrow.

Tom_Newsom · April 17, 2018, 12:05pm

What are your thoughts on repeating events Angus?
Even if it’s just weekly repeating to start with…

tobiaseigen · April 17, 2018, 9:22pm

Today, when adding event details on mobile (ios), the interface was a bit glitchy - not sure why or how best to describe it. Part of the interface disappeared at various points, seemingly behind the keyboard but still was gone after making the keyboard disappear. I know this is going to be a constantly moving target and am not too worried about it, but thought I’d mention it.

For when you have time/inclination to look at refinements to this plugin: I can’t remember if I asked about this before, but it would be handy to be able to add event dates via the title edit functionality. eg. select pencil next to topic title and then edit title, categories, tags and event details.

angus · April 18, 2018, 4:03am

I’ve added a setting that lets you format the time in calendar entries: events event time calendar format. The default is HH:mm (i.e. 24 hr).

https://github.com/angusmcleod/discourse-events/commit/7f7fd872657fac623eb039ff373c9506fbfd8dc7

This joins the existing settings that let you format the datetimes:

in the event label in the topic: events event label format; and
in the event label in the topic list: events event label short format.

hm can you show me an example in Google Calendar itself? On a quick review it seems Google Calendar does this same thing this plugin is currently doing (i.e. just showing the start time).

Screenshot%20at%20Apr%2018%2012-00-51

Yes, good idea. I’ve made this change. Days from a different month will have a light grey background and have grey (instead of black) text.

https://github.com/angusmcleod/discourse-events/commit/11bb79263f7d2f2217f07592dfb450d34de171c3

Screenshot%20at%20Apr%2018%2012-24-34

I haven’t noticed that specific behaviour myself; take a screenshot if it happens again. But generally speaking the event modal does indeed need to perform better on mobile, it’s optimised for desktop, and ‘just works’ on mobile.

Updated tasklist:

1 - RSVP feature - next few days / weekend.

2 - Improve add event experience on mobile - next week.

3 - Add event details to onebox previews.

? - Event calendar for groups

tran · April 18, 2018, 7:02am

I just see google calendar app on my phone.

tobiaseigen · April 20, 2018, 6:44pm

Hi Angus! Happy Friday. Trust you’re keeping well. I wanted to point out that the event details seem to take up alot of horizontal space in topic lists, and also affect the meaning somewhat - see this example.

I can’t help but think maybe it’d be better to just dispense with the event date/time, to put it behind a mouseover, or move it after or below the topic title in a smaller, subtler font? People who want to know more can click through and read about the event dates as they read the topic.

I’ve been putting the date of events in parentheses already for posterity, which I should probably remove as the rollout of the events plugin on our site continues.

ChrisBeach · April 20, 2018, 7:30pm

I’ve used CSS to float the date/time to the right on desktop view (so that it doesn’t cause jumbled left alignment of titles).

On mobile view I’ve put it on a separate line, in a smaller font. Example:

Francois_Douville · May 2, 2018, 9:12pm

Can I add this plugin to subcategories?