Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
@remotelock/react-week-scheduler
Advanced tools
Weekly downloads
Readme
@remotelock/react-week-scheduler
yarn add @remotelock/react-week-scheduler
import React, { useState } from 'react';
import 'resize-observer-polyfill/dist/ResizeObserver.global';
import { TimeGridScheduler, classes } from '@remotelock/react-week-scheduler';
import '@remotelock/react-week-scheduler/index.css';
const rangeStrings = [
['2019-03-04 00:15', '2019-03-04 01:45'],
['2019-03-05 09:00', '2019-03-05 10:30'],
['2019-03-06 22:00', '2019-03-06 22:30'],
['2019-03-07 01:30', '2019-03-07 03:00'],
['2019-03-07 05:30', '2019-03-07 10:00'],
['2019-03-08 12:30', '2019-03-08 01:30'],
['2019-03-09 22:00', '2019-03-09 23:59'],
];
const defaultSchedule = rangeStrings.map(range =>
range.map(dateString => new Date(dateString)),
);
function App() {
const [schedule, setSchedule] = useState(defaultSchedule);
return (
<TimeGridScheduler
classes={classes}
originDate={new Date('2019-03-04')}
schedule={schedule}
onChange={setSchedule}
/>
);
}
react-week-scheduler
ships with a set of default styles for convenience. The styles are compiled as CSS Modules class names. The components exported from the package do not import the styles by default. Instead, they expect a classes
prop to be passed.
The class names need to be available at runtime as a regular JS object.
To use the default styles, import the default classes object as well as the styles file and pass it to the component:
import { TimeGridScheduler, classes } from '@remotelock/react-week-scheduler';
import '@remotelock/react-week-scheduler/index.css';
function App() {
return <TimeGridScheduler classes={classes} {...otherProps} />;
}
The stylesheet @remotelock/react-week-scheduler/index.css
has scoped class names precompiled, and the classes
object has a mapping of class names to scoped class names. You do not need to have your bundle configured for CSS modules.
This library should work on any modern browser.
However, a global polyfill for ResizeObserver
is required since ResizeObserver
is currently only supported by Chrome 64+.
The following web platform features are used:
touch-action: none
position: sticky
Touch events are handled properly, with a 300ms delay on the initial touch start event to allow for scrolling.
The component should work fine on any modern mobile browser. However, due to lack of support for touch-action: none
on iOS Safari, dragging or resizing time blocks may not work very well.
FAQs
![Travis (.org)](https://img.shields.io/travis/remotelock/react-week-scheduler.svg) ![npm](https://img.shields.io/npm/v/@remotelock/react-week-scheduler.svg)
The npm package @remotelock/react-week-scheduler receives a total of 569 weekly downloads. As such, @remotelock/react-week-scheduler popularity was classified as not popular.
We found that @remotelock/react-week-scheduler demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.