Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: allow scrolling 1 day at the time #266

Merged
merged 12 commits into from
Oct 7, 2022
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -118,7 +118,8 @@ See [CHANGELOG.md](docs/CHANGELOG.md) for details.
| `editEventConfig` | _{bottom: bool, top: bool, left: bool, right: bool}_ | null_ | `{bottom: true}` | Sides allowed to be edited. |
| **_Week-view <br> customizations_** |
| `startHour` | _Number_, in hours | `8` (8 am) | Vertical position of the week-view in the first render (vertically in the agenda). |
| `weekStartsOn` | _Number_ | `1` (Monday) | First day of the week, i.e. day to show at the left of the week-view (0 is Sunday, 1 is Monday, and so on). Only useful when `numberOfDays === 7` or `fixedHorizontally` is true. |
| `pageStartAt` | _{left: number, weekday: number}_ | `{left:0}` | Indicates what date to show in the top-left corner. If `left = value` provided, the `selectedDate` will appear at `value` days from the left. If `weekday = value` _(e.g. tuesday = 2)_ is provided, the latest tuesday will appear in the left. |
| `allowScrollByDay` | _Boolean_ | `false` | When `true`, the component can scroll horizontally one day at the time. When `false`, the horizontal scroll can only be done one page at the time (i.e. `numberOfDays` at the time). |
| `showTitle` | _Boolean_ | `true` | Show or hide the selected month and year in the top-left corner (a.k.a the title). |
| `hoursInDisplay` | _Number_, in hours | `6` | Amount of hours to display vertically in the agenda. Increasing this number will make the events look smaller. |
| `beginAgendaAt` | _Number_, in minutes | `0` (0h) | Time of day to start the agenda at the top (grid above is left out). For example, for 8 am set `beginAgendaAt={8*60}`. |
@@ -190,9 +191,11 @@ There are some fields in the `EventItem` that provide extra customizations for e

### Methods

* **`goToDate(date, animated = true)`**: navigate to a custom date.
* **`goToNextPage(animated = true)`**: navigate to the next page (to the future).
* **`goToPrevPage(animated = true)`**: navigate to the previous page (to the past).
* **`goToDate(date, {animated = true, left: number = null})`**: navigate to a custom date. If `left = value` is provided, the target `date` will appear at `value` days from the left (e.g. use `left = 0` to show `date` at the most left). Note: `left` will require using `allowScrollByDay={true}` in most cases.
* **`goToNextDay({animated = true})`**: navigate to the next day (to the future).
* **`goToPrevDay({animated = true})`**: navigate to the previous day (to the past).
* **`goToNextPage({animated = true})`**: navigate to the next page (to the future).
* **`goToPrevPage({animated = true})`**: navigate to the previous page (to the past).
* **`scrollToTime(minutes, options = { animated = false })`**: scroll vertically to a time in the day, provided in minutes. For example, scroll to 13:00 hrs: `ref.scrollToTime(13 * 60)`.

To save a reference to the component:
5 changes: 5 additions & 0 deletions example/App.js
Original file line number Diff line number Diff line change
@@ -84,6 +84,10 @@ const EDIT_EVENT_CONFIG = {
right: true,
};

const PAGE_START_AT = {
weekday: 1,
};

const eventsReducer = (prevEvents, actionPayload) => {
const {event, newStartDate, newEndDate} = actionPayload;
return [
@@ -191,6 +195,7 @@ const App = ({}) => {
events={events}
selectedDate={new Date()}
numberOfDays={7}
pageStartAt={PAGE_START_AT}
onEventPress={handlePressEvent}
onEventLongPress={handleLongPressEvent}
onGridClick={handlePressGrid}
24 changes: 19 additions & 5 deletions index.d.ts
Original file line number Diff line number Diff line change
@@ -34,6 +34,11 @@ export interface EventComponentProps {
};
}

export interface PageStartAtOptions {
left: number;
weekday: number;
}

export interface WeekViewProps {
events: WeekViewEvent[];
selectedDate: Date;
@@ -164,13 +169,22 @@ export interface WeekViewProps {
startHour?: number;

/**
* First day of the week, i.e. day to show at the left of the week-view
* (0 is Sunday, 1 is Monday, and so on). Only useful when numberOfDays === 7
* or fixedHorizontally is true.
* Indicates what date to show in the top-left corner.
*
* If `left = value` provided, the `selectedDate` will appear
* at `value` days from the left.
*
* Default value: 1 (Monday)
* If `weekday = value` _(e.g. tuesday = 2)_ is provided,
* the latest tuesday will appear in the left.
*/
pageStartAt?: PageStartAtOptions;

/**
* When `true`, the component can scroll horizontally one day at the time.
* When `false`, the horizontal scroll can only be done one page
* at the time (i.e. `numberOfDays` at the time).
*/
weekStartsOn?: number;
allowScrollByDay?: boolean;

/**
* Show or hide the selected month and year in the top-left corner (a.k.a the title).
Loading