diff --git a/apps/client/src/widgets/buttons/calendar.ts b/apps/client/src/widgets/buttons/calendar.ts index 75e01af1b..286b94a14 100644 --- a/apps/client/src/widgets/buttons/calendar.ts +++ b/apps/client/src/widgets/buttons/calendar.ts @@ -53,7 +53,7 @@ const DROPDOWN_TPL = ` -
+ `; const DAYS_OF_WEEK = [ @@ -262,11 +262,10 @@ export default class CalendarWidget extends RightDropdownButtonWidget { $newWeekNumber.addClass("calendar-date-exists").attr("data-href", `#root/${weekNoteId}`); } } else { - $newWeekNumber = $("").addClass("calendar-week-number-disabled"); + } $newWeekNumber.addClass("calendar-week-number").attr("data-calendar-week-number", weekNoteId); - $newWeekNumber.append($("").html(String(weekNumber))); return $newWeekNumber; } diff --git a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx index 1e149041c..b8b94ba73 100644 --- a/apps/client/src/widgets/launch_bar/CalendarWidget.tsx +++ b/apps/client/src/widgets/launch_bar/CalendarWidget.tsx @@ -4,11 +4,11 @@ import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_w import { Dayjs, dayjs } from "@triliumnext/commons"; import appContext from "../../components/app_context"; import { useTriliumOptionInt } from "../react/hooks"; -import { VNode } from "preact"; import clsx from "clsx"; import "./CalendarWidget.css"; import server from "../../services/server"; -import { getMonthInformation } from "./CalendarWidgetUtils"; +import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils"; +import { VNode } from "preact"; interface DateNotesForMonth { [date: string]: string; @@ -50,14 +50,14 @@ function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: return (
- {firstDayISO !== firstDayOfWeekISO && } - + {firstDayISO !== firstDayOfWeekISO && } +
) } -function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { +function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) { const prevMonth = date.subtract(1, 'month').format('YYYY-MM'); const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState(); @@ -65,15 +65,29 @@ function PreviousMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { server.get(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth); }, [ date ]); - return dates.map(date => ( - - )); + return ( + <> + + {dates.map(date => )} + + ) } -function CurrentMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { - return dates.map(date => ( - - )); +function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) { + let dateCursor = date; + const currentMonth = date.month(); + const items: VNode[] = []; + while (dateCursor.month() === currentMonth) { + const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO); + if (dateCursor.isoWeekday() === firstDayOfWeekISO) { + items.push() + } + + items.push() + dateCursor = dateCursor.add(1, "day"); + } + + return items; } function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) { @@ -102,3 +116,8 @@ function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, date ); } +function CalendarWeek({ weekNumber }: { weekNumber: number }) { + return ( + {weekNumber} + ) +} diff --git a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts index 16d057107..e7a59aa4a 100644 --- a/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts +++ b/apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts @@ -1,6 +1,6 @@ import { Dayjs } from "@triliumnext/commons"; -interface DateRangeInfo { +export interface DateRangeInfo { weekNumbers: number[]; dates: Dayjs[]; } @@ -8,7 +8,6 @@ interface DateRangeInfo { export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) { return { prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO), - currentMonth: getCurMonthDays(date, firstDayOfWeekISO), nextMonth: getNextMonthDays(date, firstDayOfWeekISO) } } @@ -29,24 +28,6 @@ function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: n return { weekNumbers: [ weekNumber ], dates }; } -function getCurMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo { - let dateCursor = date; - const currentMonth = date.month(); - const dates: Dayjs[] = []; - const weekNumbers: number[] = []; - while (dateCursor.month() === currentMonth) { - const weekNumber = getWeekNumber(date, firstDayOfWeekISO); - if (date.isoWeekday() === firstDayOfWeekISO) { - weekNumbers.push(weekNumber); - } - - dates.push(dateCursor); - dateCursor = dateCursor.add(1, "day"); - - } - return { weekNumbers, dates }; -} - function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo { const lastDayOfMonth = date.endOf('month'); const lastDayISO = lastDayOfMonth.isoWeekday(); @@ -64,7 +45,7 @@ function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo return { weekNumbers: [], dates }; } -function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number { +export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number { const weekStart = getWeekStartDate(date, firstDayOfWeekISO); return weekStart.isoWeek(); }