Skip to content

Commit

Permalink
calendar work
Browse files Browse the repository at this point in the history
  • Loading branch information
philipstubbs13 committed Oct 3, 2018
1 parent d4e4bd7 commit 6c7f218
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 12 deletions.
23 changes: 16 additions & 7 deletions client/src/containers/Landing/Calendar.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
// Code sandbox example
// https://codesandbox.io/s/p94ypzrrj7

// React BigCalendar documentation
// http://intljusticemission.github.io/react-big-calendar/examples/index.html#api

// import React
import React, { Component } from 'react';
// Import react calendar component
import BigCalendar from 'react-big-calendar';
// Import moment for formatting dates.
import moment from 'moment';
// Import placeholder events for now.
// Import material ui components
import Button from '@material-ui/core/Button';
import events from './events';
// Import calendar css file.
import 'react-big-calendar/lib/css/react-big-calendar.css';
// import landing page css file
import './Landing.css';

moment.locale('en');
// BigCalendar.momentLocalizer(moment);
Expand All @@ -21,7 +28,7 @@ const allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);
class Calendar extends Component {
state = {
view: 'month',
// date: 'new Date(2018, 3, 10),'
// date: 'new Date(2018, 3, 10)',
date: '',
width: '100%',
};
Expand All @@ -33,21 +40,23 @@ class Calendar extends Component {
height: window.innerHeight
}); */
});
console.log((new Date(2018, 9, 3)));
console.log(new Date().getMonth());
}

render() {
const { date, view, width } = this.state;
const { date, view, width, } = this.state;

return (
<div style={{ height: 700 }}>
<button type="button" onClick={() => this.setState({ view: 'day' })}>Day</button>
<button type="button" onClick={() => this.setState({ view: 'month' })}>Month</button>
<Button variant="contained" className="app-btn calendar-btn" type="button" onClick={() => this.setState({ view: 'day' })}>Day</Button>
<Button variant="contained" className="app-btn calendar-btn" type="button" onClick={() => this.setState({ view: 'month' })}>Month</Button>
<BigCalendar
localizer={localizer}
style={{ height: 500, width }}
toolbar={false}
events={events}
step={60}
style={{ height: 500, width, marginTop: 30 }}
toolbar={true}
events={events}
views={allViews}
view={view}
onView={() => { }}
Expand Down
2 changes: 1 addition & 1 deletion client/src/containers/Landing/EventCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class EventCard extends Component {
</Button>
<Button className="app-btn delete-event-btn" variant="contained" color="primary" size="small">
<span className={classes.btnText}>Interested</span>
<i class="far fa-thumbs-up" />
<i className="far fa-thumbs-up" />
</Button>
</Grid>
</CardActions>
Expand Down
4 changes: 4 additions & 0 deletions client/src/containers/Landing/Landing.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,8 @@
background-color: #8FD5A6 !important;
border: 1px solid var(--main-bg-color) !important ;
color: black !important;
}

.calendar-btn {
margin-right: 20px !important;
}
8 changes: 4 additions & 4 deletions client/src/containers/Landing/events.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ export default [
{
title: 'All Day Event very long title',
allDay: true,
start: new Date(2015, 3, 0),
end: new Date(2015, 3, 1)
start: new Date(2018, 9, 3),
end: new Date(2018, 9, 4)
},
{
title: 'Long Event',
start: new Date(2015, 3, 7),
end: new Date(2015, 3, 10)
start: new Date(2015, 10, 7),
end: new Date(2015, 10, 10)
},

{
Expand Down

0 comments on commit 6c7f218

Please sign in to comment.