Improve our calendar!

[MandyMeindersma]

This is a vague issue on purpose! Our calendar could use a couple improvements but listing them all would be a lot.

The biggest one is that I wish there was a toggle to a schedule view

I will leave this issue open, the plan is for people to make multiple PRs relating to this issue!

[amandairvine]

@keifererikson and I were talking about how the calendar does not show any events that have happened throughout the month once they have passed. For example, I wanted to see if I missed an event earlier this month, but it was no longer visible for me to check.

Do you think having the events show from the past 30 days would be better, or just the past events for the current month?

I'm in Dan's Open Source club, and I am interested in looking into this!

[MandyMeindersma]

Would love this @amandairvine ! I created #420 , if you want to comment on it I can assign it to you!

Would love to see as many as possible so 30 days would be perfect or maybe even all (depends on if that's performant)

[johnjovero98]

Hi @MandyMeindersma!

I thought of polishing the UI of the calendar with a similar design pattern to Google's.
So far, I've been working on the month's section locally (preview down below).

I'm also in @dgmouris open-source club and interested in contributing to this issue.

Looking forward to your feedback :>

[dgmouris]

@johnjovero98 this looks really good and I like it. I was looking at the calendar and thinking it needs the days it's not there.

Could you push up a PR for this maybe? If you need help with this as well, we'll talk about it next Friday at open source club or sooner. :)

[dgmouris]

Do you think having the events show from the past 30 days would be better, or just the past events for the current month?

@amandairvine This is an awesome idea.

To fix this take a look here

DES-Website/server/api/events.js

Line 54 in 4a2ad48

const resposnse = await calendar.events.list({

I hope that helps. We can also discuss either next Friday or next time we see each other here.

[johnjovero98]

I was looking at the calendar and thinking it needs the days it's not there.

Hi @dgmouris, quite unsure what you meant by this. Could you elaborate, sorry 😅.

Though, I added the "start time" on the month view to provide more context about the event for the users.

Here's the demo gif of my revisions.

[dgmouris]

@johnjovero98 sorry incomplete thought when I was speaking and writing.

What I meant was the days of the previous and future months weren't there when looking at the current month.

Great job in adding those.

I'll take a look at this pr shortly looks awesome so far!

[dgmouris]

@johnjovero98 the month view looks so fantastic https://devedmonton.com/events

Do you want to tackle the week view as well?

[johnjovero98]

Yes, I can tackle the week vue (pun intended) too.
Would also be delighted to work with fellow members as well. I've been playing with it, and it's a lil bit tricky.

Looking ahead on month view :
I notice that we usually have 1-2 events per day on the calendar.
If we have more than 3 events, it will overflow on the cells.

My lazy solution for now would be adding an "overflow:auto on the css. 👀

[dgmouris]

Yes, I can tackle the week vue (pun intended) too.
👀

Sounds good on the week vue, maybe this Friday we could offer some folks to work on it with you :)

I notice that we usually have 1-2 events per day on the calendar.
If we have more than 3 events, it will overflow on the cells.

I'm pretty sure this is fine, I can't see any thing bad right now as it'll be a small case (people will probably look at the week vue 👀 in that case).

Thanks again for the great work @johnjovero98

[johnjovero98]

Here's a demo "gift" of the calendar week vue

2 major updates:
1.) overlapping events got a glow up!
2.) We can finally add all-day multiple events from Google calendar and render it without DES calendar doing some funky stuff... (for now 👀). Thank you for providing the documentations for this @Atremblay9 and @charrde for fixing the time zones!

[dgmouris]

Hey Folks, I think the calendar is solid thanks for all of the contributions.

From last year I was wanting to a listview kind of like meetup.com I think this would be a bit easier to read

comment linked here #312 (comment)

Here is the general idea. I think we could either put them side by side or below and make one column "list of events" and one column "meetups we support". I would use this view all the time.

Here was the general idea of what I was thinking.

The first iteration doesn't need to be perfect but it would be great if it grouped in months.

Let me know what you folks think.

[tylersocholotuik]

@dgmouris I started playing with the list view and just want to see if I am on the right track. So far all I have done is hide the calendar when the list tab is clicked, and I currently just copied the event modal to display the events. I will obviously change the styling and add the grouping for months later. The tabs were already done so I just left them, but I am thinking they would look a little better in the center, right under the Calendar header. What are your thoughts on that?

Here is what I have so far

Let me know what you think!

[dgmouris]

@tylersocholotuik this is pretty awesome so far! could you make them a tiny bit more compressed so more can be seen on the page?

As well could you put the tab in the middle?

Awesome work! Feel free to push it up and Note as a draft PR.

[tylersocholotuik]

@tylersocholotuik this is pretty awesome so far! could you make them a tiny bit more compressed so more can be seen on the page?

As well could you put the tab in the middle?

Awesome work! Feel free to push it up and Note as a draft PR.

Yeah I can definitely make them smaller. I'm gonna put the tabs in the middle and try to sort out the grouping today.

[dgmouris]

@tylersocholotuik I'll take a look at this later today but this looks awesome so far.

Thanks so much for the work.

@arashsheyda, @MandyMeindersma, and others I would love your folks' opinion on the layout.

• Option 1 (vote with ❤️ ): tab to display the calendar OR the list view.
• Option 2 (vote with 🚀 ): list view BELOW the calendar.

I'm a little undecided the choice but I'd love to hear your folks thoughts on this.

This PR excites me because I think we could list the "Next Meetup" on the home page which would be neat (idea for the future).

PS. I think the default view for mobile should be the list.

[johnjovero98]

Tabs all the way! It's more organized and mobile friendly, especially if we set the list view as the default on mobile, which I second to that idea 👀

Layout Suggestion:

• Let's make the cards even

p.content-full {
      overflow: auto;
      height: 210px;
}  

or the tailwind way ...

className={"h-[210px] overflow-auto"} 
(I'm getting my frameworks mixed, am I?)

Other than that, superb work @tylersocholotuik !

Before	After

[tylersocholotuik]

Thanks for the feedback @johnjovero98 ! The Datascience Social wasn't there when I was working on it, so I didn't have events with really long descriptions in mind. Overflow is a good solution!.

[tylersocholotuik]

I noticed an issue with the view selection tabs on apple devices. When viewed on my iPhone, the tabs are left-aligned instead of centered whether I use Safari or Chrome, so it's not a browser issue. At the JS/Ruby/Python meetup, Aaron had the calendar open on his Mac and I saw the same thing. Are there any other Mac users that can confirm this, and if so, would you be willing to try fixing it?

A potential solution is to change line 57 in components/app/Calendar.vue from:

class="w-[180px] bg-gray-400/20 rounded-lg place-self-center mb-8"

to:

class="w-[180px] bg-gray-400/20 rounded-lg mx-auto mb-8"

I'm thinking place-self-center is the issue, but I am not certain.

[johnjovero98]

**googles "how to centre a div"**

I would just do the classic way of centering a div by wrapping the whole toggle in a flex container :>

"place-self" is an unstable css property
https://caniuse.com/?search=place-self