Skip to content

Commit 503ceec

Browse files
jnbtjnbt
committed
Render a very simple calendar
1 parent e669e59 commit 503ceec

File tree

8 files changed

+325
-5
lines changed

8 files changed

+325
-5
lines changed

‎config/widgets.exs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,7 @@ config :neoboard, Neoboard.Widgets.Time,
5959
# "http://www.company.com/logo-b.png",
6060
# ],
6161
# every: 10_000
62+
63+
#config :neoboard, Neoboard.Widgets.Calendar,
64+
# url: "https://calendar.company.com/projects.ics",
65+
# every: 600_000

‎lib/neoboard/widgets/calendar.ex‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
defmodule Neoboard.Widgets.Calendar do
2+
alias Neoboard.Widgets.Calendar.Parser
3+
alias Neoboard.Widgets.Calendar.Event
4+
use GenServer
5+
use Neoboard.Pusher
6+
use Neoboard.Config
7+
8+
def start_link do
9+
{:ok, pid} = GenServer.start_link(__MODULE__, nil)
10+
send(pid, :tick)
11+
:timer.send_interval(config()[:every], pid, :tick)
12+
{:ok, pid}
13+
end
14+
15+
def handle_info(:tick, _) do
16+
{:ok, response} = fetch()
17+
push! response
18+
{:noreply, nil}
19+
end
20+
21+
defp fetch do
22+
case HTTPoison.get(config()[:url]) do
23+
{:ok, %HTTPoison.Response{status_code: 200, body: body}} ->
24+
process_body(body)
25+
end
26+
end
27+
28+
defp process_body(body) do
29+
data = Parser.deserialize(body)
30+
events = Enum.map(data.events, &Event.to_export/1)
31+
{:ok, %{events: events}}
32+
end
33+
end

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
"classnames": "~2.2.5",
55
"emojify.js": "^1.1.0",
66
"lodash": "^4.17.4",
7+
"moment": "^2.17.1",
78
"phoenix": "^1.2.1",
89
"react": "^15.4.2",
910
"react-addons-css-transition-group": "^15.4.2",
11+
"react-big-calendar": "^0.12.3",
1012
"react-dom": "^15.4.2",
1113
"react-grid-layout": "~0.13.6",
1214
"react-intl": "^2.2.3",

‎web/static/css/main.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ body
3131
@import "widgets/owncloud_images"
3232
@import "widgets/images"
3333
@import "widgets/mattermost"
34+
@import "widgets/calendar"

‎web/static/css/widgets/_calendar.sass‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.CalendarWidget
2+
+widget
3+
background: white
4+
font-size: 12px
5+
6+
.rbc-calendar
7+
height: 100%
8+
display: flex
9+
flex-direction: column
10+
align-items: stretch
11+
12+
.rbc-abs-full,
13+
.rbc-row-bg
14+
overflow: hidden
15+
position: absolute
16+
top: 0
17+
left: 0
18+
right: 0
19+
bottom: 0
20+
21+
.rbc-off-range
22+
color: #b3b3b3
23+
24+
.rbc-row-content
25+
position: relative
26+
user-select: none
27+
z-index: 4
28+
29+
.rbc-today
30+
background-color: #eaf6ff
31+
32+
.rbc-event
33+
padding: 2px 5px
34+
background-color: #3174ad
35+
border-radius: 5px
36+
color: #fff
37+
38+
.rbc-event-label
39+
font-size: 80%
40+
41+
.rbc-event-overlaps
42+
box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5)
43+
44+
.rbc-event-continues-prior
45+
border-top-left-radius: 0
46+
border-bottom-left-radius: 0
47+
48+
.rbc-event-continues-after
49+
border-top-right-radius: 0
50+
border-bottom-right-radius: 0
51+
52+
.rbc-event-continues-earlier
53+
border-top-left-radius: 0
54+
border-top-right-radius: 0
55+
56+
.rbc-event-continues-later
57+
border-bottom-left-radius: 0
58+
border-bottom-right-radius: 0
59+
60+
.rbc-row
61+
display: flex
62+
flex-direction: row
63+
64+
.rbc-row-segment
65+
padding: 0 1px 1px 1px
66+
67+
.rbc-month-view
68+
position: relative
69+
border: 1px solid #DDD
70+
display: flex
71+
flex-direction: column
72+
flex: 1 0 0
73+
width: 100%
74+
user-select: none
75+
height: 100%
76+
77+
.rbc-month-view .rbc-header
78+
border-bottom: 1px solid #DDD
79+
80+
.rbc-month-view .rbc-header + .rbc-header
81+
border-left: 1px solid #DDD
82+
83+
.rbc-month-header
84+
display: flex
85+
flex-direction: row
86+
87+
.rbc-month-row
88+
display: flex
89+
position: relative
90+
flex-direction: column
91+
flex: 1 0 0
92+
overflow: hidden
93+
height: 100%
94+
95+
.rbc-month-row + .rbc-month-row
96+
border-top: 1px solid #DDD
97+
98+
.rbc-date-cell
99+
padding-right: 5px
100+
text-align: right
101+
102+
.rbc-date-cell.rbc-now
103+
font-weight: bold
104+
105+
.rbc-date-cell > a,
106+
.rbc-date-cell > a:active,
107+
.rbc-date-cell > a:visited
108+
color: inherit
109+
text-decoration: none
110+
111+
.rbc-row-bg
112+
display: flex
113+
flex-direction: row
114+
flex: 1 0 0
115+
overflow: hidden
116+
117+
.rbc-day-bg + .rbc-day-bg
118+
border-left: 1px solid #DDD
119+
120+
.rbc-label
121+
padding: 0 5px

