DOCSEARCHbyAlgolia
Submit Docs

React Schedule Meeting

website·Indexed 29 days ago

https://react-schedule-meeting.netlify.app/docs

A simple, agnostic React UI for scheduling. The documentation provides a comprehensive reference for all available props, styling methods, utility functions like timeSlotDifference, and TypeScript types such as AvailableTimeslot.

Tokens
4.5K
Snippets
29
Records
38
Agent score
75%

What's inside React Schedule Meeting

  1. Use React components in documentation via MDX

    The documentation supports MDX, allowing you to write JSX and embed interactive React components directly within Markdown files. This enables a mix of standard Markdown formatting (like bold and italic text) and functional React code in the same document.

  2. Understand the react-schedule-meeting usage flow

    The ScheduleMeeting component acts as a UI layer agnostic to scheduling logic. It takes available date ranges and event durations, then returns the specific time slot selected by the user.

    The operational flow is as follows:

    1. The developer provides an array of available date ranges.
    2. The component automatically splits these ranges into individual start times based on the provided event duration prop.
    3. Upon user confirmation, the component emits a result containing:
      • The selected start time.
      • The original time slot that contained the selection.
      • The original time slot split into two new slots (to help the developer track remaining availability).

  3. Understand the react-schedule-meeting usage flow

    The ScheduleMeeting component acts as a UI layer agnostic to scheduling logic. It accepts available date ranges and event durations, then allows a user to select a specific start time. When a user confirms a selection, the component emits the selected start time, the original time slot used, and the remaining split time slots to help the parent application track remaining availability.

  4. Report bugs and feature requests

    Bugs and feature requests are tracked via GitHub Issues. When reporting a bug:

    • Report only one bug per issue.
    • Provide clear, minimal reproduction steps so the issue can be replicated with minimal effort.

    For new feature requests or enhancements, use the provided feature template on GitHub.

  5. Insert code blocks with syntax highlighting

    Use triple backticks (```) to create code blocks. To enable syntax highlighting, specify the language name immediately after the first set of backticks.
    var s = 'JavaScript syntax highlighting';
alert(s);
    s = "Python syntax highlighting"
print(s)

  6. Write semantic commit messages for React Schedule Meeting

    The project uses a specific semantic commit format: <type>(<scope>): <subject>. The <scope> is optional. The subject should be in the present tense and use lower case (not title case).

    Commit types include:

    • feat: New feature for the user.
    • fix: Bug fix for the user.
    • docs: Documentation changes.
    • style: Formatting/styling changes (no production code change).
    • refactor: Refactoring production code.
    • test: Adding or refactoring tests.
    • chore: Updating build tasks/scripts.
    feat: allow overriding of webpack config

  7. Set up a local development environment for React Schedule Meeting

    To contribute to the React Schedule Meeting codebase, follow these installation steps:

    1. Install Yarn.
    2. Clone the repository and run yarn install in the root directory.
    3. To run the documentation site locally, navigate to the docs directory and run yarn start.
    # Install dependencies
yarn install

# Start docs server
cd docs
yarn start

  8. Create tables in Markdown

    Tables are created using pipes (|) and dashes (-). There must be at least three dashes separating each header cell. Column alignment can be controlled using colons (:) in the separator row.
    | Left Aligned | Centered | Right Aligned |
| :--- | :---: | ---: |
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |

  9. Reset component state after a start time is selected

    To keep the ScheduleMeeting component in view or allow a user to select multiple start times, use the resetDate() and resetSelectedTimeState() methods provided within the StartTimeEventEmit object in the onStartTimeSelect callback.
    const handleTimeslotClicked = (startTimeEventEmit) => {
  // Reset the date and time selection state
  startTimeEventEmit.resetDate();
  startTimeEventEmit.resetSelectedTimeState();
  
  alert(`Time selected: ${format(startTimeEventEmit.startTime, 'cccc, LLLL do h:mm a')}`);
};

<ScheduleMeeting
  // ... other props
  onStartTimeSelect={handleTimeslotClicked}
/>;

  10. Write content using GitHub-flavored Markdown

    The documentation system supports GitHub-flavored Markdown (GFM) for content creation. This includes standard elements such as headers (H1-H6), emphasis (bold, italics, strikethrough), lists (ordered and unordered), links, images, blockquotes, and tables.
    # H1 Header
## H2 Header
**Bold Text**
_Italic Text_
~~Strikethrough~~

* Unordered List Item
1. Ordered List Item

[Link Text](https://example.com)
![Alt Text](https://example.com/image.png)

  11. Install react-schedule-meeting

    Install the react-schedule-meeting package using either yarn or npm to integrate the meeting scheduling component into your React project.
    # Using yarn
yarn add react-schedule-meeting

# Using npm
npm i react-schedule-meeting

  12. Document breaking changes in pull requests

    If a pull request introduces a breaking change, you must include the following template in the PR description to explain the impact and migration path.
    ### New breaking change here

- **Who does this affect**:
- **How to migrate**:
- **Why make this breaking change**: