Comments (5)
Hey guys @bibekg @ultimaustin,
I needed this feature as well. Now, I build it myself and it is working fine! In my version, you are able the assign a blocked prop to the ScheduleSelector Element, and those Cells will be filtered from the selectionDraft. The blocked dates are represented in red and don't have any Event-Listeners assigned to them. If they are included in a date range they will also be filtered from the selectionDraft!
I'm not sure how I can contribute to this project and send my implemented feature to you guys. This is my first time adding a feature to an npm package that's not my own.
Would appreciate it, if you guys could check it out and maybe implement it into the package. Would be so cool. So what do in need to do for you to check it out? Branch it?
Thank you for this Scheduler, it works really well and the programming is mint 🍃
from react-schedule-selector.
That's wonderful @MaxKicw - thanks for implementing it and for the kind words! I think you can fork the repo, then create a pull request with your proposed changes (see this guide). I'd be more than happy to give it a review!
from react-schedule-selector.
Started implementing this feature in #38 but I have a question for you @ultimaustin -- what method of specifying dates to block would be better?
Option 1
An array of Date
objects -- this requires that the date objects match exactly the dates of the cells (via a comparison of .toISOString()
). This also means you need to be wary of what value you're using for hourlyChunks
to ensure that all the cells you want to block in a time window are being blocked.
<ScheduleSelector
// ...
blockedTimes={[
new Date('2020-11-22T20:00:00.000Z'),
new Date('2020-11-22T21:00:00.000Z'),
new Date('2020-11-22T22:00:00.000Z'),
new Date('2020-11-22T23:00:00.000Z'),
new Date('2020-11-22T24:00:00.000Z')
]}
/>
or
Option 2
An array of date ranges (start and end Date
s, inclusive of the start, exclusive of the end) -- this lets you specify a large amount of cells to block with a short syntax but will be a bit more verbose if you just want to specify a single time cell here and there.
<ScheduleSelector
// ...
blockedTimeRanges={[
{ from: new Date('2020-11-22T20:00:00.000Z'), to: new Date('2020-11-22T24:00:00.000Z') },
]}
/>
from react-schedule-selector.
Hey guys,
I'm really needing this feature, any update on this?
from react-schedule-selector.
can we make it readonly
from react-schedule-selector.
Related Issues (20)
- Blocked dates HOT 5
- Updating the component when startDate changes HOT 2
- Trouble getting schedule to work on mobile? HOT 8
- Trouble installing HOT 2
- Small mode HOT 2
- [Docs] I found typo in its documentation in npm HOT 1
- Make example website mobile friendly
- Possible feature HOT 1
- can't resolve web.dom-collections.iterator on installation HOT 1
- Disable dragging selection
- Use days of week without dates HOT 1
- Square Selection Scheme Issue
- Possible Bug with Duplicated Dates on Drag Selection
- Multi-language HOT 1
- No Typing HOT 1
- TypeError: this.props.renderDateCell is not a function HOT 1
- Possible to add multiple "selection" levels? HOT 1
- Possible to display a given set of dates/times on the schedule without user selection? HOT 1
- react-dom.development.js:67 Warning: React does not recognize the `selectedColor` prop on a DOM element
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-schedule-selector.