Skip to content

Instantly share code, notes, and snippets.

@mihirsoni

mihirsoni/index.html

Created June 6, 2017 08:47
Show Gist options
  • Save mihirsoni/dca4ecb73dcc5636426ccda0586f02ed to your computer and use it in GitHub Desktop.
Save mihirsoni/dca4ecb73dcc5636426ccda0586f02ed to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/soteqacela
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
padding:0;
}
.left {
float: left;
}
.calendar {
width:800px;
margin:70px auto;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
float: left;
}
.times {
height:1440px;
margin-right:10px;
font-family:arial;
float:left;
margin-top:5px;
}
.slot {
height:60px;
font-weight:bold;
text-align:right;
line-height:0;
}
</style>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="root"></div>
<script id="jsbin-javascript">
/*
This is an individual Event component.
Which takes event as an object and try to render a event block.
It will also give some random Background color to it.
*/
function Event({ event: { position: { width, height, left, top }}}) {
var style = {
width: `${width}px`,
height: `${height}px`,
top: `${top}px`,
left: `${left}px`,
position: 'absolute',
backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`
}
return (
React.createElement("div", {style: style})
)
}
/*
Day calendar generate the time slots with interval
*/
function DayCalendar({startTime, endTime, interval }) {
let slots = getSlots(startTime, endTime, interval);
return (
React.createElement("div", {className: "times"},
slots.map((slot) => React.createElement("div", {className: "slot"}, slot))
));
}
/*
Container component which is combining all components.
*/
function EventCalendar({ events }) {
return(
React.createElement("div", {className: "calendar"},
React.createElement(DayCalendar, {
startTime: 9,
endTime: 21,
interval: 30}
),
React.createElement("div", {className: "events"},
events.map((event) => React.createElement(Event, {event: event}))
)
)
)
}
ReactDOM.render(
React.createElement(EventCalendar, {
events: getLayout(
[{"id":1,"start":60,"end":150},{"id":2,"start":540,"end":570},{"id":3,"start":555,"end":600},{"id":4,"start":585,"end":660}]
)}
),
document.getElementById('root')
);
// This will generate Time slots
function getSlots(start, end, interval) {
var slots = [];
var date = new Date();
date.setHours(start,0,0,0);
while(date.getHours() < end) {
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
}
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
return slots;
}
/*
A function to calcualte height width top
*/
function getLayout(events) {
var timeSlots = [];
for(let i = 0; i < 720; i++) {
timeSlots[i] = [];
}
for (let i = 0; i < events.length; i++) {
let event = events[i];
for (let j = event.start; j < event.end; j++){
timeSlots[j].push(event.id);
}
}
for(let i = 0; i < timeSlots.length; i++) {
let hSplit = 0;
let totalEventsInSlot = timeSlots[i].length;
// Try only if we have events on that slots
if (timeSlots[i].length > 0) {
for(let j = 0; j < totalEventsInSlot; j++) {
let event = events[timeSlots[i][j] -1];
if(!event.totalEventsInSlot || event.totalEventsInSlot < totalEventsInSlot) {
event.totalEventsInSlot = totalEventsInSlot;
if(!event.hConflict) {
event.hSplit = hSplit;
hSplit++;
}
}
}
}
}
// Calculate H & W
for(let i = 0; i < events.length; i++) {
let event = events[i]
let position = {}
position.height = (event.end - event.start) * 2
position.top = event.start * 2;
position.width = 600 / event.totalEventsInSlot;
position.left = event.hSplit * position.width;
event.position = position;
}
return events;
}
</script>
<script id="jsbin-source-css" type="text/css">
body {
padding:0;
}
.left {
float: left;
}
.calendar {
width:800px;
margin:70px auto;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
float: left;
}
.times {
height:1440px;
margin-right:10px;
font-family:arial;
float:left;
margin-top:5px;
}
.slot {
height:60px;
font-weight:bold;
text-align:right;
line-height:0;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">/*
This is an individual Event component.
Which takes event as an object and try to render a event block.
It will also give some random Background color to it.
*/
function Event({ event: { position: { width, height, left, top }}}) {
var style = {
width: `${width}px`,
height: `${height}px`,
top: `${top}px`,
left: `${left}px`,
position: 'absolute',
backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`
}
return (
<div style={style} />
)
}
/*
Day calendar generate the time slots with interval
*/
function DayCalendar({startTime, endTime, interval }) {
let slots = getSlots(startTime, endTime, interval);
return (
<div className="times">
{slots.map((slot) => <div className="slot">{slot}</div>)}
</div>);
}
/*
Container component which is combining all components.
*/
function EventCalendar({ events }) {
return(
<div className="calendar">
<DayCalendar
startTime={9}
endTime={21}
interval={30}
/>
<div className="events">
{events.map((event) => <Event event={event} />)}
</div>
</div>
)
}
ReactDOM.render(
<EventCalendar
events={getLayout(
[{"id":1,"start":60,"end":150},{"id":2,"start":540,"end":570},{"id":3,"start":555,"end":600},{"id":4,"start":585,"end":660}]
)}
/>,
document.getElementById('root')
);
// This will generate Time slots
function getSlots(start, end, interval) {
var slots = [];
var date = new Date();
date.setHours(start,0,0,0);
while(date.getHours() < end) {
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
}
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
return slots;
}
/*
A function to calcualte height width top
*/
function getLayout(events) {
var timeSlots = [];
for(let i = 0; i < 720; i++) {
timeSlots[i] = [];
}
for (let i = 0; i < events.length; i++) {
let event = events[i];
for (let j = event.start; j < event.end; j++){
timeSlots[j].push(event.id);
}
}
for(let i = 0; i < timeSlots.length; i++) {
let hSplit = 0;
let totalEventsInSlot = timeSlots[i].length;
// Try only if we have events on that slots
if (timeSlots[i].length > 0) {
for(let j = 0; j < totalEventsInSlot; j++) {
let event = events[timeSlots[i][j] -1];
if(!event.totalEventsInSlot || event.totalEventsInSlot < totalEventsInSlot) {
event.totalEventsInSlot = totalEventsInSlot;
if(!event.hConflict) {
event.hSplit = hSplit;
hSplit++;
}
}
}
}
}
// Calculate H & W
for(let i = 0; i < events.length; i++) {
let event = events[i]
let position = {}
position.height = (event.end - event.start) * 2
position.top = event.start * 2;
position.width = 600 / event.totalEventsInSlot;
position.left = event.hSplit * position.width;
event.position = position;
}
return events;
}</script></body>
</html>
Raw
jsbin.soteqacela.css
body {
padding:0;
}
.left {
float: left;
}
.calendar {
width:800px;
margin:70px auto;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
}
.events {
width:600px;
height:1440px;
padding: 0 10px;
margin:0 auto;
background:#ECECEC;
position:relative;
overflow:hidden;
float: left;
}
.times {
height:1440px;
margin-right:10px;
font-family:arial;
float:left;
margin-top:5px;
}
.slot {
height:60px;
font-weight:bold;
text-align:right;
line-height:0;
}
Raw
jsbin.soteqacela.js
/*
This is an individual Event component.
Which takes event as an object and try to render a event block.
It will also give some random Background color to it.
*/
function Event({ event: { position: { width, height, left, top }}}) {
var style = {
width: `${width}px`,
height: `${height}px`,
top: `${top}px`,
left: `${left}px`,
position: 'absolute',
backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`
}
return (
React.createElement("div", {style: style})
)
}
/*
Day calendar generate the time slots with interval
*/
function DayCalendar({startTime, endTime, interval }) {
let slots = getSlots(startTime, endTime, interval);
return (
React.createElement("div", {className: "times"},
slots.map((slot) => React.createElement("div", {className: "slot"}, slot))
));
}
/*
Container component which is combining all components.
*/
function EventCalendar({ events }) {
return(
React.createElement("div", {className: "calendar"},
React.createElement(DayCalendar, {
startTime: 9,
endTime: 21,
interval: 30}
),
React.createElement("div", {className: "events"},
events.map((event) => React.createElement(Event, {event: event}))
)
)
)
}
ReactDOM.render(
React.createElement(EventCalendar, {
events: getLayout(
[{"id":1,"start":60,"end":150},{"id":2,"start":540,"end":570},{"id":3,"start":555,"end":600},{"id":4,"start":585,"end":660}]
)}
),
document.getElementById('root')
);
// This will generate Time slots
function getSlots(start, end, interval) {
var slots = [];
var date = new Date();
date.setHours(start,0,0,0);
while(date.getHours() < end) {
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
}
slots.push(`${date.getHours()}:${date.getMinutes()}`)
date.setMinutes(date.getMinutes() + interval);
return slots;
}
/*
A function to calcualte height width top
*/
function getLayout(events) {
var timeSlots = [];
for(let i = 0; i < 720; i++) {
timeSlots[i] = [];
}
for (let i = 0; i < events.length; i++) {
let event = events[i];
for (let j = event.start; j < event.end; j++){
timeSlots[j].push(event.id);
}
}
for(let i = 0; i < timeSlots.length; i++) {
let hSplit = 0;
let totalEventsInSlot = timeSlots[i].length;
// Try only if we have events on that slots
if (timeSlots[i].length > 0) {
for(let j = 0; j < totalEventsInSlot; j++) {
let event = events[timeSlots[i][j] -1];
if(!event.totalEventsInSlot || event.totalEventsInSlot < totalEventsInSlot) {
event.totalEventsInSlot = totalEventsInSlot;
if(!event.hConflict) {
event.hSplit = hSplit;
hSplit++;
}
}
}
}
}
// Calculate H & W
for(let i = 0; i < events.length; i++) {
let event = events[i]
let position = {}
position.height = (event.end - event.start) * 2
position.top = event.start * 2;
position.width = 600 / event.totalEventsInSlot;
position.left = event.hSplit * position.width;
event.position = position;
}
return events;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment