reactjs-schedule-calendar

1.0.2 • Public • Published

Reactjs-schedule-calendar

react package to handle daily calendar schedules

Quick Start

1. Import reactjs-schedule-calendar into your react.js project.

(You should import react first,The version of react must be more than 16.x)

Using build tools:

npm install --save reactjs-schedule-calendar

Using scheduler in Project:

import DailySchedule from 'reactjs-schedule-calendar'
import 'reactjs-schedule-calendar/dist/index.css'

2. Now you have it. The simplest usage:

import React, { Component } from 'react'

import DailySchedule from 'reactjs-schedule-calendar'
import 'reactjs-schedule-calendar/dist/index.css'

const exclude = [
  { start: 0, end: 540 },
  { start: 1080, end: 1440 },
  { start: 840, end: 900 }
]
const metaData = {'name': 'demo'}

export default class DailyScheduler extends Component {
  constructor(props) {
    super(props)

    this.onMoveEvent = this.onMoveEvent.bind(this)

    this.state = {
      appointments: [
        { id: 0, start: 540, end: 600 },
        { id: 1, start: 660, end: 690 },
        { id: 2, start: 720, end: 750 },
        { id: 3, start: 780, end: 840 },
      ]
    }
  }

  onMoveEvent(data) {
    this.setState({
      appointments: this.state.appointments.map(appointment => {
        if (appointment.id === data.source.id) {
          const duration = data.source.end - data.source.start
          return { ...appointment, start: data.target.start, end: data.target.start + duration }
        }

        return appointment
      })
    })
    console.log(data)
  }

  addAppointment(data) {
    this.setState({
      appointments: [
        ...this.state.appointments,
        { start: data.start, end:data.end, id: this.state.appointments.length },
      ]
    });
    console.log(data)
  }


  render() {
    return (
      <DailySchedule
        slices={10}
        excludeRanges={exclude}
        appointments={this.state.appointments}
        onDrop={this.onMoveEvent}
        BucketComponent={( data ) => <button onClick={() => this.addAppointment(data)}>+</button>}
        EventComponent={({ data }) => <div>Appointment {data}</div>}
        metaData={metaData}
      />
    )
  }
}

Props in Reactjs-schedule-calendar

Props name Type Description
slices number schedule time interval
excludeRanges object of array exclude from the ranges
appointments object of array appointment slots
onDrop function on mouse drag
BucketComponent it will return start & end time of slot and metaData
EventComponent it will create slots interval
metaData object this object will return in bucket component

Package Sidebar

Install

npm i reactjs-schedule-calendar

Weekly Downloads

7

Version

1.0.2

License

MIT

Unpacked Size

3.22 MB

Total Files

8

Last publish

Collaborators

  • rahul21dev
  • goldy87