ਸ਼ਡਿਊਲਰ ਅਤੇ ਡਾਟਾ ਗ੍ਰਿਡ @needless-ui/react ਵਿੱਚ React ਕੰਪੋਨੈਂਟਾਂ ਵਜੋਂ ਵੀ ਮੌਜੂਦ ਹਨ: Angular ਵਾਲੇ ਹੀ ਫ਼ੀਚਰ, ਕੀ-ਬੋਰਡ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ, ਉਹੀ ਸਟਾਈਲਸ਼ੀਟ ਅਤੇ ਉਹੀ MIT ਲਾਇਸੰਸ। ਬਾਕੀ ਕੰਪੋਨੈਂਟ ਆ ਰਹੇ ਹਨ। ਇਨ੍ਹਾਂ ਨੂੰ React 19 ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਇਹ Next.js App Router ਅਤੇ Vite ਨਾਲ ਕੰਮ ਕਰਦੇ ਹਨ।
ਇੰਸਟਾਲ ਕਰੋ
pnpm add @needless-ui/react @needless-ui/cssਸਟਾਈਲ ਇੰਪੋਰਟ ਕਰੋ
ਕੰਪੋਨੈਂਟਾਂ ਨਾਲ ਕੋਈ ਸਟਾਈਲ ਨਹੀਂ ਆਉਂਦੇ। ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਆਪਣੀ ਐਪ ਦੀ ਕਿਸੇ CSS ਫ਼ਾਈਲ ਤੋਂ ਇੱਕ ਵਾਰ ਇੰਪੋਰਟ ਕਰੋ।
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';ਲੇਅਰਾਂ Angular ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦੀਆਂ ਹਨ: ਰੀਸੈੱਟ nui ਤੋਂ ਪਹਿਲਾਂ ਦੀ ਕਿਸੇ ਲੇਅਰ ਵਿੱਚ ਜਾਂਦੇ ਹਨ, ਅਤੇ Tailwind CSS ਨਾਲ nui ਲੇਅਰ Tailwind ਦੀ base ਲੇਅਰ ਅਤੇ ਉਸ ਦੀਆਂ ਯੂਟਿਲਿਟੀਆਂ ਦੇ ਵਿਚਕਾਰ ਆਉਂਦੀ ਹੈ, ਜਿਵੇਂ ਸ਼ੁਰੂਆਤ ਕਰੋ ਗਾਈਡ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ।
ਸ਼ਡਿਊਲਰ
ਹਰ ਕੰਪੋਨੈਂਟ ਦਾ ਆਪਣਾ ਐਂਟਰੀ ਪੁਆਇੰਟ ਹੈ। ਸ਼ਡਿਊਲਰ ਤੁਹਾਡੇ ਦਿੱਤੇ events ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਵਰਤੋਂਕਾਰ ਕੋਈ ਇਵੈਂਟ ਹਿਲਾਉਂਦੇ ਹਨ ਜਾਂ ਨਵੇਂ ਇਵੈਂਟ ਲਈ ਸਮਾਂ ਚੁਣਦੇ ਹਨ, ਤਾਂ ਤੁਹਾਨੂੰ ਦੱਸਦਾ ਹੈ: ਇਵੈਂਟ ਤੁਹਾਡੇ ਕੋਲ ਹੀ ਰਹਿੰਦੇ ਹਨ।
ਡਾਟਾ ਗ੍ਰਿਡ
columns ਨੂੰ ਕੰਪੋਨੈਂਟ ਤੋਂ ਬਾਹਰ ਦੱਸੋ, ਤਾਂ ਜੋ ਗ੍ਰਿਡ ਹਰ ਰੈਂਡਰ ’ਤੇ ਆਪਣਾ ਕੰਮ ਦੁਬਾਰਾ ਨਾ ਕਰੇ। ਐਡਿਟ ਹੋਣ ’ਤੇ ਨਵੀਆਂ ਕਤਾਰਾਂ ਨਾਲ onRowsChange ਕਾਲ ਹੁੰਦਾ ਹੈ, ਅਤੇ Excel ਐਕਸਪੋਰਟ ਵਰਗੇ ਮੈਥਡ ਗ੍ਰਿਡ ਦੇ ref ’ਤੇ ਹੁੰਦੇ ਹਨ।
React ਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ API
React ਕੰਪੋਨੈਂਟ ਉਨ੍ਹਾਂ ਹੀ ਸਪੈੱਕਾਂ ’ਤੇ ਚੱਲਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ’ਤੇ Angular ਵਾਲੇ, ਇਸ ਲਈ ਉਨ੍ਹਾਂ ਦੇ API ਮੇਲ ਖਾਂਦੇ ਹਨ, ਬਸ React ਦੇ ਸ਼ਬਦਾਂ ਵਿੱਚ। API ਪੰਨੇ ਹਰ ਪ੍ਰਾਪ ਦੀ ਸੂਚੀ ਦਿੰਦੇ ਹਨ: ਸ਼ਡਿਊਲਰ ਦਾ ਅਤੇ ਡਾਟਾ ਗ੍ਰਿਡ ਦਾ।
| Angular | React |
|---|---|
ਮਾਡਲ, [(view)] | ਸਥਿਤੀ: onViewChange ਨਾਲ view, ਜਾਂ defaultView, ਤਾਂ ਜੋ ਕੰਪੋਨੈਂਟ ਉਸ ਨੂੰ ਖ਼ੁਦ ਰੱਖੇ |
ਆਊਟਪੁੱਟ, (eventClick) | ਕਾਲਬੈਕ, onEventClick |
ਟੈਂਪਲੇਟ, <ng-template nuiSchedulerEvent> | ਬਣਾਉਣ ਵਾਲਾ ਫ਼ੰਕਸ਼ਨ, renderEvent |
ਮੈਥਡ, scheduler.next() | ref ’ਤੇ ਮੈਥਡ, ref.current.next() |
children, ਟ੍ਰੀ ਡਾਟਾ ਲਈ | getChildren: React ਵਿੱਚ children ਐਲੀਮੈਂਟਾਂ ਲਈ ਹੈ |
locale, ਡਿਫ਼ਾਲਟ ਰੂਪ ਵਿੱਚ ਐਪ ਦਾ LOCALE_ID | locale, ਡਿਫ਼ਾਲਟ ਰੂਪ ਵਿੱਚ en-US |
ਸਰਵਰ ਰੈਂਡਰਿੰਗ
ਦੋਵੇਂ ਕੰਪੋਨੈਂਟ ਸਰਵਰ ’ਤੇ ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ ਅਤੇ ਫਿਰ ਹਾਈਡ੍ਰੇਟ ਹੁੰਦੇ ਹਨ। ਪੈਕੇਜ ਇਨ੍ਹਾਂ ਨੂੰ ਕਲਾਇੰਟ ਕੰਪੋਨੈਂਟ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਕੋਈ Server Component ਇਨ੍ਹਾਂ ਨੂੰ ਸੀਰੀਅਲਾਈਜ਼ ਹੋ ਸਕਣ ਵਾਲੇ ਪ੍ਰਾਪਾਂ ਨਾਲ ਰੈਂਡਰ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ nuiSchedulerFromIcs ਵਰਗੇ ਹੈਲਪਰ ਸਰਵਰ ’ਤੇ ਚੱਲਦੇ ਹਨ। ਕਾਲਬੈਕ ਬ੍ਰਾਊਜ਼ਰ ਤੱਕ ਨਹੀਂ ਜਾ ਸਕਦੇ: ਜੋ ਕੰਪੋਨੈਂਟ ਇਨ੍ਹਾਂ ਨੂੰ ਲੈਂਦਾ ਹੈ, ਉਹ ਤੁਹਾਡੇ ਆਪਣੇ ਕਿਸੇ ਕਲਾਇੰਟ ਕੰਪੋਨੈਂਟ ਵਿੱਚ ਜਾਂਦਾ ਹੈ, ਉੱਪਰਲੇ ਦੋਵਾਂ ਵਾਂਗ।
ਜੋ ਕੁਝ ਵਰਤੋਂਕਾਰ ’ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਉਹ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਤੈਅ ਹੁੰਦਾ ਹੈ: ਸ਼ਡਿਊਲਰ ਵਿੱਚ ਹੁਣ ਦੇ ਸਮੇਂ ਦੀ ਲਕੀਰ, ਅਤੇ ਅੱਜ ਕਿਹੜਾ ਦਿਨ ਹੈ। ਜਦੋਂ ਸਰਵਰ ਸ਼ਡਿਊਲਰ ਨੂੰ ਰੈਂਡਰ ਕਰੇ, ਤਾਂ ਉਸ ਨੂੰ defaultDate ਦਿਓ, ਕਿਉਂਕਿ ਜ਼ਰੂਰੀ ਨਹੀਂ ਕਿ ਸਰਵਰ ਦਾ ਅੱਜ ਵਰਤੋਂਕਾਰ ਦਾ ਵੀ ਅੱਜ ਹੋਵੇ।