Inconsistent Calendar UI

[aktdenis]

We’ve received reports noting that the calendar on the site appears in two different UIs. One version looks outdated and lacks a modern user experience, while the other has a more polished, Google Calendar-like appearance.

Link to calendar: https://akash.network/development/welcome/

Outdated Calendar UI:

How Community Calendar should look like at all times:

Expected Behavior:
The calendar should have a consistent, updated design across all pages, offering users the better, modern UI experience that aligns with the rest of the website.

Fix:
Unify the calendar UI by updating all instances to the modern, visually appealing version, ensuring a consistent user experience across the site.

--

If anyone is interested in fixing this issue, please provide an estimate of how much time and cost it would take to implement the changes. Feel free to reach out for further clarification or details

[ShinySyntax]

Hello.
I will take this issue.

[piber-dev]

hello @ShinySyntax did you read this?

If anyone is interested in fixing this issue, please provide an estimate of how much time and cost it would take to implement the changes. Feel free to reach out for further clarification or details

[ShinySyntax]

Here are some possible causes for the bug:

1. Raw data presentation: If you fetch event data via the API but display it directly without proper layout or use a calendar library, the events may be displayed as a simple list of events, resulting in a poor user experience.
2. Lack of structured UI components: You may not be using a structured calendar layout (e.g. grid) to properly display events across days, weeks, or months.
3. CSS styling issues: Missing or inappropriate styling can cause the calendar interface to look unpolished.

Here is our plan to address the bug:

1. Verify that you are fetching events correctly.
2. First, verify that you are using the Google Calendar API correctly to fetch event data.
3. Use the events.list method to fetch events.
4. Integrate a calendar library for proper UI rendering:
5. Use a calendar UI library: A proper calendar UI organizes events and dates in a visually pleasing way.

I recommend using FullCalendar, which integrates easily with Google Calendar and provides a powerful calendar UI.
I can integrate this and load events imported from Google Calendar to fix layout and style issues.

[brewsterdrinkwater]

How long will the work take to implement ?

[ShinySyntax]

I think It will takes 25 ~ 30 hours

[aktdenis]

@ShinySyntax let's stick to google calendar and just try to fix the appearance issue.

cc @brewsterdrinkwater @HoomanDgtl

[ShinySyntax]

Thanks, @aktdenis
I will take this

[ShinySyntax]

1. Google Calendar API Setup: - Enable Google Calendar API via Google Cloud Console.
   • Create OAuth 2.0 credentials or an API key.
2. Astro Project Setup: - Initialize an Astro project.
   • Install required packages: googleapis and dotenv. - Set up environment variables for API keys.
3. Build API Endpoint:
   • Create a server-side API in Astro to interact with Google Calendar. - Fetch calendar events using the API.
4. Display Events on Frontend:
   • Fetch events via the API and render them in an Astro component. - Customize UI for event display.
5. Optional: Add Event Subscription:
   • Add "Subscribe" button for users to add events to their own Google Calendar.
6. Optional: OAuth 2.0 Integration: - Allow user-specific interactions (e.g., authentication and adding/modifying events).
7. Final Testing & Deployment:
   • Test the integration and deploy the Astro project.

[piber-dev]

@ShinySyntax if the only issue is that some users see the old calendar UI and we want everyone to see the new calendar UI, why suggest all these changes again? in my opinion you can suggest these changes in an wg-akash-website meeting but it is out of scope for this issue and @aktdenis already said so.

[piber-dev]

when trying to access it in incognito mode, i usually see the old UI regardless if i refresh the page or i navigate to it as the first page but roughly 1/4 of the attempts go to the new UI. could this not be google doing A/B testing? they're known to do this a lot, at least to youtube. looking at the embedhelper page on google calendar, i see no options of choosing which UI to integrate. while testing with my own calendar embed, i see the same issue with their exact instructions on how to embed it on a website using iframe. i think this issue is solved here @aktdenis - we can't do anything to force the new UI unless we create our own custom way of rendering it.

[ShinySyntax]

@piber-dev
We need to come up with a solution to this issue here.
If there is no solution, I don't think there is any point in posting message.

[aktdenis]

thanks for taking a look @piber-dev , and agree with @ShinySyntax - we would like to find a solution, so the issue remains open.

[piber-dev]

@piber-dev
We need to come up with a solution to this issue here.
If there is no solution, I don't think there is any point in posting message.

this is rude and i disagree; if there is no solution, the issue should definitely be closed or changed so more time is not wasted 😆 in my opinion the issue should be rephrased because now that we know that it's related to A/B testing, do we wait for google to permanently change to have the new UI be shown which is good enough, or do we want our fully custom one ASAP?

thanks for taking a look @piber-dev , and agree with @ShinySyntax - we would like to find a solution, so the issue remains open.

@ShinySyntax's suggestion here might work if the scope is made larger. perhaps @ShinySyntax can list what would be required of this suggestion? renting a server? how many hours of work and how much per hour? i think the calendar plays a vital role in this community so some resources should definitely be spent there if people feel the need to have a consistent UI.

[aktdenis]

@piber-dev can you please share your findings about A/B tests. thanks!

[piber-dev]

