fix timezones in calendar

This commit is contained in:
marlon-erler
2024-07-19 00:33:55 +02:00
parent f1e9d71f0b
commit 47fdc03285
3 changed files with 51 additions and 31 deletions
+24 -15
View File
@@ -2133,9 +2133,9 @@
}
// src/Views/Objects/miniatureDayView.tsx
function MiniatureDayView(chat, messageObjects, dayToShow) {
function MiniatureDayView(chat, messageObjects, dateObject) {
const objectsForDayView = new ListState();
const dateString = dayToShow.toISOString().split("T")[0];
const dateString = dateObject.toISOString().split("T")[0];
function processObject(messageObject) {
const latest = chat.getMostRecentContent(messageObject);
if (!latest.date || latest.date != dateString) return;
@@ -2151,7 +2151,8 @@
[dayInCalendar],
() => dayInCalendar.value == dateString
);
const isToday = (/* @__PURE__ */ new Date()).toDateString() == dayToShow.toDateString();
const today = /* @__PURE__ */ new Date();
const isToday = today.getDate() == dateObject.getUTCDate() && today.getMonth() == dateObject.getUTCMonth() && today.getFullYear() == dateObject.getUTCFullYear();
messageObjects.handleAddition(processObject);
const objectConverter = (messageObject) => {
const latest = chat.getMostRecentContent(messageObject);
@@ -2172,7 +2173,7 @@
class: "day-miniature tile flex-column align-start",
style: "aspect-ratio: 1/1; overflow: hidden"
},
/* @__PURE__ */ createElement("h3", { class: "margin-0" }, dayToShow.getDate()),
/* @__PURE__ */ createElement("h3", { class: "margin-0" }, dateObject.getUTCDate()),
/* @__PURE__ */ createElement(
"div",
{
@@ -2185,14 +2186,20 @@
// src/Views/Objects/calendarView.tsx
function CalendarView(chat, messageObjects, selectedObject, isShowingObjectModal) {
const selectedDate = new Date(dayInCalendar.value);
const selectedMonth = new State(selectedDate.getMonth() + 1);
const selectedYear = new State(selectedDate.getFullYear());
bulkSubscribe([selectedMonth, selectedYear], () => updateSelectedDate());
let selectedDate = new Date(dayInCalendar.value);
const selectedMonth = new State(selectedDate.getUTCMonth() + 1);
const selectedYear = new State(selectedDate.getUTCFullYear());
bulkSubscribe(
[selectedMonth, selectedYear],
() => updateSelectedDate()
);
dayInCalendar.subscribeSilent(() => {
selectedDate = new Date(dayInCalendar.value);
});
updateSelectedDate();
function updateSelectedDate() {
selectedDate.setMonth(selectedMonth.value - 1);
selectedDate.setFullYear(selectedYear.value);
selectedDate.setUTCMonth(selectedMonth.value - 1);
selectedDate.setUTCFullYear(selectedYear.value);
dayInCalendar.value = selectedDate.toISOString().split("T")[0];
}
function previousMonth() {
@@ -2214,22 +2221,24 @@
let monthGridCells = new State([]);
dayInCalendar.subscribe((newValue) => {
const newSelectedDate = new Date(newValue);
newSelectedDate.setHours(0);
newSelectedDate.setMinutes(0);
const currentDate = /* @__PURE__ */ new Date();
monthGridCells.value = [];
currentDate.setDate(1);
currentDate.setMonth(newSelectedDate.getMonth());
currentDate.setUTCDate(1);
currentDate.setUTCMonth(newSelectedDate.getMonth());
for (let i = 0; i < 7; i++) {
monthGridCells.value.push(
/* @__PURE__ */ createElement("b", { class: "secondary ellipsis width-100" }, translation.weekdays[i])
);
}
const monthOffset = currentDate.getDay();
const monthOffset = currentDate.getDay() - 1;
for (let i = 0; i < monthOffset; i++) {
monthGridCells.value.push(/* @__PURE__ */ createElement("div", null));
}
while (currentDate.getMonth() == newSelectedDate.getMonth()) {
while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
monthGridCells.value.push(
MiniatureDayView(chat, messageObjects, new Date(currentDate))
MiniatureDayView(chat, messageObjects, currentDate)
);
currentDate.setDate(currentDate.getDate() + 1);
}
+19 -12
View File
@@ -13,16 +13,21 @@ export function CalendarView(
selectedObject: React.State<MessageObject | undefined>,
isShowingObjectModal: React.State<boolean>
) {
const selectedDate = new Date(dayInCalendar.value);
const selectedMonth = new React.State(selectedDate.getMonth() + 1);
const selectedYear = new React.State(selectedDate.getFullYear());
React.bulkSubscribe([selectedMonth, selectedYear], () => updateSelectedDate());
let selectedDate = new Date(dayInCalendar.value);
const selectedMonth = new React.State(selectedDate.getUTCMonth() + 1);
const selectedYear = new React.State(selectedDate.getUTCFullYear());
React.bulkSubscribe([selectedMonth, selectedYear], () =>
updateSelectedDate()
);
dayInCalendar.subscribeSilent(() => {
selectedDate = new Date(dayInCalendar.value);
})
updateSelectedDate();
function updateSelectedDate() {
selectedDate.setMonth(selectedMonth.value - 1);
selectedDate.setFullYear(selectedYear.value);
selectedDate.setUTCMonth(selectedMonth.value - 1);
selectedDate.setUTCFullYear(selectedYear.value);
dayInCalendar.value = selectedDate.toISOString().split("T")[0];
}
@@ -47,13 +52,15 @@ export function CalendarView(
let monthGridCells = new React.State<HTMLElement[]>([]);
dayInCalendar.subscribe((newValue) => {
const newSelectedDate = new Date(newValue);
newSelectedDate.setHours(0);
newSelectedDate.setMinutes(0);
const currentDate = new Date();
monthGridCells.value = [];
// initialize to first day of month
currentDate.setDate(1);
currentDate.setMonth(newSelectedDate.getMonth());
currentDate.setUTCDate(1);
currentDate.setUTCMonth(newSelectedDate.getMonth());
// labels
for (let i = 0; i < 7; i++) {
@@ -63,15 +70,15 @@ export function CalendarView(
}
// create blank dates starting sunday
const monthOffset = currentDate.getDay();
const monthOffset = currentDate.getDay() - 1;
for (let i = 0; i < monthOffset; i++) {
monthGridCells.value.push(<div></div>);
}
// add day views
while (currentDate.getMonth() == newSelectedDate.getMonth()) {
while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
monthGridCells.value.push(
MiniatureDayView(chat, messageObjects, new Date(currentDate))
MiniatureDayView(chat, messageObjects, currentDate)
);
currentDate.setDate(currentDate.getDate() + 1);
}
+8 -4
View File
@@ -9,11 +9,11 @@ export function MiniatureDayView(
messageObjects:
| React.ListState<MessageObject>
| React.MapState<MessageObject>,
dayToShow: Date
dateObject: Date
) {
const objectsForDayView = new React.ListState<MessageObject>();
const dateString = dayToShow.toISOString().split("T")[0];
const dateString = dateObject.toISOString().split("T")[0];
function processObject(messageObject: MessageObject) {
const latest = chat.getMostRecentContent(messageObject);
@@ -33,7 +33,11 @@ export function MiniatureDayView(
[dayInCalendar],
() => dayInCalendar.value == dateString
);
const isToday = new Date().toDateString() == dayToShow.toDateString();
const today = new Date();
const isToday =
today.getDate() == dateObject.getUTCDate() &&
today.getMonth() == dateObject.getUTCMonth() &&
today.getFullYear() == dateObject.getUTCFullYear();
messageObjects.handleAddition(processObject);
@@ -63,7 +67,7 @@ export function MiniatureDayView(
class="day-miniature tile flex-column align-start"
style="aspect-ratio: 1/1; overflow: hidden"
>
<h3 class="margin-0">{dayToShow.getDate()}</h3>
<h3 class="margin-0">{dateObject.getUTCDate()}</h3>
<div
class="flex-column gap"
children:append={[objectsForDayView, objectConverter]}