obsidian-plugin/ozntel_oz-calendar
1
0
Fork 0
mirror of https://github.com/ozntel/oz-calendar.git synced 2026-07-22 07:40:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Navigation Corrections

Browse source
This commit is contained in:
Ozan Tellioglu 2023-03-10 14:19:54 +01:00
parent d6517f1863
commit 3338f5042a
3 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/calendar.tsx
View file

@ -11,6 +11,9 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
const forceUpdate = useForceUpdate();
const [selectedDay, setSelectedDay] = useState<Date>(new Date());
const [selectedDayNotes, setSelectedDayNotes] = useState<string[]>([]);
const [activeStartDate, setActiveStartDate] = useState<Date>(new Date());
useEffect(() => setActiveStartDate(selectedDay), [selectedDay]);
useEffect(() => {
const selectedDayIso = dayjs(selectedDay).format('YYYY-MM-DD');
@ -55,6 +58,18 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
minDetail="month"
view="month"
tileContent={customTileContent}
activeStartDate={activeStartDate}
onActiveStartDateChange={(props) => {
if (props.action === 'next') {
setActiveStartDate(dayjs(activeStartDate).add(1, 'month').toDate());
} else if (props.action === 'next2') {
setActiveStartDate(dayjs(activeStartDate).add(12, 'month').toDate());
} else if (props.action === 'prev') {
setActiveStartDate(dayjs(activeStartDate).add(-1, 'month').toDate());
} else if (props.action === 'prev2') {
setActiveStartDate(dayjs(activeStartDate).add(-12, 'month').toDate());
}
}}
formatMonthYear={(locale, date) => dayjs(date).format('MMM YYYY')}
/>
<>
@ -62,6 +77,7 @@ export default function MyCalendar(params: { plugin: OZCalendarPlugin }) {
<NoteListComponent
selectedDay={selectedDay}
setSelectedDay={setSelectedDay}
setActiveStartDate={setActiveStartDate}
selectedDayNotes={selectedDayNotes}
plugin={plugin}
/>

7
src/components/noteList.tsx
View file

@ -10,12 +10,13 @@ import { TFile } from 'obsidian';
interface NoteListComponentParams {
selectedDay: Date;
setSelectedDay: (selectedDay: Date) => void;
setActiveStartDate: (newActiveStartDate: Date) => void;
selectedDayNotes: string[];
plugin: OZCalendarPlugin;
}
export default function NoteListComponent(params: NoteListComponentParams) {
const { selectedDayNotes, setSelectedDay, selectedDay, plugin } = params;
const { selectedDayNotes, setSelectedDay, selectedDay, plugin, setActiveStartDate } = params;
const setNewSelectedDay = (nrChange: number) => {
let newDate = dayjs(selectedDay).add(nrChange, 'day');
@ -50,7 +51,9 @@ export default function NoteListComponent(params: NoteListComponentParams) {
<div className="oz-calendar-nav-action-left">
<BsArrowLeft size={22} onClick={() => setNewSelectedDay(-1)} />
</div>
<div className="oz-calendar-nav-action-middle">{dayjs(selectedDay).format('DD MMM YYYY')}</div>
<div className="oz-calendar-nav-action-middle" onClick={() => setActiveStartDate(selectedDay)}>
{dayjs(selectedDay).format('DD MMM YYYY')}
</div>
<div className="oz-calendar-nav-action-right">
<BsArrowRight size={22} onClick={() => setNewSelectedDay(1)} />
</div>

1
styles.css
View file

@ -114,6 +114,7 @@
vertical-align: top;
font-size: 1.1em;
color: var(--interactive-accent);
cursor: pointer;
}
.oz-calendar-nav-action-right {