UI: Added DateTime of Event on the Client Side in the User's Timezone

[maha-sachin]

Resolves #2327

Related Issue:: This PR addresses issue #2327 by adding the requested functionality to render DateTime in the user's timezone. Description: This PR adds functionality to render the DateTime of events on the client side in the user's timezone. Previously, the DateTime was displayed in UTC, which could be confusing for users in different timezones. With this update, the DateTime is dynamically converted to the user's local timezone using JavaScript's Date object.

Changes Made: Modified the template to include JavaScript logic for converting DateTime to the user's timezone. Updated the rendering of event start and end times to display in the user's local timezone. Implemented handling for cases where no time is provided, displaying only the date.

Screenshots: Before Modification: After Modification: Expected Output: This illustrates how the event date/time should be displayed in the user's local timezone.

@sabine , Could you please take some time to review it and provide your feedback? Your insights would be invaluable in ensuring that the changes meet the project's requirements and standards.

Looking forward to hearing your thoughts!

[maha-sachin]

Hey @maha-sachin, thanks for doing this!

Some feedback:

1. It will help to list the time zone to make it clear to people what time zone they're seeing this in
2. only list hh:mm, not seconds.
3. on an event with start and end time, the time zone should be only listed once
4. on an event without start and end time, just the dates need to be shown

Hi @sabine , Thanks again for your valuable input! I'll make these adjustments to improve the readability and usability of the event details.

[maha-sachin]

Hi @sabine , Please review the changes and let me know if any further adjustments are needed.

without start time

with start and end time zone

[sabine]

Hey @maha-sachin, I pushed a patch to make this compile and added a check that events cannot have no start time, but an end time.

For events with only a start time, currently, no time zone is being rendered:

[sabine]

@christinerose these changes have nothing to do with this PR and are most likely included accidentally

[maha-sachin]

@sabine, I will update here once I fix the PR.

[maha-sachin]

Hi @sabine

[maha-sachin]

Hi @sabine, I have addressed the Timezone issue and reviewed the changes. Please let me know if everything looks good to you.

This code now displays the time zone under the following conditions:

- If there is either a start time or an end time, the time zone will be displayed
- If both start time and end time are provided, the time zone will be displayed with the start time only.
- If only a start time is present, the time zone will be displayed with the start time.
- If only an end time is present, the time zone will be displayed with the end time.
- If neither start time nor end time is present, the time zone will not be displayed.

Events page: Overview page:

Could you please take some time to review it and provide your feedback? Your insights would be invaluable in ensuring that the changes meet the project's requirements and standards.

Looking forward to hearing your thoughts!

@sabine, Could you please help me understand what might be causing this ABOVE CI/Build error and how it can be resolved?

Thank you for your assistance!

[maha-sachin]

Hi @christinerose @sabine , Could you please help me understand what might be causing this ABOVE CI/Build error and how it can be resolved?

Thank you for your assistance!

[maha-sachin]

Hey @maha-sachin! This looks really nice, but there's two things I'd like to ask:

1. can you turn the event card into a component, so that the same component is used in both the Events page and the Community page?
2. can you move the JavaScript to a single place such that we don't have to repeat it in different templates (this could be done either by moving it into a file and including just the file in the template, or by having the script tag as a component).

ETA: you can ignore the build error because it is unrelated to your changes

@sabine , Sure thing! I'll work on turning the event card into a reusable component and consolidating the JavaScript into a single location to avoid repetition across templates. I'll make sure to get back to you once it's done. Thanks for pointing these out!

[maha-sachin]

Hey @maha-sachin! This looks really nice, but there's two things I'd like to ask:

1. can you turn the event card into a component, so that the same component is used in both the Events page and the Community page?
2. can you move the JavaScript to a single place such that we don't have to repeat it in different templates (this could be done either by moving it into a file and including just the file in the template, or by having the script tag as a component).

ETA: you can ignore the build error because it is unrelated to your changes

@sabine & @christinerose , I've created a JavaScript file named event_script.js for handling event-related functionality across multiple templates. Could you please advise me on where would be the best place to store this file within our project folder structure?

Additionally, when creating components in OCaml, I'd like to follow a consistent file naming convention. Could you let me know what the preferred naming convention is for component files in our project?

Your guidance on these matters would be greatly appreciated.

Thank you!

[sabine]

I've created a JavaScript file named event_script.js for handling event-related functionality across multiple templates. Could you please advise me on where would be the best place to store this file within our project folder structure?

In the table of contents component components/toc.eml, we put the script as an OCaml value, and we then render it on every page that has a table of contents. Would this be an option?

Could you let me know what the preferred naming convention is for component files in our project?

We have a file components/cards.eml where a function event_card could be added.

[shakthimaan]

@maha-sachin Would you be able to make the minor changes as suggested and update the PR? Thanks!

[maha-sachin]

Sure, I'd make the suggested changes and update the PR. I'll start working on it and will notify you once it's updated. Thank you!

@maha-sachin Would you be able to make the minor changes as suggested and update the PR? Thanks!

Sure, I'd make the suggested changes and update the PR. I'll start working on it and will notify you once it's updated. Thank you!

[maha-sachin]

I've created a JavaScript file named event_script.js for handling event-related functionality across multiple templates. Could you please advise me on where would be the best place to store this file within our project folder structure?

In the table of contents component components/toc.eml, we put the script as an OCaml value, and we then render it on every page that has a table of contents. Would this be an option?

Could you let me know what the preferred naming convention is for component files in our project?

We have a file components/cards.eml where a function event_card could be added.

Hi @sabine @shakthimaan , I hope you're doing well.

I’ve been working on integrating a new JavaScript file named event_script.js for handling event-related functionality across multiple templates. In the table of contents component (components/toc.eml), we include the script as an OCaml value and render it on every page that has a table of contents. I wanted to know if this would be an appropriate approach.

To be honest, I felt a bit unsure about the project structure and the best way to organize and include this script. Could you possibly help me fix this and guide me on the preferred structure?

[sabine]

For a new feature like this, which is unlikely to be reused between different components, it seems best to co-locate the script with the component that is using the script. So I would put it all into cards.eml like this:

...

module Event = struct
  let render ... = ...

  let script = {| ... |}
end

...

Then, anywhere the component is used, we have to insert Cards.Event.script into the template, and to render the component, we use Cards.Event.render ....

[maha-sachin]

Hi @sabine & @shakthimaan , I hope this message finds you well.

I wanted to inform you that I have implemented the requested fix for the issue discussed in PR #2339 on the ocaml/ocaml.org repository. You can find the specific commit ((https://github.com/ocaml/ocaml.org/pull/2339/commits/91e251e512b0de52b415f1cd97340767d7724485))

Could you please review the changes at your earliest convenience? Your feedback would be greatly appreciated to ensure everything is in order.

Thank you for your time and assistance.

Best regards, Maha

[maha-sachin]

Hi @sabine, Thank you for merging the code and moving it into the Event module! I'm excited to see it integrated and look forward to contributing more.

Best, Maha