‎web/static/css/widgets/calendar/_react-big-calendar.scss‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.rbc-off-range {
2+
color: #b3b3b3;
3+
}
4+
.rbc-row-content {
5+
position: relative;
6+
-webkit-user-select: none;
7+
-moz-user-select: none;
8+
-ms-user-select: none;
9+
user-select: none;
10+
z-index: 4;
11+
}
12+
.rbc-today {
13+
background-color: #eaf6ff;
14+
}
15+
.rbc-event {
16+
padding: 2px 5px;
17+
background-color: #3174ad;
18+
border-radius: 5px;
19+
color: #fff;
20+
}
21+
.rbc-event-label {
22+
font-size: 80%;
23+
}
24+
.rbc-event-overlaps {
25+
box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5);
26+
}
27+
.rbc-event-continues-prior {
28+
border-top-left-radius: 0;
29+
border-bottom-left-radius: 0;
30+
}
31+
.rbc-event-continues-after {
32+
border-top-right-radius: 0;
33+
border-bottom-right-radius: 0;
34+
}
35+
.rbc-event-continues-earlier {
36+
border-top-left-radius: 0;
37+
border-top-right-radius: 0;
38+
}
39+
.rbc-event-continues-later {
40+
border-bottom-left-radius: 0;
41+
border-bottom-right-radius: 0;
42+
}
43+
.rbc-row {
44+
display: -ms-flexbox;
45+
display: flex;
46+
-ms-flex-direction: row;
47+
flex-direction: row;
48+
}
49+
.rbc-row-segment {
50+
padding: 0 1px 1px 1px;
51+
}
52+
.rbc-month-view {
53+
position: relative;
54+
border: 1px solid #DDD;
55+
display: -ms-flexbox;
56+
display: flex;
57+
-ms-flex-direction: column;
58+
flex-direction: column;
59+
-ms-flex: 1 0 0px;
60+
flex: 1 0 0;
61+
width: 100%;
62+
-webkit-user-select: none;
63+
-moz-user-select: none;
64+
-ms-user-select: none;
65+
user-select: none;
66+
height: 100%;
67+
}
68+
.rbc-month-view .rbc-header {
69+
border-bottom: 1px solid #DDD;
70+
}
71+
.rbc-month-view .rbc-header + .rbc-header {
72+
border-left: 1px solid #DDD;
73+
}
74+
.rbc-month-header {
75+
display: -ms-flexbox;
76+
display: flex;
77+
-ms-flex-direction: row;
78+
flex-direction: row;
79+
}
80+
.rbc-month-row {
81+
display: -ms-flexbox;
82+
display: flex;
83+
position: relative;
84+
-ms-flex-direction: column;
85+
flex-direction: column;
86+
-ms-flex: 1 0 0px;
87+
flex: 1 0 0;
88+
overflow: hidden;
89+
height: 100%;
90+
}
91+
.rbc-month-row + .rbc-month-row {
92+
border-top: 1px solid #DDD;
93+
}
94+
.rbc-date-cell {
95+
padding-right: 5px;
96+
text-align: right;
97+
}
98+
.rbc-date-cell.rbc-now {
99+
font-weight: bold;
100+
}
101+
.rbc-date-cell > a,
102+
.rbc-date-cell > a:active,
103+
.rbc-date-cell > a:visited {
104+
color: inherit;
105+
text-decoration: none;
106+
}
107+
.rbc-row-bg {
108+
display: -ms-flexbox;
109+
display: flex;
110+
-ms-flex-direction: row;
111+
flex-direction: row;
112+
-ms-flex: 1 0 0px;
113+
flex: 1 0 0;
114+
overflow: hidden;
115+
}
116+
.rbc-day-bg + .rbc-day-bg {
117+
border-left: 1px solid #DDD;
118+
}
119+
.rbc-label {
120+
padding: 0 5px;
121+
}

‎web/static/js/main.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,22 @@ import RedmineActivityProjects from "./widgets/redmine_activity_projects"
1313
import RedmineActivityUsers from "./widgets/redmine_activity_users"
1414
import OwncloudImages from "./widgets/owncloud_images"
1515
import Images from "./widgets/images"
16+
import Calendar from "./widgets/calendar"
1617

1718
const widgets = [
1819
// Format:
1920
// [widget, grid configuration]
2021
[Mattermost, {x:0, y:0, w:1, h:2}],
2122
[RedmineActivityProjects, {x:1, y:0, w:1, h:2}],
22-
[RedmineActivityUsers, {x:2, y:0, w:1, h:1}],
23+
//[RedmineActivityUsers, {x:2, y:0, w:1, h:1}],
2324
[OwncloudImages, {x:4, y:1, w:1, h:1}],
2425
[TimeWidget, {x:4, y:0, w:1, h:1}],
25-
[GitlabCiWidget, {x:3, y:0, w:1, h:1}],
26+
//[GitlabCiWidget, {x:3, y:0, w:1, h:1}],
2627
[NichtLustigWidget, {x:2, y:1, w:1, h:1}],
27-
[RedmineProjectTable, {x:0, y:2, w:3, h:1}],
28-
[NotepadWidget, {x:3, y:1, w:1, h:2}],
29-
[Images, {x:4, y:2, w:1, h:1}]
28+
//[RedmineProjectTable, {x:0, y:2, w:3, h:1}],
29+
//[NotepadWidget, {x:3, y:1, w:1, h:2}],
30+
[Images, {x:4, y:2, w:1, h:1}],
31+
[Calendar, {x:2, y:0, w:2, h:2}],
3032
]
3133

3234
const Main = {

‎web/static/js/widgets/calendar.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react"
2+
import BigCalendar from "react-big-calendar"
3+
import moment from "moment"
4+
import WidgetMixin from "../widget_mixin"
5+
import LastUpdatedAt from "../last_updated_at"
6+
7+
BigCalendar.setLocalizer(
8+
BigCalendar.momentLocalizer(moment)
9+
)
10+
11+
export default React.createClass({
12+
mixins: [WidgetMixin("calendar:state")],
13+
getInitialState() {
14+
return { events: [] }
15+
},
16+
render() {
17+
const events = this.state.events.map(data => {
18+
return {
19+
title: data.title,
20+
start: moment(data.start),
21+
end: moment(data.end),
22+
allDay: true
23+
}
24+
})
25+
return (
26+
<div className="CalendarWidget">
27+
<BigCalendar
28+
events={events}
29+
toolbar={false}
30+
selectable={false}
31+
defaultDate={new Date()}
32+
/>
33+
</div>
34+
)
35+
}
36+
})

0 commit comments

Comments
 (0)