bibekg / react-schedule-selector Goto Github PK

It says :

numDays
type: number

description: The number of days to show, startin from today

required: no

default value: 7

I believe 'startin' should be starting in description.
If you allow me, I am happy to correct that and do PR to here.
However, let me know where is the source code of your docs in npm so that I can fix the typo.
thanks !!

Looks like the project is written in TypeScript. However, I am not able to get the typing from my editor.

Could not find a declaration file for module 'react-schedule-selector'. './node_modules/react-schedule-selector/dist/lib/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-schedule-selector` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-schedule-selector';`ts(7016)

Is there any way to use days of the week Monday, Tuesday, etc. without relating directly to the date?

Get availability for all Mondays for example.

So I like this library but I'm having trouble using it. As you can see below, the column headers are specific dates: 6/10,6/11, 6/12, ... etc.

However for my use case I want the user to specify hours within a generic week. So instead of specific dates, I want the column headers to be Monday, Tuesday, ... Friday.

Does this app currently support this use case? If not I can create a PR for it, just wanted to check to see if I'm possibly missing something.

Hai @bibekg , thank you for the best schedule selector i know..
i have request about time hours selector, can the hour format be added minutes?

for example:

when I npm install this plugin, I get:

https://paste.thezomg.com/75610/00978693/

Even when I've run npm i date-fn, I'm still running into this issue.

Do I have the wrong version of date-fn? I have [email protected]

Please help me out! I would really appreciate it, this is a sexy version of when2meet!!

Compiling doesn't succeed, error thrown

Failed to compile.

./node_modules/react-schedule-selector/dist/lib/ScheduleSelector.js
Module not found: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/frontend/node_modules/react-schedule-selector/dist/lib'

Hi I am having an issue about changing startDate in order to essentially cycle through weeks at a time. I have a button set up to change the startDate state and tried to forceUpdate in order to refresh the scheduling table but the dates do not change. When I console.log(this.state) the startDate was increased by a week.

Hi!
Is there anyway to add selected days ? (i want to pull dates from the db and mark them as selected)
here is what i am trying :

        <ScheduleSelector
        selectionScheme="linear"
          startDate={startDate}
          selection={schedule}
          className={"overflow-y-auto h-96"}
          numDays={7}
          unselectedColor={'#EDF2F3'}
          selectedColor={'#5289B5'}
          dateFormat="dddd"
          hoveredColor={'#AFD8F2'}
          minTime={0}
          maxTime={24}
          onChange={handleClick}
          renderDateCell={scheduledates}
        />
      </div>

(scheduledates are the dates pulled from the db)

Hi,

I found a bug when you using square selection scheme over the 3rd of Oct, the time selected is not a square any more.

Do you kno whow to fix it?

Is there any way to change the language that is displayed from dateFormat? I've tried using moment.js, but that doesn't seem to work.

Thanks in advance!

Add the option to block dates and times (like, if you aren't available at the selected time)

Hello! I currently save users' availabilities in Firebase and want to allow them to update them later. Is there a way i can load the existing schedule onto the rendered schedule selector, so that times/dates they selected previously will appear as dark blue and they can add/remove times as they wish? I have successfully read the data from firebase and saved it to this.state.schedule, but am struggling to get it to display on the selector. Thanks!

react-dom.development.js:67 Warning: React does not recognize the selectedColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase selectedcolor instead. If you accidentally passed it from a parent component, remove it from the DOM element.

same as rowGap、columnGap...

Hi there! If we want to allow users to make multiple types of selections (e.g. "preferred" times and "available" times, designated by different colors) on the calendar, how would you suggest doing that? Thanks!

As discussed in this thread: #23

Please can I request an enhancement to prevent the user from selecting certain cells. For any given day I know which cells are available to book and which have already been booked. I therefore need to be able to prevent the user from selecting the slots which have already been chosen by someone else.

The cells which has a "disabled" state should be styled differently to make it clear that they are not selectable and obviously would not respond to click events.

I'm having trouble getting the component to work on mobile, namely the ability to touch and drag over the tiles. I believe it has something to do with the touchstart Event Listener. I'm wondering if anyone else has struggled with this before and if there is a quick fix for it.

Is it possible to disable dragging selection? Neiter 'square' nor 'linear' selectionScheme fits my needs, I would like to only have click/touch to select.

Hi,

I believe there's an issue with the dates being duplicated in the date array passed into "onChange".
This can be reproduced by:

1. Select a cell (e.g. Cell A).
2. Click an unselected cell (e.g. Cell B) and simultaneously drag it onto the selected Cell A.

Array will contain ["Cell A", "Cell B", "Cell A"].

Problem reproducible in sandbox:
https://codesandbox.io/s/objective-pateu-y8lr0?file=/src/App.js

Currently using the following as a temporary workaround:

  const [schedule, setSchedule] = React.useState([])

  // ...

  const handleChange = (newSchedule) => {
    // setSchedule(schedule) // has duplicates - below will filter date to be unique.
    setSchedule([...new Set(schedule.map(date => +date))].map(timestamp => new Date(timestamp)));
  }

Thanks :) - Really appreciate your work!

Is it possible to make an horizontal drag and drop.

In general, let's say that being able to drag the event you dropped on the calendar horizontally on a specific time range, you can create a repeated event.

Here is a use case where you can understand the usage. This week, every day at the same time range 10:00 - 11:00, I have to go to the gym. So, you drop an event on Monday at 10 - 11, then you drag it horizontally till Friday only to the specific time range and as a callback you'll have all the dates you dragged the event.

can we have a small mode? small mode is very important to me because the scheduler is way too long on my chrome extension, and I can't change the height of the cells. its not nice for the user to have to scroll to fill out all the times

unfortunately even if i use renderDateCell to make each cell 15px height, it won't change the height of the cells. the cells seem to have a fix height of 25px.