Plugin de Eventos do Angus 📅

[angus (Angus McLeod)]

There are two types of agenda and calendar topic lists:

1. Category. Turn the lists on in the settings for a category and the list will appear in that category. These lists show events from this category.

   

   ---

   

2. Site. Add ‘Agenda’ and/or ‘Calendar’ to top menu in site settings and the list(s) will appear in the top level discovery context. These lists show events from all categories.

   

   ---

   

[ChrisBeach (Chris)]

Hi @Angus,

The Calendar view didn’t work for me unfortunately.

It renders like this:

https://se23.life/calendar

Debugging Details (JavaScript error)

[angus (Angus McLeod)]

Thanks, fixed. Let me know how it goes

https://github.com/angusmcleod/discourse-events/commit/237173bc8a6bd70f405637dec4e8671e408257c8

[supernaturally]

This plugin is really becoming robust. How did you enable title pictures for posts inside of a category? It looks like they only appear in “agenda” in your sandbox:

[ChrisBeach (Chris)]

@angus

Thanks, fixed. Let me know how it goes

That’s fixed it for me. Thanks @angus

[tobiaseigen]

That’s alot of multiple day events! When there are 4 on a given day or period, the last one gets cut in half and is not legible. Not sure there’s an easy answer to that.

[angus (Angus McLeod)]

@supernaturally You can turn all features of the topic list previews plugin on/off on a per-list and per-category basis in category settings.

@tobiaseigen

When there are 4 on a given day or period, the last one gets cut in half and is not legible.

Yes, there will be some issues with ‘crowding’ in calendar boxes to work through. Have you got a screenshot or an example I can take a look at?

[tobiaseigen]

I was just poking around in SE23 Forum - Forest Hill & Honor Oak and noticed this. Here’s a screenshot - if @ChrisBeach minds I can remove it.

[ChrisBeach (Chris)]

@tobiaseigen yes, as it happens, I was wondering about possible solutions to the crowding issue too. Tricky one to solve. Apple calendars does it by showing a subset of events per day and displaying an “X more …” link underneath.

I think titles of multi-day events need to be repeated on each week (row) that the event spans.

[tobiaseigen]

Thanks, Chris. I think you are using the calendar in a different way than most people, by putting exhibition dates that span weeks or months. This looks great on agenda views but not so great on the calendar. Maybe you’d benefit from a select option to hide specific events from the calendar view? Or you just create two events to indicate start and end date for the exhibition?

Or your suggestions seem good ones too for dealing with lots of events. Google calendar does it this way too. So there’d be only 3 displayed each day plus a “X more”.

I also had the thought earlier that there’s a temptation/desire to click on a day to see all the events on that day. Maybe make the day clickable and display those events below the calendar like on the mobile view? The “X more” link could also be clickable to display those events below the calendar.

Of course all this may be scope creep for the events plugin. I wouldn’t want Angus to feel like we’re pressuring him to make this plugin bigger than it needs to be for his purposes.

[ChrisBeach (Chris)]

@tobiaseigen

Looking at the calendar view, I am missing google calendar features:
…

• today’s date is highlighted

Whilst today’s date is highlighted (as @angus mentioned), it was a bit too subtle for my dodgy eyes to make out.

I bumped up the contrast with the following CSS:

.events-calendar {
    .day.today {
        background-color: #fda;
        border: 2px solid #b73;
        margin: -2px;
        
        .date label {
            font-weight: bold;
            color: #951;
            &:after {
                font-weight: normal;
                content: " - Today";
            }
        }
    }
    
    .day.selected .date label {
        color: white;
    }
}

Before

After

[ChrisBeach (Chris)]

@tobiaseigen

I think you are using the calendar in a different way than most people, by putting exhibition dates that span weeks or months. This looks great on agenda views but not so great on the calendar. Maybe you’d benefit from a select option to hide specific events from the calendar view? Or you just create two events to indicate start and end date for the exhibition?

Or your suggestions seem good ones too for dealing with lots of events. Google calendar does it this way too. So there’d be only 3 displayed each day plus a “X more”.

There is a JavaScript Calendar library (MIT License) called “FullCalendar” that might be worth @angus considering?

It lays out overlapping multiple all-day events like this, with a limit on the number shown:

[ChrisBeach (Chris)]

I’ve just upgraded and spotted a bug - times are showing on all-day events (may also be because I am in Paris at the moment rather than London?)

Also when tapping a day on the mobile view calendar, the selected day is no longer highlighted

[angus (Angus McLeod)]

I had some fun fixing and adding a few things to this plugin over the weekend

• Events are now coloured according to their category, and ‘Today’ has a highlighted (rather than grey) background.

• Days now have a ‘more’ button when events overflow and a detail view for seeing all events in a day.

  

• You can now select the timezone of an event in the Add Event modal.

  

• Events with timezones are displayed roughly according to the conventions used by Google Calendar:

  • ‘Display’ labels (On the calendar, in the topic list and in the topic):

    • Specific times are displayed in the user’s timezone without a timezone label

    • All day events are not timezone specific.

  • ‘Edit’ labels (In the composer and in the add event modal):

    • Specific times are displayed in the event timezone with a timezone label

    • All day events are not timezone specific.

  

I also made some updates to how all day events are handled that, in conjunction with the timezone updates, should fix the issues you were seeing @ChrisBeach.

