mirror of
https://github.com/usememos/memos.git
synced 2024-12-26 23:22:47 +08:00
fix: month grouping error in timeline page (#2861)
This commit is contained in:
parent
a16bde23f7
commit
50f7f131ea
3 changed files with 20 additions and 6 deletions
|
@ -1,6 +1,6 @@
|
|||
import { Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import { getNormalizedDateString } from "@/helpers/datetime";
|
||||
import { getNormalizedDateString, getDateWithOffset } from "@/helpers/datetime";
|
||||
|
||||
interface Props {
|
||||
// Format: 2021-1
|
||||
|
@ -26,8 +26,8 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
|
|||
|
||||
const ActivityCalendar = (props: Props) => {
|
||||
const { month: monthStr, data, onClick } = props;
|
||||
const year = new Date(monthStr).getFullYear();
|
||||
const month = new Date(monthStr).getMonth() + 1;
|
||||
const year = new Date(monthStr).getUTCFullYear();
|
||||
const month = new Date(monthStr).getUTCMonth() + 1;
|
||||
const dayInMonth = new Date(year, month, 0).getDate();
|
||||
const firstDay = new Date(year, month - 1, 1).getDay();
|
||||
const lastDay = new Date(year, month - 1, dayInMonth).getDay();
|
||||
|
@ -47,7 +47,9 @@ const ActivityCalendar = (props: Props) => {
|
|||
return (
|
||||
<div className={classNames("w-36 h-auto p-0.5 shrink-0 grid grid-cols-7 grid-flow-row gap-1")}>
|
||||
{days.map((day, index) => {
|
||||
const date = getNormalizedDateString(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`);
|
||||
const date = getNormalizedDateString(
|
||||
getDateWithOffset(`${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`),
|
||||
);
|
||||
const count = data[date] || 0;
|
||||
const isToday = new Date().toDateString() === new Date(date).toDateString();
|
||||
const tooltipText = count ? `${count} memos in ${date}` : date;
|
||||
|
|
|
@ -169,3 +169,15 @@ export function isFutureDate(t?: Date | number | string): boolean {
|
|||
const timestamp = getTimeStampByDate(t ? t : Date.now());
|
||||
return timestamp > Date.now();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates a new Date object by adjusting the provided date, timestamp, or date string
|
||||
* based on the current timezone offset.
|
||||
*
|
||||
* @param t - The input date, timestamp, or date string (optional). If not provided,
|
||||
* the current date and time will be used.
|
||||
* @returns A new Date object adjusted by the current timezone offset.
|
||||
*/
|
||||
export function getDateWithOffset(t?: Date | number | string): Date {
|
||||
return new Date(getTimeStampByDate(t) + new Date().getTimezoneOffset() * 60 * 1000);
|
||||
}
|
||||
|
|
|
@ -148,9 +148,9 @@ const Timeline = () => {
|
|||
<div className={classNames("flex shrink-0", md ? "flex-col w-40 pr-4 pl-2 pb-8" : "flex-row w-full pl-1 mt-2 mb-2")}>
|
||||
<div className={classNames("w-full flex flex-col", md && "mt-4 mb-2")}>
|
||||
<span className="font-medium text-3xl leading-none mb-1">
|
||||
{new Date(group.month).toLocaleString(i18n.language, { month: "short" })}
|
||||
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
|
||||
</span>
|
||||
<span className="opacity-60">{new Date(group.month).getFullYear()}</span>
|
||||
<span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
|
||||
<span className="text-xs opacity-40">Total: {sum(Object.values(group.data))}</span>
|
||||
</div>
|
||||
<ActivityCalendar month={group.month} data={group.data} onClick={(date) => setSelectedDay(date)} />
|
||||
|
|
Loading…
Reference in a new issue