osome-kit v1.2.25

Table of Contents

• Table of Contents
• About The Project
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • 1. Before using osome-kit please import module.
  • 2. Implement below codes in the react render method.
    • Calendar
    • Gantt
  • Supported Props
    • OSCalendar Props
    • OSGantt Props
    • More Info
      • Options
      • Categories
      • Content
      • Events
• Roadmap
• Contributing
• License
• Contact
• Reference

About The Project

This project support you can switching calendar & gantt easily.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

npm install npm@latest -g

• react

npm install --save react react-dom

Installation

1. Npm install

   npm install --save osome-kit

Usage

1. Before using osome-kit please import module.

import { OSCalendar, OSGantt } from 'osome-kit'

2. Implement below codes in the react render method.

Calendar

 <OSCalendar
            options={this.state.options}
            categories={this.state.categories}
            onClickSchedule={this.onClickSchedule}
            onChangedSchedule={this.onChangedSchedule}
            onDragEndTile={(start, end, renderOption) => {
              const order = Math.round(Math.random() * 10) % (this.state.categories.length || 1)
              const category = this.state.categories[order]
              const index = category.events.length
              const data = (category === undefined) ? { title: 'This is Title', detail: 'This is Detail', style: { color: '#fff', backgroundColor: '#f00' }, index: index, order: order, startDate: start, endDate: end } : {
                title: category.content.title, detail: '', style: { color: '#fff', backgroundColor: category.content.style.color }, index: index, order: order, startDate: start, endDate: end
              }
              this.setState(update(this.state, { categories: { [order]: { events: { $push: [data] } } } }))
            }} />

Gantt

<OSGantt style={{width: '100%', padding: '0'}} ref={this.osGantt} categories={this.state.categories} options={this.state.options}
          onChangedSchedule={this.onChangedSchedule}
          onChangedCategory={this.onChangedCategory}
          onClickSchedule={this.onClickSchedule}
          onDragEndTile={(row, start, end, renderOption) => {
            const category = this.state.categories[row]
            const data = { title: category.content.title, detail: 'This is Detail', style: { color: '#fff', backgroundColor: category.content.style.color }, order: row, startDate: start, endDate: end, index: category.events.length }
            this.setState(update(this.state, { categories: { [row]: { events: { $push: [data] } } } }))
          }}
        />

Supported Props

OSCalendar Props

OSGantt Props

More Info

Options

Categories

Content

• In Example

Events

• In Example

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

GiPyeong Lee - @gipyeong - gipyeong.lee@gmail.com

Project Link: https://github.com/gipyeong-lee/osome-kit

Reference

Best Readme Template