react-weekly-planning 1.0.46 → 1.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/dist/contexts/CalendarContext.js +1 -1
- package/dist/contexts/CalendarTaskContext.js +1 -1
- package/dist/index.js +1 -1
- package/dist/types/contexts/CalendarContext.d.ts +1 -1
- package/dist/types/contexts/CalendarTaskContext.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ import React, { useState } from "react";
|
|
|
68
68
|
import {
|
|
69
69
|
Calendar,
|
|
70
70
|
CalendarTaskContextProvider
|
|
71
|
-
} from "react-
|
|
71
|
+
} from "react-weekly-planning";
|
|
72
72
|
|
|
73
73
|
const App = () => {
|
|
74
74
|
const [date] = useState(new Date());
|
|
@@ -225,6 +225,9 @@ const TaskAdder = () => {
|
|
|
225
225
|
|
|
226
226
|
For advanced users who want to build their own calendar UI from scratch (without using the `<Calendar />` component), the `CalendarTaskContext` provides all the necessary state and logic. This allows you to create highly personalized designs while leveraging the library's optimized task management.
|
|
227
227
|
|
|
228
|
+
👉 **Example of a custom Month View implementation using this approach:**
|
|
229
|
+
[Live Demo](https://month-calendar-app.vercel.app/) | [GitHub Repository](https://github.com/Yvesmorel/month-calendar-app)
|
|
230
|
+
|
|
228
231
|
### 1. Basic Setup
|
|
229
232
|
|
|
230
233
|
To build a custom calendar, wrap your components in `CalendarTaskContextProvider` and use `useCalendarTaskContext` to access the data and methods.
|
|
@@ -566,7 +569,7 @@ to create an organization that truly reflects you.
|
|
|
566
569
|
**Example**:
|
|
567
570
|
```tsx
|
|
568
571
|
import React, { useRef } from "react";
|
|
569
|
-
import { useIntersectionObserver } from "react-
|
|
572
|
+
import { useIntersectionObserver } from "react-weekly-planning";
|
|
570
573
|
|
|
571
574
|
const VirtualItem = ({ children }) => {
|
|
572
575
|
const ref = useRef(null);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext } from "react";
|
|
3
3
|
const CalendarContext = createContext({});
|
|
4
|
-
const CalendarContextProvider = ({ children, }) => {
|
|
4
|
+
export const CalendarContextProvider = ({ children, }) => {
|
|
5
5
|
return (_jsx(CalendarContext.Provider, { value: {}, children: children }));
|
|
6
6
|
};
|
|
7
7
|
export const useCalendarContext = () => useContext(CalendarContext);
|
|
@@ -13,7 +13,7 @@ const CalendarTaskContext = createContext({
|
|
|
13
13
|
getTask: () => undefined,
|
|
14
14
|
hashScope: "week"
|
|
15
15
|
});
|
|
16
|
-
const CalendarTaskContextProvider = ({ children, hashScope }) => {
|
|
16
|
+
export const CalendarTaskContextProvider = ({ children, hashScope }) => {
|
|
17
17
|
const { tasks, addTask, getTasks, updateTask, deleteTask, cleanExpiredTasks, cleanExpiredTasksByHash, isValidTask, getTask } = useCalendarTask(hashScope || "week");
|
|
18
18
|
return (_jsx(CalendarTaskContext.Provider, { value: {
|
|
19
19
|
tasks,
|
package/dist/index.js
CHANGED
|
@@ -16,5 +16,5 @@ export * from './components/VirtualGroupRow';
|
|
|
16
16
|
export * from './components/VirtualGroupRowDay';
|
|
17
17
|
export * from './components/DayContainer';
|
|
18
18
|
export { default as useCalendarDateState } from './hooks/useCalendarDateState';
|
|
19
|
-
export * from './contexts/
|
|
19
|
+
export * from './contexts/CalendarContext';
|
|
20
20
|
export * from './hooks/useIntersectionObserver';
|
|
@@ -2,6 +2,6 @@ type CalendarContextProviderPropsType = {
|
|
|
2
2
|
children: React.ReactNode;
|
|
3
3
|
};
|
|
4
4
|
type CalendarContextType = {};
|
|
5
|
-
declare const CalendarContextProvider: ({ children, }: CalendarContextProviderPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const CalendarContextProvider: ({ children, }: CalendarContextProviderPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export declare const useCalendarContext: () => CalendarContextType;
|
|
7
7
|
export default CalendarContextProvider;
|
|
@@ -18,6 +18,6 @@ type CalendarTaskContextType = {
|
|
|
18
18
|
getTask: (hash: string, taskId: string) => TaskFeildsType | undefined;
|
|
19
19
|
hashScope?: "week" | "group" | "day";
|
|
20
20
|
};
|
|
21
|
-
declare const CalendarTaskContextProvider: ({ children, hashScope }: CalendarTaskContextProviderPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const CalendarTaskContextProvider: ({ children, hashScope }: CalendarTaskContextProviderPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export declare const useCalendarTaskContext: () => CalendarTaskContextType;
|
|
23
23
|
export default CalendarTaskContextProvider;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -13,5 +13,5 @@ export * from './components/VirtualGroupRow';
|
|
|
13
13
|
export * from './components/VirtualGroupRowDay';
|
|
14
14
|
export * from './components/DayContainer';
|
|
15
15
|
export { default as useCalendarDateState } from './hooks/useCalendarDateState';
|
|
16
|
-
export * from './contexts/
|
|
16
|
+
export * from './contexts/CalendarContext';
|
|
17
17
|
export * from './hooks/useIntersectionObserver';
|