-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #74 from bruceharrison1984/0.2.0
0.2.0
- Loading branch information
Showing
27 changed files
with
1,567 additions
and
1,568 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,101 @@ | ||
| --- | ||
| title: Day Component | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The `DayComponent` is used to display individual days on the calendar grid. Various properties are used to control the color, indicators, and text of the calendar day. | ||
|
|
||
| ## Component Props | ||
|
|
||
| ```tsx | ||
| export interface DayComponentProps { | ||
| isCurrentMonth: boolean; | ||
| dateNumber: number; | ||
| isToday: boolean; | ||
| isOverflowed: boolean; | ||
| events: InternalCalendarEvent[]; | ||
| onClick: (event: InternalCalendarEvent[]) => void; | ||
| } | ||
| ``` | ||
|
|
||
| | Property | Type | Description | | ||
| | -------------- | ------------------------- | ------------------------------------------------------------------------------- | | ||
| | isCurrentMonth | `boolean` | True if this date occurs in the current visible month | | ||
| | isToday | `boolean` | True is this date is equal to today's date | | ||
| | dateNumber | `number` | The numeric date of the day | | ||
| | events | `InternalCalendarEvent[]` | Array of _all_ events that occur or span this date (both hidden and visible) | | ||
| | isOverflowed | `boolean` | True if the date has more events than can visible fit. (Some events are hidden) | | ||
|
|
||
| ## Dealing with hidden events | ||
|
|
||
| Once one or more events overflow the DayComponent container, `isOverflowed` will be set to true and the UI updated to show the additional events indicator, presuming you are using the default Day component. | ||
|
|
||
| Once events overflow the day container, they will also begin being hidden. All events are contained within the `events` array, with the `visible` property indicating the visibility of each event on that day. | ||
|
|
||
| ## Example (DefaultDay) | ||
|
|
||
| ```tsx live noInline | ||
| // This demo is an example of what a custom component might look like if you wanted to override the default. | ||
| // If you are using the default components, you don't need to worry about this. | ||
|
|
||
| const DefaultDay = ({ | ||
| isCurrentMonth, | ||
| isToday, | ||
| dateNumber, | ||
| events, | ||
| isOverflowed, | ||
| onClick, | ||
| }) => { | ||
| const dayHeader = isToday ? ( | ||
| <div className="default-day-header--indicator"> | ||
| <span className="default-day-header--text">{dateNumber}</span> | ||
| </div> | ||
| ) : ( | ||
| <span className="default-day-header--text">{dateNumber}</span> | ||
| ); | ||
|
|
||
| const hiddenEventTooltip = | ||
| events.length > 1 ? `(${events.length}) hidden events` : '(1) hidden event'; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`default-day ${ | ||
| isCurrentMonth ? 'default-day-current' : 'default-day-sibling' | ||
| }`} | ||
| > | ||
| <div className="default-day-header">{dayHeader}</div> | ||
| {isOverflowed && ( | ||
| <div | ||
| className="additional-events-indicator" | ||
| title={hiddenEventTooltip} | ||
| onClick={() => onClick(events)} | ||
| > | ||
| ... | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const events = [...generateEvents(2)]; | ||
|
|
||
| render( | ||
| <div className="schedulely" style={{ height: '7em', width: '7em' }}> | ||
| <DefaultDay | ||
| isCurrentMonth={true} | ||
| isToday={true} | ||
| dateNumber={21} | ||
| events={events} | ||
| isOverflowed={true} | ||
| onClick={() => alert(JSON.stringify(events))} | ||
| /> | ||
| </div> | ||
| ); | ||
| ``` | ||
| --- | ||
| title: Day Component | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The `DayComponent` is used to display individual days on the calendar grid. Various properties are used to control the color, indicators, and text of the calendar day. | ||
|
|
||
| ## Component Props | ||
|
|
||
| ```tsx | ||
| export interface DayComponentProps { | ||
| isCurrentMonth: boolean; | ||
| date: Date; | ||
| isToday: boolean; | ||
| isOverflowed: boolean; | ||
| events: InternalCalendarEvent[]; | ||
| onMoreEventsClick: (event: InternalCalendarEvent[]) => void; | ||
| onDayClick: (day: Date) => void; | ||
| } | ||
| ``` | ||
|
|
||
| | Property | Type | Description | | ||
| | ----------------- | ------------------------------------------ | ------------------------------------------------------------------------------- | | ||
| | isCurrentMonth | `boolean` | True if this date occurs in the current visible month | | ||
| | isToday | `boolean` | True is this date is equal to today's date | | ||
| | date | `Date` | JS Date object for the day | | ||
| | events | `InternalCalendarEvent[]` | Array of _all_ events that occur or span this date (both hidden and visible) | | ||
| | isOverflowed | `boolean` | True if the date has more events than can visible fit. (Some events are hidden) | | ||
| | onMoreEventsClick | `(event: InternalCalendarEvent[]) => void` | This function should be called whenever the 'More Events' indicator is clicked | | ||
| | onDayClick | `(day: Date) => void` | This function should be called whenever a Day Component is clicked on | | ||
|
|
||
| ## Dealing with hidden events | ||
|
|
||
| Once one or more events overflow the DayComponent container, `isOverflowed` will be set to true and the UI updated to show the additional events indicator, presuming you are using the default Day component. | ||
|
|
||
| Once events overflow the day container, they will also begin being hidden. All events are contained within the `events` array, with the `visible` property indicating the visibility of each event on that day. | ||
|
|
||
| ## Example (DefaultDay) | ||
|
|
||
| ```tsx live noInline | ||
| // This demo is an example of what a custom component might look like if you wanted to override the default. | ||
| // If you are using the default components, you don't need to worry about this. | ||
|
|
||
| const DefaultDay = ({ | ||
| isCurrentMonth, | ||
| isToday, | ||
| date, | ||
| events, | ||
| isOverflowed, | ||
| onMoreEventsClick, | ||
| onDayClick, | ||
| }) => { | ||
| const dayHeader = isToday ? ( | ||
| <div className="default-day-header--indicator"> | ||
| <span className="default-day-header--text">{date.getDate()}</span> | ||
| </div> | ||
| ) : ( | ||
| <span className="default-day-header--text">{date.getDate()}</span> | ||
| ); | ||
|
|
||
| const hiddenEventTooltip = | ||
| events.length > 1 ? `(${events.length}) hidden events` : '(1) hidden event'; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`default-day ${ | ||
| isCurrentMonth ? 'default-day-current' : 'default-day-sibling' | ||
| }`} | ||
| onClick={() => onDayClick(JSON.stringify(date))} | ||
| > | ||
| <div className="default-day-header">{dayHeader}</div> | ||
| {isOverflowed && ( | ||
| <div | ||
| className="additional-events-indicator" | ||
| title={hiddenEventTooltip} | ||
| onClick={() => onMoreEventsClick(JSON.stringify(events))} | ||
| > | ||
| ... | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const events = [...generateEvents(2)]; | ||
|
|
||
| render( | ||
| <div className="schedulely" style={{ height: '7em', width: '7em' }}> | ||
| <DefaultDay | ||
| isCurrentMonth={true} | ||
| isToday={true} | ||
| date={new Date()} | ||
| events={events} | ||
| isOverflowed={true} | ||
| onMoreEventsClick={alert} | ||
| onDayClick={alert} | ||
| /> | ||
| </div> | ||
| ); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,88 @@ | ||
| --- | ||
| title: Header Component | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The `HeaderComponent` defines how the large banner at the top of the calendar appears. It can include as many or | ||
| as few controls as you want. | ||
|
|
||
| ## Component Props | ||
|
|
||
| ```tsx | ||
| export interface HeaderProps { | ||
| month: string; | ||
| year: number; | ||
| isCurrentMonth: boolean; | ||
| onNextMonth: () => void; | ||
| onNextYear: () => void; | ||
| onPrevMonth: () => void; | ||
| onPrevYear: () => void; | ||
| } | ||
| ``` | ||
|
|
||
| | Property | Type | Description | | ||
| | -------------- | --------------- | ------------------------------------------------------------------------------------ | | ||
| | month | `string` | The current month the calendar is displaying | | ||
| | year | `number` | The current year the calendar is displaying | | ||
| | isCurrentMonth | `boolean` | True if the selected month is the same as the current month | | ||
| | onNextMonth | `() => void` | Calling this functions moves to the next month | | ||
| | onNextYear | `() => void` | Calling this functions moves to the same month of the next year | | ||
| | onPrevMonth | `() => void` | Calling this functions moves to the previous month | | ||
| | onPrevYear | `() => void` | Calling this functions moves to the same month of the previous year | | ||
| | componentSize | `ComponentSize` | Enum value that indicates the current size of the calendar (used for element sizing) | | ||
|
|
||
| ## Example (DefaultHeader) | ||
|
|
||
| ```tsx live noInline | ||
| // This demo is an example of what a custom component might look like if you wanted to override the default. | ||
| // If you are using the default components, you don't need to worry about this. | ||
|
|
||
| const DefaultHeader = ({ | ||
| month, | ||
| year, | ||
| onNextMonth, | ||
| onNextYear, | ||
| onPrevMonth, | ||
| onPrevYear, | ||
| isCurrentMonth, | ||
| componentSize, | ||
| }) => ( | ||
| <div className="header-layout"> | ||
| <button | ||
| className="header-button" | ||
| title="Previous Month" | ||
| onClick={onPrevMonth} | ||
| > | ||
| <strong>{'‹'}</strong> | ||
| </button> | ||
| <button | ||
| className="header-button" | ||
| title="Previous Year" | ||
| onClick={onPrevYear} | ||
| > | ||
| <strong>{'«'}</strong> | ||
| </button> | ||
|
|
||
| <div className="header-banner"> | ||
| <span | ||
| className="header-text" | ||
| style={{ fontSize: componentSize === 'large' ? '1.5em' : '1.1em' }} | ||
| > | ||
| {month} - {year} | ||
| </span> | ||
| {isCurrentMonth && ( | ||
| <div className="current-month-indicator" title="Current Month" /> | ||
| )} | ||
| </div> | ||
|
|
||
| <button className="header-button" title="Next Year" onClick={onNextYear}> | ||
| <strong>{'»'}</strong> | ||
| </button> | ||
| <button className="header-button" title="Next Month" onClick={onNextMonth}> | ||
| <strong>{'›'}</strong> | ||
| </button> | ||
| </div> | ||
| ); | ||
|
|
||
| render( | ||
| <div className="schedulely"> | ||
| <DefaultHeader month="December" year="2022" componentSize={'large'} /> | ||
| </div> | ||
| ); | ||
| ``` | ||
| --- | ||
| title: Header Component | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| The `HeaderComponent` defines how the large banner at the top of the calendar appears. It can include as many or | ||
| as few controls as you want. | ||
|
|
||
| ## Component Props | ||
|
|
||
| ```tsx | ||
| export interface HeaderProps { | ||
| month: string; | ||
| year: number; | ||
| isCurrentMonth: boolean; | ||
| onNextMonth: () => void; | ||
| onNextYear: () => void; | ||
| onPrevMonth: () => void; | ||
| onPrevYear: () => void; | ||
| } | ||
| ``` | ||
|
|
||
| | Property | Type | Description | | ||
| | -------------- | ------------ | ------------------------------------------------------------------- | | ||
| | month | `string` | The current month the calendar is displaying | | ||
| | year | `number` | The current year the calendar is displaying | | ||
| | isCurrentMonth | `boolean` | True if the selected month is the same as the current month | | ||
| | onNextMonth | `() => void` | Calling this functions moves to the next month | | ||
| | onNextYear | `() => void` | Calling this functions moves to the same month of the next year | | ||
| | onPrevMonth | `() => void` | Calling this functions moves to the previous month | | ||
| | onPrevYear | `() => void` | Calling this functions moves to the same month of the previous year | | ||
|
|
||
| ## Example (DefaultHeader) | ||
|
|
||
| ```tsx live noInline | ||
| // This demo is an example of what a custom component might look like if you wanted to override the default. | ||
| // If you are using the default components, you don't need to worry about this. | ||
|
|
||
| const DefaultHeader = ({ | ||
| month, | ||
| year, | ||
| onNextMonth, | ||
| onNextYear, | ||
| onPrevMonth, | ||
| onPrevYear, | ||
| isCurrentMonth, | ||
| }) => ( | ||
| <div className="header-layout"> | ||
| <button | ||
| className="header-button" | ||
| title="Previous Month" | ||
| onClick={onPrevMonth} | ||
| > | ||
| <strong>{'‹'}</strong> | ||
| </button> | ||
| <button | ||
| className="header-button" | ||
| title="Previous Year" | ||
| onClick={onPrevYear} | ||
| > | ||
| <strong>{'«'}</strong> | ||
| </button> | ||
|
|
||
| <div className="header-banner"> | ||
| <span className="header-text"> | ||
| {month} - {year} | ||
| </span> | ||
| {isCurrentMonth && ( | ||
| <div className="current-month-indicator" title="Current Month" /> | ||
| )} | ||
| </div> | ||
|
|
||
| <button className="header-button" title="Next Year" onClick={onNextYear}> | ||
| <strong>{'»'}</strong> | ||
| </button> | ||
| <button className="header-button" title="Next Month" onClick={onNextMonth}> | ||
| <strong>{'›'}</strong> | ||
| </button> | ||
| </div> | ||
| ); | ||
|
|
||
| render( | ||
| <div className="schedulely"> | ||
| <DefaultHeader month="December" year="2022" /> | ||
| </div> | ||
| ); | ||
| ``` |
Oops, something went wrong.