You’ll need to edit the relevant posts, open the add event modal and save it again (it’s not possible to migrate it).

@ChrisBeach

I was wondering about possible solutions to the crowding issue too
…
I think titles of multi-day events need to be repeated on each week (row) that the event spans.

@tobiaseigen

The “X more” link could also be clickable to display those events below the calendar.

Let me know if the ‘more’ button and day detail view help in this respect.

@ChrisBeach

There is a JavaScript Calendar library (MIT License) called “FullCalendar” that might be worth @angus considering?

Using a third party library is a bit limiting in terms of style and functionality, particularly for something as big as this. It wouldn’t feel ‘Native’.

As usual everything is on my sandbox: https://discourse.angusmcleod.com.au/calendar

[tobiaseigen]

Wow! I love what you’ve done, Angus. Looking really good. I am really looking forward to installing this plugin on my site soon!

I played with it a bit and added some events, and noticed a few oddities. See screenshot.

• All-day events have a start time in the calendar? See snow day. (love that emoji work in the calendar - so cool!)
• multiple day events interfere with each other and make for a disjointed presentation (see red and blue on 14 February).
• long multiple day events become orphaned, there’s no way to know what they are until you click on them and away from the calendar. Chris had the idea to display it at the start of each week. I think it might be fine to provide a mouse over helper text, or a popup displaying details before taking me away from the calendar.
• I don’t know why you have a multiday event displaying only on the 14th.

---

Also, I can’t edit the event times anymore once event is saved, even for my own event?

---

Pacific Time Zone seems to appear 3 times in the pulldown list when selecting time zones.

[ChrisBeach (Chris)]

@angus One bug I noticed on my site, the start time input field no longer shows a drop down of times. I’m unable to add an event.

[sam (Sam Saffron)]

One idea here, could a single post in a long topic create events? Current way of topic per event may be a bit too loud for our current use case.

As an advantage here then the OP could render the calendar widget and then individual posts set the times.

This would be the ideal kind of format for an availability calendar.

[adorfer (Andreas Dorfer)]

Feature request whichlist for the “agenda” list:

1. make the date format configuraable (or at least stick to the format of the user’s preference):
   “04-05 something” will lead people over here to believe it’s happening in in may, not in april.
   And make “year” be visible by default, just to make the date-pattern more reconizable.
2. make the sorting configurable: start from “near” to “fare away in the future”
3. don’t show closed threads and/nor thread more than x days in the past (e.g. default 7 days)

[tobiaseigen]

@sam

One idea here, could a single post in a long topic create events? Current way of topic per event may be a bit too loud for our current use case.

I wonder. Maybe this could be an interesting option. Also for an event series. Eg add ability to add event data to any post in a thread to indicate an event in a series. I could see this being interesting for a webinar series and not being too loud. Admin wrench option to enable event to any topic?

Then again, in my community we already create one topic per event or funding opportunity. So it would not be more noisy to be able to add event data to any topic in the forum and have it show upon the agenda and calendar views. I love the category colors on the calendar!

Though we would want to be able to limit the ability to add event data by trust level. Not everyone should be able to add events to the calendar, methinks. That could get noisy and confusing to regular members too.

[angus (Angus McLeod)]

Thanks for all the feedback.

Some quick notes

@tobiaseigen

Also, I can’t edit the event times anymore once event is saved, even for my own event?

You edit the event by editing the first post, not the topic inputs in the topic title area.

@adorfer

make the date format configuraable

You can configure the event label format using the site settings events event label short format(lists) and events event label format topic title.

@adorfer

don’t show closed threads and/nor thread more than x days in the past (e.g. default 7 days)

You can:

• Remove past events from all agendas (site setting Remove past events from Agendas); and

• Remove closed events from specific categories (category setting Filter closed event topics from the Agenda in this category) or from all agendas (site setting Filter closed event topics from all Agendas)

@sam

One idea here, could a single post in a long topic create events?
…
This would be the ideal kind of format for an availability calendar.

Yeah, I see the use case. The current ‘product’ is built around in-person events. For an availability calendar, having one topic per person is too much.

Given that I’ve already made a discourse-specific calendar, adding this functionality wouldn’t be that hard I guess. Mount the existing calendar components in a widget and add some post custom fields for post events… I’ll see if I can think it through next weekend.

Actually, ideally this would integrate with Discourse Chronos, i.e. provide an in-topic calendar chronos events (@j.jaffeux)

@tobiaseigen

Though we would want to be able to limit the ability to add event data by trust level.

Yeah, having the topic:event relation has a ‘built in’ permissions structure. And listing the events as topics works well with the Discourse discovery lists. But I can see the ‘Availability’ calendar use case.

** edit **

@tobiaseigen

multiple day events interfere with each other and make for a disjointed presentation (see red and blue on 14 February).

long multiple day events become orphaned, there’s no way to know what they are until you click on them and away from the calendar. Chris had the idea to display it at the start of each week. I think it might be fine to provide a mouse over helper text, or a popup displaying details before taking me away from the calendar.
I don’t know why you have a multiday event displaying only on the 14th.

Yes, long all day events are…tricky. Getting them all to line up properly in every scenario will take a bit more work. I’ll see if I can crack it this evening. I agree with the titles idea (cc @ChrisBeach).