diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 8f870a761..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["es2015", "react", "stage-0"],
- "plugins": ["transform-decorators-legacy"]
-}
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..fc56e3145
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+ "trailingComma": "es5",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true,
+ "printWidth": 120
+}
diff --git a/Pipfile b/Pipfile
deleted file mode 100644
index b723d0199..000000000
--- a/Pipfile
+++ /dev/null
@@ -1,11 +0,0 @@
-[[source]]
-name = "pypi"
-url = "https://pypi.org/simple"
-verify_ssl = true
-
-[dev-packages]
-
-[packages]
-
-[requires]
-python_version = "3.7"
diff --git a/Pipfile.lock b/Pipfile.lock
deleted file mode 100644
index 9a51a2828..000000000
--- a/Pipfile.lock
+++ /dev/null
@@ -1,20 +0,0 @@
-{
- "_meta": {
- "hash": {
- "sha256": "7e7ef69da7248742e869378f8421880cf8f0017f96d94d086813baa518a65489"
- },
- "pipfile-spec": 6,
- "requires": {
- "python_version": "3.7"
- },
- "sources": [
- {
- "name": "pypi",
- "url": "https://pypi.org/simple",
- "verify_ssl": true
- }
- ]
- },
- "default": {},
- "develop": {}
-}
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..b5c3ace8f
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,23 @@
+module.exports = (api, targets) => {
+ // https://babeljs.io/docs/en/config-files#config-function-api
+ const isTestEnv = api.env('test')
+
+ return {
+ babelrc: false,
+ ignore: ['./node_modules'],
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ loose: true,
+ modules: isTestEnv ? 'commonjs' : false,
+ targets: isTestEnv ? { node: 'current' } : targets,
+ },
+ ],
+ ],
+ plugins: [
+ '@babel/plugin-transform-react-jsx',
+ ['@babel/plugin-transform-typescript', { isTSX: true }],
+ ],
+ }
+}
diff --git a/example/AddMore.tsx b/example/AddMore.tsx
deleted file mode 100644
index 457f18cff..000000000
--- a/example/AddMore.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from "react";
-import { Component } from "react";
-import Scheduler, { SchedulerAddMorePopover, SchedulerData, SchedulerHeader, SchedulerViewTypes } from "../src/Scheduler";
-import { DemoData } from "./DemoData";
-import * as ExampleFunction from "./ExampleFunctions";
-import Nav from "./Nav";
-import ViewSrcCode from "./ViewSrcCode";
-import withDragDropContext from "./withDnDContext";
-
-interface IAddMoreState {
- viewModel: SchedulerData;
- headerItem: SchedulerHeader;
- left: number;
- top: number;
- height: number;
-}
-
-class AddMore extends Component<{}, IAddMoreState> {
- constructor(props: Readonly<{}>) {
- super(props);
-
- const schedulerData = new SchedulerData(ExampleFunction.getNow(), SchedulerViewTypes.Week, false, false, {
- dayMaxEvents: 2,
- weekMaxEvents: 4,
- monthMaxEvents: 4,
- quarterMaxEvents: 4,
- yearMaxEvents: 4,
- });
- schedulerData.setResources(DemoData.resources);
- schedulerData.setEvents(DemoData.events);
- this.state = {
- viewModel: schedulerData,
- headerItem: undefined,
- left: 0,
- top: 0,
- height: 0,
- };
- }
-
- public render() {
- const { viewModel } = this.state;
-
- let popover =
;
- if (this.state.headerItem !== undefined) {
- popover =
-
-
-
-
Add more
-
-
-
-
-
Basic example
-
-
-
+
+
+
+ Basic example
+
+
+
+
-
-
-
Custom event style
-
-
- {titleText}
-
;
- }
-}
-
-export default withDragDropContext(CustomEventStyle)
diff --git a/example/CustomHeader.tsx b/example/CustomHeader.tsx
deleted file mode 100644
index 4e21b51a9..000000000
--- a/example/CustomHeader.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from "react";
-import { Component, useState } from "react";
-import Scheduler, {
- SchedulerData,
- SchedulerViewTypes,
-} from "../src/Scheduler";
-import * as ExampleFunction from "./ExampleFunctions";
-import { DemoData } from "./DemoData";
-import Nav from "./Nav";
-import ViewSrcCode from "./ViewSrcCode";
-import withDragDropContext from "./withDnDContext";
-
-class CustomHeader extends Component<{}, { viewModel: SchedulerData }> {
- constructor(props: Readonly<{}>) {
- super(props);
-
- const schedulerData = new SchedulerData(ExampleFunction.getNow(), SchedulerViewTypes.Week);
- schedulerData.setResources(DemoData.resources);
- schedulerData.setEvents(DemoData.events);
- this.state = {
- viewModel: schedulerData,
- };
- }
-
- public render() {
- const { viewModel } = this.state;
-
- const leftCustomHeader = (
- Put your content here
- );
- const rightCustomHeader = (
- or here
- );
-
- return (
-
-
-
-
Custom header
-
-
-
-
-
Custom popover style example
-
-
- // {title}
- // {start.format("HH:mm")} - {end.format("HH:mm")}
- //
-
-
-
-
- {title}
-
-
-
-
-
- {start.format("HH:mm")} - {end.format("HH:mm")}
-
-
-
-
-
- { this.demoButtonClicked(eventItem); }}>Demo
-
-
-
- {
- formattedDateItems.map((formattedItem: any, index: any) => (
- $&") }} />
- ))
- }
-
- );
- }
-
- public render() {
- const { viewModel } = this.state;
-
- return (
-
-
-
-
Custom table headers (with disabled calendar popup)
-
-
-
-
-
Custom time window
-
-
-
-
-
{h3}
-
-
-
-
-
-
-
Set schedulerMaxHeight to freeze first row
-
-
-
-
-
Hide weekends
-
-
-
-
-
Infinite scroll
-
-
-
-
-
Infinite scroll 2
-
-
;
- if (this.state.headerItem !== undefined) {
- {/*popover =
-
-
-
-
Locale
-
-
-
-
- React Big Scheduler
-
- Basic
-
-
-
- Read only
-
-
-
- Locale
-
-
-
- Views
-
-
-
- Custom header
-
-
-
- Custom event style
-
-
-
- Add resource
-
-
-
- Drag&Drop
-
-
-
- Summary
-
-
-
- Add more
-
-
-
- Overlap check
-
-
-
- No cross-slot move
-
-
-
- Freeze first row
-
-
-
- Resource clickable
-
-
-
- Custom table headers
-
-
-
- Hide weekends
-
-
-
- Custom time window
-
-
-
- Infinite scroll
-
-
-
- Infinite scroll 2
-
-
-
- Custom popover style
-
-
-
-
-
-
-
-
No cross-slot move
-
-
-
-
-
Overlap check
-
-
-
-
-
Readonly view
-
-
-
-
-
Resource clickable
-
-
{resource.name} ;
-
- return (
- isDragging ? null : (
-
- {
- connectDragPreview(
- connectDragSource(dragContent),
- )
- }
-
- )
- );
- }
-}
-
-export default ResourceItem;
diff --git a/example/ResourceList.tsx b/example/ResourceList.tsx
deleted file mode 100644
index 001496073..000000000
--- a/example/ResourceList.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react";
-import { Component } from "react";
-import {
- SchedulerData,
-} from "../src/Scheduler";
-
-import DnDSource from "../src/DnDSource";
-
-class ResourceList extends Component<{
- schedulerData: SchedulerData,
- newEvent: any,
- resourceDndSource: DnDSource,
-}, {}> {
- constructor(props: Readonly<{ schedulerData: SchedulerData; newEvent: any; resourceDndSource: DnDSource; }>) {
- super(props);
- }
-
- public render() {
- const { schedulerData, newEvent, resourceDndSource } = this.props;
- const DnDResourceItem = resourceDndSource.getDragSource();
- const resources = schedulerData.resources;
- const resourceList = resources.map((item) => {
- return {task.name} ;
-
- return (
- isDragging ? null : (
-
- {
- connectDragPreview(
- connectDragSource(dragContent),
- )
- }
-
- )
- );
- }
-}
-
-export default TaskItem;
diff --git a/example/TaskList.tsx b/example/TaskList.tsx
deleted file mode 100644
index c367e6f77..000000000
--- a/example/TaskList.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Component } from "react";
-import {
- SchedulerData, SchedulerDnDSource,
-} from "../src/Scheduler";
-
-class TaskList extends Component<{
- schedulerData: SchedulerData,
- newEvent: any,
- taskDndSource: SchedulerDnDSource,
-}, {}> {
- constructor(props: Readonly<{ schedulerData: SchedulerData; newEvent: any; taskDndSource: SchedulerDnDSource; }>) {
- super(props);
- }
-
- public render() {
- const { schedulerData, newEvent, taskDndSource } = this.props;
- const DnDTaskItem = taskDndSource.getDragSource();
- const tasks = schedulerData.eventGroups;
- const taskList = tasks.map((item) => {
- return
-
Thank you for trying React Big Scheduler. Here are some tips:
-
-
- 1. SchedulerData is the view model of Scheduler. For simplicity, I put it in react state object, you'd better put it in react props object when using.
-
-
- 2. Default configs are in the SchedulerData.config object, we can modify them when needed.
-
-
- 3. Default behaviors are in the SchedulerData.behaviors object, we can modify them when needed.
-
-
- 4. The event array set to the SchedulerData should be sorted in ascending order by event.start property, otherwise there will be many rendering errors in the Scheduler component.
-
-
- 5. From the npm version 0.2.6, Scheduler will use responsive layout by default(set SchedulerData.config.schedulerWidth to a percentage instead of a number).
-
-
-
-
+
Thank you for trying React Big Scheduler. Here are some tips:
+
+
+
+ 1. SchedulerData is the view model of Scheduler. For simplicity, I put it in react state object, you'd
+ better put it in react props object when using.
+
+
+
+
+ 2. Default configs are in the SchedulerData.config object, we can modify them when needed.
+
+
+
+
+ 3. Default behaviors are in the SchedulerData.behaviors object, we can modify them when needed.
+
+
+
+
+ 4. The event array set to the SchedulerData should be sorted in ascending order by event.start property,
+ otherwise there will be many rendering errors in the Scheduler component.
+
+
+
+
+ 5. From the npm version 0.2.6, Scheduler will use responsive layout by default(set
+ SchedulerData.config.schedulerWidth to a percentage instead of a number).
+
+
+
+
+
(</>View example source code )
- );
- }
+ public render() {
+ const { srcCodeUrl } = this.props;
+ return (
+
+ (
+
+ </>View example source code
+
+ )
+
+ );
+ }
}
export default ViewSrcCode;
diff --git a/example/Views.tsx b/example/Views.tsx
index 11ce38dff..a3c1efefa 100644
--- a/example/Views.tsx
+++ b/example/Views.tsx
@@ -1,67 +1,67 @@
-import * as React from "react";
-import { Component } from "react";
-import Scheduler, {
- SchedulerData,
- SchedulerViewTypes,
- SchedulerEvent,
-} from "../src/Scheduler";
-import * as ExampleFunction from "./ExampleFunctions";
-import { DemoData } from "./DemoData";
-import Nav from "./Nav";
-import ViewSrcCode from "./ViewSrcCode";
-import withDragDropContext from "./withDnDContext";
+import * as React from 'react';
+import { Component } from 'react';
+import { Scheduler, SchedulerData, SchedulerViewTypes, SchedulerEvent } from '../lib';
+import * as ExampleFunction from './ExampleFunctions';
+import { DemoData } from './DemoData';
+import Nav from './Nav';
+import ViewSrcCode from './ViewSrcCode';
+import withDragDropContext from './withDnDContext';
class Basic extends Component<{}, { viewModel: SchedulerData }> {
- constructor(props: Readonly<{}>) {
- super(props);
+ constructor(props: Readonly<{}>) {
+ super(props);
- const schedulerData = new SchedulerData(ExampleFunction.getNow(), SchedulerViewTypes.Month, false, false, {
- eventItemPopoverEnabled: false,
- views: [
- { viewName: "Agenda View", viewType: SchedulerViewTypes.Month, showAgenda: true, isEventPerspective: false },
- { viewName: "Resource View", viewType: SchedulerViewTypes.Month, showAgenda: false, isEventPerspective: false },
- { viewName: "Task View", viewType: SchedulerViewTypes.Month, showAgenda: false, isEventPerspective: true },
- ],
- });
- schedulerData.setResources(DemoData.resources);
- schedulerData.setEvents(DemoData.eventsForTaskView);
- this.state = {
- viewModel: schedulerData,
- };
- }
+ const schedulerData = new SchedulerData(ExampleFunction.getNow(), SchedulerViewTypes.Month, false, false, {
+ eventItemPopoverEnabled: false,
+ views: [
+ { viewName: 'Agenda View', viewType: SchedulerViewTypes.Month, showAgenda: true, isEventPerspective: false },
+ { viewName: 'Resource View', viewType: SchedulerViewTypes.Month, showAgenda: false, isEventPerspective: false },
+ { viewName: 'Task View', viewType: SchedulerViewTypes.Month, showAgenda: false, isEventPerspective: true },
+ ],
+ });
+ schedulerData.setResources(DemoData.resources);
+ schedulerData.setEvents(DemoData.eventsForTaskView);
+ this.state = {
+ viewModel: schedulerData,
+ };
+ }
- public render() {
- const { viewModel } = this.state;
- return (
-
-
-
-
3 View Types (take month for example)
-
-
+
+
+
+ 3 View Types (take month for example)
+
+
+
-
-), document.getElementById("root"));
+render(
+
+ ,
+ document.getElementById('root')
+);
diff --git a/example/index.html b/example/index.html
index 728b17586..e312b6a6c 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,18 +1,16 @@
-
-
- React Big Scheduler Examples
-
+
-
+
-
-
-
\ No newline at end of file
+
+ 
- //