lrojas94/react-timeslot-calendar

A calendar component which allows users to select and reserve available timeslots so that they can setup a meeting and/or event.

React Timeslot Calendar

A calendar component which allows users to select and reserve avaiblable timeslots so that they can setup a meeting and/or event.

Dependencies

• React 15.4.4 and up
• MomentJS
• CalendarJS

Installation

npm install --save react-timeslot-calendar

Usage:

import moment from 'moment';
import ReactTimeslotCalendar from 'react-timeslot-calendar';

...
render() {
  return (
    <ReactTimeslotCalendar
      initialDate={moment().format()}
    />
  );
}
...

Props

Required Props:

Note: All format strings are read with moment, so any format supported by moment is available here.

• initialDate (String): An ISO formatted date compatible with momentJS. A moment instance is also a valid input.

Optional

• timeslots (Object): An array of available timeslots in the format:

let timeslots = [
    ['1', '2'], // 1:00 AM - 2:00 AM
    ['2', '3'], // 2:00 AM - 3:00 AM
    ['4', '6'], // 4:00 AM - 6:00 AM
    '5', // 5:00 AM
    ['4', '6', '7', '8'], // 4:00 AM - 6:00 AM - 7:00AM - 8:00AM
];

By default, one hour timeslots from 12:00AM to 11:00PM are provided.

• timeslotProps (Object): How the timeslots will be interpreted by the calendar. By default, the format goes as follows:

let timeslotProps = {
    format: 'h', // Each element in the timeslot array is an Hour
    showFormat: 'h:mm A', // They will be displayed as Hour:Minutes AM/PM
}

• disabledTimeslots (Object): Timeslots disabled by default. a startDate and format should be provided. The resulting date must match with one of the timeslots.

// sample:
let disabledTimeslots = {[
    {
        startDate: 'April 30th 2017, 12:00:00 AM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
    {
        startDate: 'May 1st 2017, 3:00:00 PM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
    {
        startDate: 'May 5th 2017, 6:00:00 PM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
]}

• maxTimeslots (Number): The maximum number of timeslots a user can select. Default value is 1.

• renderDays (Object): Days of the week to be rendered in the calendar. As an example, if we wanted to remove weekends, all we have to do is pass:

let ignoreWeekends = {
  'saturdays': false,
  'sundays': false,
};

By default, all week days are displayed.

• startDateInputProps (Object): Few props to modify how the input for startDate will behave. Only allows name and class.

//sample
let startDateInputProps = {
    class: 'some-random-class',
    name: 'my-start-date-input-name',
};

• endDateInputProps (Object): Same idea as startDateInputProps but instead takes effect in the endDate input.

• onSelectTimeslot (Function): A callback which takes as parameters selectedTimeslots (array) and lastSelectedTimeslot (object). Every timeslot object contains startDate and endDate, both of which are MomentJS objects.

let onSelectTimeslot = (allTimeslots, lastSelectedTimeslot) => {
  /**
   * All timeslot objects include `startDate` and `endDate`.

   * It is important to note that if timelots provided contain a single
   * value (e.g: timeslots = [['8'], ['9', '10']) then only `startDate` is filled up with
   * the desired information.
   */
  console.log(lastSelectedTimeslot.startDate); // MomentJS object.

}

Development

We're open to any help and support, so feel free to open up a PR if you happen to have a great idea! Also, feel free to take up any issues (if available).

Feel free to download the project and make up some changes! Dev. environment is run with npm run dev.

react-timeslot-calendar's Issues

Support for different time slots of each day.

Would be cool if for each day you could specify different timeslots. ATM it looks like you can only specify a single array of timeslots for each day of the week. With timeslots of each day of the week it could be more dynamically driven to show things like taken timeslots etc.

Please, could you add Typescript version?

Update to React 16

When clicking on any timeslot, I get this error in my console:

Uncaught TypeError: this.updater.enqueueCallback is not a function
This is because the project is using React 15. Can you update the repo? Thanks for the wonderful project -- it's exactly what I needed!

Change start-day of week.

Is it possible to set the default start day of the week? Monday instead of Sunday?

Anyways to change the timeslot from 1 hour to 30mins only

Anyways to change the timeslot from 1 hour to 30mins only

I have used the timeslotprops. Its display half hours slots but when i try to select the whole column get selected. Can anyone please help out in this

Regarding the timeslot issue for different days showing different time. The issue has not been resolved yet. I think the npm package has not been updated yet.

How to update colors?

Translate day names

I'm able to translate the top date field by setting: moment.locale('de');
but it does not translate the day names...

here some list are not working

as per your demo reference. https://lrojas94.github.io/react-timeslot-calendar/
package Documentation demo code also not mention about with this example

i am using react 16

 <ReactTimeslotCalendar
      initialDate={moment().format()}
      
      timeslots = { [
        ['12:00:00' ],
        ['10'],
        ['18:00'],
        ['18:15', '18:30'],
    ] }
    maxTimeslots ={[1]}
   ignoreWeekends = {
    ['sundays']
  }  
    disabledTimeslots = {[
    {
        startDate: 'April 30th 2020, 12:00:00 AM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
    {
        startDate: 'May 1st 2020, 10:00:00 PM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
    {
        startDate: 'May 5th 2017, 6:00:00 PM',
        format: 'MMMM Do YYYY, h:mm:ss A',
    },
]}
    />

list of not working
time slote display :

<div class="tsc-day"><div class="tsc-day__title"><span>Wednesday (26)</span></div><div class="tsc-timeslot tsc-timeslot--selected">12:00 PM</div><div class="tsc-timeslot tsc-timeslot--selected">6:00 PM - 6:00 PM</div><div class="tsc-timeslot">10:00 AM</div><div class="tsc-timeslot tsc-timeslot--selected">6:00 PM</div></div>

Disable slote not wokring

Uncaught TypeError: this.updater.enqueueCallback is not a function

When clicking on any timeslot, I get this error in my console:
Uncaught TypeError: this.updater.enqueueCallback is not a function
This is because the project is using React 15. Can you update the repo? Thanks for the wonderful project -- it's exactly what I needed!

Change slot duration

How can I change the timeslot from 1 hour to 30 minutes?

I tried:

timeslotProps={{
format: "h:mm",
showFormat: "h:mm A"
}}

with timeslots={[["9:30", "10:00"], ["10:00", "10:30"], ["18"]]}

This causes a bug and selecting a timeslot selects the whole column.

Any idea?

onClick selectedtimeslots

nice react calendar, it works well but how about passing up the selectedtimeslots , how can my parent component know what time slots user selected or unselected ?

Uncaught TypeError: this.updater.enqueueCallback is not a function

Dear react-timeslot-calendar Team,
The module is amazing and fills the requirements. But when I click on particular timeslot it is giving below error

Uncaught TypeError: this.updater.enqueueCallback is not a function

Any fix is available for this error.

Thanks in advance.

Ability to select multiple times

It would be wonderful if a user can select a whole bunch of times, and they will stay highlighted, unless the user clicks on them again. This way, a user can select a whole range of times they are available.

Is this already a feature that I am just missing?

Ability to show only specified timeslots

When one person marks their availability, I'd like for other users to be able to see this person's availability, also in react-timeslot-calendar. So is there a way give an array, and show a calendar with just the times in that array?