This project forked from react-grid-layout/react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React.
Home Page: https://strml.github.io/react-grid-layout/examples/0-showcase.html
License: MIT License
The programme here has 2 tracks and 3 sessions:
And the programme looks like this visually:
The API structure from the endpoint legacy/events/448551/programme
{
"event": {
"_id": "events/448551",
"_key": "448551",
"timeZone": 60,
"title": "mm"
},
"colors": [
{
"_id": "colors/448565",
"_key": "448565",
"primary": "#fc7054",
"secondary": "#ffffff",
"title": "Orange"
},
{
"_id": "colors/448562",
"_key": "448562",
"primary": "#c5e77c",
"secondary": "#ffffff",
"title": "Lime"
},
{
"_id": "colors/448568",
"_key": "448568",
"primary": "#efc1a5",
"secondary": "#ffffff",
"title": "Sand"
},
{
"_id": "colors/448555",
"_key": "448555",
"primary": "#142bfa",
"secondary": "#ffffff",
"title": "Ocean"
},
{
"_id": "colors/448571",
"_key": "448571",
"primary": "#8900fa",
"secondary": "#ffffff",
"title": "Purple"
},
{
"_id": "colors/448559",
"_key": "448559",
"primary": "#49adf3",
"secondary": "#ffffff",
"title": "Sky"
}
],
"areas": [],
"rooms": [],
"tracks": [
{
"_id": "tracks/2025971",
"_key": "2025971",
"color": "colors/448565",
"title": "track 2"
},
{
"_id": "tracks/448574",
"_key": "448574",
"color": "colors/448555",
"title": "Stage 1"
}
],
"splits": [
{
"_id": "splits/448585",
"_key": "448585",
"areas": [],
"finish": "2018-04-15T15:00:00.000Z",
"rooms": [],
"start": "2018-04-15T11:00:00.000Z",
"title": "Day 3",
"tracks": [
"tracks/448574",
"tracks/2025971"
]
},
{
"_id": "splits/448578",
"_key": "448578",
"areas": [],
"finish": "2018-04-08T15:00:00.000Z",
"rooms": [],
"start": "2018-04-08T07:00:00.000Z",
"title": "Day 1",
"tracks": [
"tracks/448574",
"tracks/2025971"
]
},
{
"_id": "splits/448582",
"_key": "448582",
"areas": [],
"finish": "2018-04-09T15:00:00.000Z",
"rooms": [],
"start": "2018-04-09T08:00:00.000Z",
"title": "Day 2",
"tracks": [
"tracks/448574",
"tracks/2025971"
]
}
],
"speakers": [],
"tasks": [
{
"_id": "programmeTasks/2026012",
"_key": "2026012",
"description": "",
"finish": "2018-04-08T09:00:00.000Z",
"rooms": [],
"start": "2018-04-08T08:00:00.000Z",
"title": "Add session name",
"tracks": [
"tracks/2025971"
],
"speakers": []
},
{
"_id": "programmeTasks/2025996",
"_key": "2025996",
"description": "",
"finish": "2018-04-08T08:00:00.000Z",
"rooms": [],
"start": "2018-04-08T07:00:00.000Z",
"title": "Add session name",
"tracks": [
"tracks/448574"
],
"speakers": []
},
{
"_id": "programmeTasks/2026034",
"_key": "2026034",
"description": "",
"finish": "2018-04-08T10:00:00.000Z",
"rooms": [],
"start": "2018-04-08T09:00:00.000Z",
"title": "Add session name",
"tracks": [
"tracks/448574"
],
"speakers": []
}
]
}
Can we distinguish between drag and click events? e.g. for when we have to know the difference between when dragging sessions and opening the drawer when clicking a session?
And for when we need to have buttons on a sessions like the color picker.
Can we add a hover state for the where sessions can be added? something like this to indicate on hover that you can click and drag to add sessions?
Could we also create a state when resizing the a session that time on the sessions reflects the change, like when adding a session so the time indicates the action?
Estimate how long would it take to implement this prototype as is (with the above additions) in the tool to replace the programme in that module?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.