did you see this comment @aktdenis? i set up an environment for the development page in incognito mode on my browser where i either 1) refreshed the page or 2) only navigated to the page and then started a new tab incognito mode repeating the process and found about 1/4 of 50 attempts to show the new UI and 3/4 of these attemps showing the old UI. i later did this with my own calendar, refreshing an iframe of my own a number of times and saw the same thing happening there. in neither this repository nor my other tests did i use any custom options nor did i find any options to choose the UI on the configuration page of the calendar. the A/B testing is only an educated guess, but makes no sense to why this would be so easily reproduced elsewhere when there was 0 configuration done either in this repository or elsewhere. but to know for sure just observing is not enough, contacting google would be the only sure way.

[ShinySyntax]

Anyway, we need to find a way to solve this.
I think we should suggest a solution that is more innovative and easy.

[aktdenis]

thanks @piber-dev. i was thinking, if you maybe found an article or something that would confirm a/b testing from google.

let's leave this issue live for now. i'll write to google support and share their response here.

[HoomanDgtl]

thanks for the response everyone.

Based on our experience with similar cases, it's certainly possible to implement a custom UI. We've successfully done so in previous projects. If you all agree, we can proceed with the implementation.

cc @aktdenis

Thanks.

[piber-dev]

@HoomanDgtl i support a custom UI as i previously mentioned this is a vital page for this community. needs to look good 😉

[Bct-crypto]

We’ve received reports noting that the calendar on the site appears in two different UIs. One version looks outdated and lacks a modern user experience, while the other has a more polished, Google Calendar-like appearance.

Link to calendar: https://akash.network/development/welcome/

Outdated Calendar UI:

How Community Calendar should look like at all times:

Expected Behavior: The calendar should have a consistent, updated design across all pages, offering users the better, modern UI experience that aligns with the rest of the website.

Fix: Unify the calendar UI by updating all instances to the modern, visually appealing version, ensuring a consistent user experience across the site.

--

If anyone is interested in fixing this issue, please provide an estimate of how much time and cost it would take to implement the changes. Feel free to reach out for further clarification or details

Hi @aktdenis
I am interested in fixing this issue.
plz let me know If I can start this work.

[aktdenis]

@Bct-crypto thank you. if you find what's causing this issue, feel free to offer an outlined solution with an estimate of costs of fixing this issue.

[Bct-crypto]

Hi @aktdenis thank you for your reaching out.
it will be take about 3~4 days
estimate of costs is about $500

[aktdenis]

@Bct-crypto have you find out what's causing this issue?

[Bct-crypto]

@aktdenis I can guess it similarly.

[aktdenis]

not sure what you mean by guessing @Bct-crypto

[Bct-crypto]

@aktdenis First, I have to researched the code
I haven't researched it deeply yet
If you give me this task, I will start working on it right away.
Can I start working on this?

[Bct-crypto]

@aktdenis and I can solve this issue.
#396

[aktdenis]

@Bct-crypto Before starting, could you please provide a brief explanation of what's causing the inconsistency between the two calendar UIs? Once you’ve looked into it, let me know the estimated time and cost.

--

as stated couple of times, we're staying with google calendar - just trying to fix the appearance.

[Bct-crypto]

@aktdenis the inconsistency between the two calendar UIs is likely due to different methods of embedding or styling the Google Calendar across the site
old version looks like it’s using a basic iframe embed for the Google Calendar. The iframe might not have custom CSS applied or is relying on default styles that look outdated. This approach may result in a less polished, more rigid look without modern styling or responsiveness
and it’s possible that different pages have conflicting or outdated CSS/JavaScript files.

[leonkertmaster]

@aktdenis @Bct-crypto, I don't think this is an embedding issue, as Google Calendar only offers one type of embedding with three different views: week, month, and agenda. To use the UI shown in the second image, it would need to be designed from scratch using the FullCalendar library or another calendar library. Example embeding link . Library that can used to create calender .It would be great if it was defined in this issue whether the second image is from Figma or from the same website. The UI shown in the second image is achievable using the current code.

[aktdenis]

@Bct-crypto @leonkertmaster the second image comes from google calendar as well.
we had the same embedding settings, same iframe etc.

[piber-dev]

@Bct-crypto @leonkertmaster commenting again, if you go to https://calendar.google.com/calendar/u/0/embedhelper and use the iframe you can consistently get both UI's if you keep refreshing the page or the iframe. @HoomanDgtl do you still want to get involved, creating a custom UI?

[leonkertmaster]

@piber-dev it will great if you can share video. Because i am only getting one type of ui after refereshing multiple times. We need to create a custom ui if we want any change in the design.

[piber-dev]

hi @leonkertmaster not much to show on video. across multiple devices i get the 2 different UIs shown in the picture of the original post here randomly when refreshing. maybe it's not possible to reproduce on all devices but on both devices i tested this is the case but again, a video doesn't add anything here.

[leonkertmaster]

hi , @Bct-crypto @aktdenis @piber-dev Check this out! Google is still in the process of fully launching this new UI. According to this blog post, they expect it to be fully launched by November 4, 2024. I think we should wait until then, as it will update automatically.

[piber-dev]

great find @leonkertmaster, i agree with your comment that we should wait and we can likely close this issue on november 4th.