Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@bitnoi.se/react-scheduler
Advanced tools
@bitnoi.se/react-scheduler - npm Package Compare versions
Comparing version 0.1.5 to 0.2.0
@@ -13,5 +13,5 @@ declare const allZoomLevel: readonly [0, 1]; | ||
| /** | ||
| * Language code: "en" | "pl" | ||
| * Language code: "en" | "pl" | "de" | ||
| */ | ||
| lang?: LangCodes; | ||
| lang?: LangCodes | string; | ||
| isFiltersButtonVisible?: boolean; | ||
@@ -26,6 +26,19 @@ maxRecordsPerPage?: number; | ||
| includeTakenHoursOnWeekendsInDayView?: boolean; | ||
| /** | ||
| * show tooltip when hovering over tiles items | ||
| * @default true | ||
| */ | ||
| showTooltip?: boolean; | ||
| translations?: LocaleType[]; | ||
| }; | ||
| declare type LangCodes = "en" | "pl"; | ||
| declare type LangCodes = "en" | "pl" | "de"; | ||
| declare type LocaleType = { | ||
| id: string; | ||
| lang: Translation; | ||
| translateCode: string; | ||
| dayjsTranslations: string | ILocale | undefined; | ||
| }; | ||
| declare type ParsedDatesRange = { | ||
@@ -101,2 +114,22 @@ startDate: Date; | ||
| declare type Topbar = { | ||
| filters: string; | ||
| next: string; | ||
| prev: string; | ||
| today: string; | ||
| view: string; | ||
| }; | ||
| declare type Translation = { | ||
| feelingEmpty: string; | ||
| free: string; | ||
| loadNext: string; | ||
| loadPrevious: string; | ||
| over: string; | ||
| taken: string; | ||
| topbar: Topbar; | ||
| search: string; | ||
| week: string; | ||
| }; | ||
| export declare type ZoomLevel = ZoomLevelTuple[number]; | ||
@@ -103,0 +136,0 @@ |
| { | ||
| "name": "@bitnoi.se/react-scheduler", | ||
| "version": "0.1.5", | ||
| "version": "0.2.0", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
106
readme.md
@@ -141,10 +141,84 @@ <div align="center"> | ||
| | Property Name | Type | Default | Description | | ||
| | ------------------------------------ | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | zoom | `0` or `1` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days | | ||
| | filterButtonState | `number` | 0 | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) | | ||
| | maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page | | ||
| | lang | `en` or `pl` | en | scheduler's language | | ||
| | includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week | | ||
| | Property Name | Type | Default | Description | | ||
| | ------------------------------------ | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | zoom | `0` or `1` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days | | ||
| | filterButtonState | `number` | 0 | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) | | ||
| | maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page | | ||
| | lang | `en` or `pl` | en | scheduler's language | | ||
| | includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week | | ||
| | showTooltip | `boolean` | `true` | show tooltip when hovering over tiles | | ||
| | translations | `LocaleType[]` | `undefined` | option to add specific langs translations | | ||
| #### Translation object example | ||
| ```ts | ||
| import enDayjsTranslations from "dayjs/locale/en"; | ||
| const langs: LocaleType[] = [ | ||
| { | ||
| id: "en", | ||
| lang: { | ||
| feelingEmpty: "I feel so empty...", | ||
| free: "Free", | ||
| loadNext: "Next", | ||
| loadPrevious: "Previous", | ||
| over: "over", | ||
| taken: "Taken", | ||
| topbar: { | ||
| filters: "Filters", | ||
| next: "next", | ||
| prev: "prev", | ||
| today: "Today", | ||
| view: "View" | ||
| }, | ||
| search: "search", | ||
| week: "week" | ||
| }, | ||
| translateCode: "en-EN", | ||
| dayjsTranslations: enDayjsTranslations | ||
| } | ||
| ]; | ||
| <Scheduler | ||
| // ... // | ||
| config={{ | ||
| lang: "en", | ||
| translations: langs | ||
| }} | ||
| />; | ||
| ``` | ||
| #### Scheduler LocaleType Object | ||
| | Property Name | Type | Description | | ||
| | ----------------- | -------------------------- | ---------------------------------- | | ||
| | id | `string` | key is needed for selecting lang | | ||
| | lang | `Translation` | object with translations | | ||
| | translateCode | `string` | code that is saved in localStorage | | ||
| | dayjsTranslations | `string ILocale undefined` | object with translation from dayjs | | ||
| #### Scheduler Translation Object | ||
| | Property Name | Type | | ||
| | ------------- | -------- | | ||
| | feelingEmpty | `string` | | ||
| | free | `string` | | ||
| | loadNext | `string` | | ||
| | loadPrevious | `string` | | ||
| | over | `string` | | ||
| | taken | `string` | | ||
| | search | `string` | | ||
| | week | `string` | | ||
| | topbar | `Topbar` | | ||
| ##### Scheduler Topbar Object | ||
| | Property Name | Type | | ||
| | ------------- | -------- | | ||
| | filters | `string` | | ||
| | next | `string` | | ||
| | prev | `string` | | ||
| | today | `string` | | ||
| | view | `string` | | ||
| ##### Scheduler Data | ||
@@ -215,2 +289,20 @@ | ||
| - How to customize Scheduler dimensions | ||
| Scheduler is position absolutely to take all available space. If you want to have fixed dimensions wrap Scheduler inside a div with position set to relative. | ||
| Example using styled components: | ||
| ```ts | ||
| export const StyledSchedulerFrame = styled.div` | ||
| position: relative; | ||
| height: 40vh; | ||
| width: 40vw; | ||
| `; | ||
| <StyledSchedulerFrame> | ||
| <Scheduler {...}/> | ||
| </StyledSchedulerFrame> | ||
| ``` | ||
| ### Known Issues | ||
@@ -217,0 +309,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.82%
303851
- Lines of code
- increased by2.3%
4840
- Number of lines in readme file
- increased by38.49%
331
No dependency changes