Skip to content

Commit 907ad39

Browse files
toshywoshymattstrattonMatty Stratton
authored
[SITE] display time in local user time zone (#14405)
* [SITE] display time in local user time zone - add local user time zone - add offset from UTC to convert - convert event time to user time zone - add several examples to demo Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com> * add option to use timezone name and calculate offset Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com> * Updates documentation Signed-off-by: Matty Stratton <matty.stratton@aiven.io> * update reference to add new timezone options Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com> --------- Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com> Signed-off-by: Matty Stratton <matty.stratton@aiven.io> Co-authored-by: Matty Stratton <matt.stratton@gmail.com> Co-authored-by: Matty Stratton <matty.stratton@aiven.io>
1 parent e84e14a commit 907ad39

5 files changed

Lines changed: 67 additions & 15 deletions

File tree

‎data/events/2024/denver/main.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ ga_tracking_id: "G-9SR9GD94E0" # If you have your own Google Analytics tracking
1313
startdate: 2024-09-16T08:00:59-06:00 # The start date of your event. Leave blank if you don't have a venue reserved yet.
1414
enddate: 2024-09-17T23:59:59-06:00 # The end date of your event. Leave blank if you don't have a venue reserved yet.
1515

16+
timeoffset: "-0600"
17+
1618
# Leave CFP dates blank if you don't know yet, or set all three at once.
1719
cfp_date_start: 2023-10-31T23:59:59-06:00 # start accepting talk proposals.
1820
cfp_date_end: 2024-05-04T23:59:59-06:00 # close your call for proposals.

‎data/events/2024/london/main.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ masthead_background: "background.png"
1515
startdate: 2024-09-26T00:00:00+01:00 # The start date of your event. Leave blank if you don't have a venue reserved yet.
1616
enddate: 2024-09-27T00:00:00+01:00 # The end date of your event. Leave blank if you don't have a venue reserved yet.
1717

18+
timezone: "Europe/London"
19+
1820
# Leave CFP dates blank if you don't know yet, or set all three at once.
1921
cfp_date_start: 2023-09-22T00:00:00+01:00 # start accepting talk proposals.
2022
cfp_date_end: 2024-05-24T23:59:59+01:00 # close your call for proposals.

‎data/events/2024/rio-de-janeiro/main.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ ga_tracking_id: "" # If you have your own Google Analytics tracking ID, enter it
1313
startdate: 2024-08-24T09:00:00-03:00 # The start date of your event. Leave blank if you don't have a venue reserved yet.
1414
enddate: 2024-08-24T18:00:00-03:00 # The end date of your event. Leave blank if you don't have a venue reserved yet.
1515

16+
timezone: "America/Sao_Paulo"
17+
timeoffset: "-0300"
18+
1619
# Leave CFP dates blank if you don't know yet, or set all three at once.
1720
cfp_date_start: 2024-04-22T00:00:00-03:00 # start accepting talk proposals.
1821
cfp_date_end: 2024-05-26T00:00:00-03:00 # close your call for proposals.
@@ -326,4 +329,4 @@ program:
326329
type: custom
327330
date: 2024-08-24
328331
start_time: "19:00"
329-
end_time: "20:00"
332+
end_time: "20:00"

‎themes/devopsdays-theme/layouts/program/single.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,22 @@ <h2>Program</h2>
9595
{{- end -}}
9696
{{- end -}}
9797
<!-- new experimental program end -->
98+
99+
{{- if or $e.timeoffset $e.timezone -}}
100+
<script>
101+
var userLang = navigator.language || navigator.userLanguage;
102+
var date = new Date();
103+
var userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
104+
var userTimeAbbreviation = Intl.DateTimeFormat(userLang,{ timeZone: userTimeZone, timeZoneName: 'short' }).formatToParts().find(part => part.type==='timeZoneName').value;
105+
</script>
106+
{{- end -}}
107+
{{- if $e.timezone -}}
108+
<script>
109+
var eventTimeOffset = (Intl.DateTimeFormat(userLang,{ timeZone: "{{ $e.timezone }}", timeZoneName: 'longOffset' }).formatToParts().find(part => part.type==='timeZoneName').value).slice(3,99);
110+
var eventTimeAbbreviation = Intl.DateTimeFormat(userLang,{ timeZone: "{{ $e.timezone }}", timeZoneName: 'short' }).formatToParts().find(part => part.type==='timeZoneName').value;
111+
</script>
112+
{{- end -}}
113+
98114
<div class="row">
99115
<div class="col">
100116
<div id="accordion" role="tablist" aria-multiselectable="true">
@@ -125,6 +141,33 @@ <h5 class="mb-0">
125141
{{ .start_time }}
126142
-
127143
{{ .end_time }}
144+
{{- if $e.timezone -}}
145+
&nbsp;<script>document.write(eventTimeAbbreviation)</script>
146+
{{- end -}}
147+
{{- if or $e.timeoffset $e.timezone -}}
148+
<br>
149+
{{- if $e.timeoffset -}}
150+
<script>
151+
var localstarttime = new Date("{{- dateFormat "2006-01-02" ($.Scratch.Get "date") -}}T"+{{- .start_time -}}+":00"+{{- $e.timeoffset -}});
152+
var localendtime = new Date("{{- dateFormat "2006-01-02" ($.Scratch.Get "date") -}}T"+{{- .end_time -}}+":00"+{{- $e.timeoffset -}});
153+
</script>
154+
{{- end -}}
155+
{{- if not $e.timeoffset -}}
156+
<script>
157+
var localstarttime = new Date("{{- dateFormat "2006-01-02" ($.Scratch.Get "date") -}}T"+{{ .start_time }}+":00"+eventTimeOffset);
158+
var localendtime = new Date("{{- dateFormat "2006-01-02" ($.Scratch.Get "date") -}}T"+{{ .end_time }}+":00"+eventTimeOffset);
159+
</script>
160+
{{- end -}}
161+
<script>
162+
document.write("<strong>");
163+
document.write(String(localstarttime.getHours()).padStart(2,"0")+":"+String(localstarttime.getMinutes()).padStart(2,"0"));
164+
document.write("&nbsp;-&nbsp;");
165+
document.write(String(localendtime.getHours()).padStart(2,"0")+":"+String(localendtime.getMinutes()).padStart(2,"0"));
166+
document.write("&nbsp;");
167+
document.write(userTimeAbbreviation);
168+
document.write("</strong>");
169+
</script>
170+
{{- end -}}
128171
</div>
129172
<div class="col-lg-8 col-md-6 program-element {{ printf "program-%s" .type }}" {{ if .background_color }}style="background-color: {{ .background_color }}"{{end}}>
130173
{{- if eq .type "custom" -}}

‎themes/devopsdays-theme/reference.md‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,22 @@ The `/data/events/YYYY/CITY.main.yml` file is the main configuration file for yo
6161
### Date-related Fields
6262
All dates are in unquoted YYYY-MM-DD, like this: `variable: 2016-01-05`, or like `variable: 2016-01-05T23:59:00-06:00`
6363

64-
| Field Name | Type | Required | Description | Example |
65-
|-------------------------|------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
66-
| `startdate` | YYYY-MM-DD | No | The start date of your event. Leave blank if you don't have a venue reserved yet. | 2016-01-05 |
67-
| `enddate` | YYYY-MM-DD | No | The end date of your event. Leave blank if you don't have a venue reserved yet. | 2016-01-05 |
68-
| `cfp_date_start` | YYYY-MM-DD | No | The date you will start accepting talk proposals. Can be a blank value. | 2016-01-05 |
69-
| `cfp_date_end` | YYYY-MM-DD | No | The date you will close your call for proposals. Can be a blank value. If you set the full datetime string with correct TZ, CFP will display as open until local close time. | 2016-01-05T23:59:00-06:00 |
70-
| `cfp_date_announce` | YYYY-MM-DD | No | The date you will inform proposers of status. Can be a blank value. | 2016-01-05 |
71-
| `cfp_open` | String | No | Either "true" or "false". Can be blank. This controls whether or not the "propose" button shows on your event page. *Deprecated field; if you have set `cfp_date_start` and `cfp_date_end` they will serve the same purpose.* | "true" |
72-
| `cfp_link` | String | No | If you have a custom link for submitting proposals, add it here. This will control the Propose menu item as well as the "Propose" button. | "https://myurlhere" - reference it like "{{< event_link url-key="cfp_link" text="Propose a talk!" >}}" |
73-
| `registration_date_start` | YYYY-MM-DD | No | The date you will start accepting registration. If this is set, will make the "Register" button appear on the event's "Welcome" page. Can be a blank value. | 2016-01-05 |
74-
| `registration_date_end` | YYYY-MM-DD | No | The date you will close registration. Controls the appearance of the "Register" button on the "Welcome" page. If you set `registration_date_start` you must set `registration_date_end`. Can be a blank value (unless `registration_date_start` has been set). | 2016-01-05 |
75-
| `registration_closed` | String | No | Set this to "true" if you need to manually close registration before your registration end date. | "true" |
76-
| `registration_link` | String | No | If you have a custom registration link, enter it here. This will control the Registration menu item as well as the "Register" button. | "https://myurlhere" reference it like {{< event_link url-key="registration_link" text="Register to attend the conference!" >}} | |
77-
| `sponsor_link` | String | No | If you have a custom sponsorship link, enter it here. This will control the "Become an X Sponsor!" links. It does NOT change the "Sponsor" button. | "https://myurlhere" | |
64+
| Field Name | Type | Required | Description | Example |
65+
|------------------------------|------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|
66+
| `startdate` | YYYY-MM-DD | No | The start date of your event. Leave blank if you don't have a venue reserved yet. | 2016-01-05 |
67+
| `enddate` | YYYY-MM-DD | No | The end date of your event. Leave blank if you don't have a venue reserved yet. | 2016-01-05 |
68+
| `timeoffset` | +/-HHMM | No | The offset of the timezone of your event from UTC | "-0600" |
69+
| `timezone` | String | No | The timezone of the event [https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List) | "Europe/London" |
70+
| `cfp_date_start` | YYYY-MM-DD | No | The date you will start accepting talk proposals. Can be a blank value. | 2016-01-05 |
71+
| `cfp_date_end` | YYYY-MM-DD | No | The date you will close your call for proposals. Can be a blank value. If you set the full datetime string with correct TZ, CFP will display as open until local close time. | 2016-01-05T23:59:00-06:00 |
72+
| `cfp_date_announce` | YYYY-MM-DD | No | The date you will inform proposers of status. Can be a blank value. | 2016-01-05 |
73+
| `cfp_open` | String | No | Either "true" or "false". Can be blank. This controls whether or not the "propose" button shows on your event page. *Deprecated field; if you have set `cfp_date_start` and `cfp_date_end` they will serve the same purpose.* | "true" |
74+
| `cfp_link` | String | No | If you have a custom link for submitting proposals, add it here. This will control the Propose menu item as well as the "Propose" button. | "https://myurlhere" - reference it like "{{< event_link url-key="cfp_link" text="Propose a talk!" >}}" |
75+
| `registration_date_start` | YYYY-MM-DD | No | The date you will start accepting registration. If this is set, will make the "Register" button appear on the event's "Welcome" page. Can be a blank value. | 2016-01-05 |
76+
| `registration_date_end` | YYYY-MM-DD | No | The date you will close registration. Controls the appearance of the "Register" button on the "Welcome" page. If you set `registration_date_start` you must set `registration_date_end`. Can be a blank value (unless `registration_date_start` has been set). | 2016-01-05 |
77+
| `registration_closed` | String | No | Set this to "true" if you need to manually close registration before your registration end date. | "true" |
78+
| `registration_link` | String | No | If you have a custom registration link, enter it here. This will control the Registration menu item as well as the "Register" button. | "https://myurlhere" reference it like {{< event_link url-key="registration_link" text="Register to attend the conference!" >}} | |
79+
| `sponsor_link` | String | No | If you have a custom sponsorship link, enter it here. This will control the "Become an X Sponsor!" links. It does NOT change the "Sponsor" button. | "https://myurlhere" | |
7880

7981
### Branding Fields
8082

0 commit comments

Comments
 (0)