Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@remotelock/react-week-scheduler
Advanced tools
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 651 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.