simple_calendar-timeslot 0.5.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +23 -0
- data/Gemfile.lock +2 -4
- data/README.md +15 -8
- data/app/assets/stylesheets/simple_calendar-timeslot.css +26 -2
- data/app/views/simple_calendar/timeslot/_timeslot_calendar.html.erb +56 -44
- data/lib/simple_calendar/timeslot/timeslot_calendar.rb +17 -2
- data/lib/simple_calendar/timeslot/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f52c61db709b554fc0b83bd23ede3fd67eef7d30a6c2ca56653bedfb07aa36e1
|
|
4
|
+
data.tar.gz: 85c84c537e0f6c838bd6cfbb1e9d91524e0ffe391d45380dba3d8dda0aed8b10
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: cd7ea8c241c235e106c838f474d357b066bef07cdb67ec2e5df0a046b4fb0b8586b71e19ee32137ca2e78b5f269ced9d55b75003cd471251498387336f9c720b
|
|
7
|
+
data.tar.gz: 503206dbd8a107c38cae4f4957904a27a55db2f342a1a001346095d49b71a90ea1b945b1521da7bf180953d0343df0bb7509476670ec844044accbaceac2f39d
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
## [Unreleased]
|
|
2
2
|
|
|
3
|
+
## [0.8.0] - 2021-11-15
|
|
4
|
+
### Changed
|
|
5
|
+
- Shuffle html layout around a bit for easier css styling like sticky
|
|
6
|
+
|
|
7
|
+
## [0.7.0] - 2021-11-15
|
|
8
|
+
### Added
|
|
9
|
+
- new option to display a current time indicator line (based on Time.zone.now), that is invisible unless styled, the css-class is
|
|
10
|
+
`current_time_indicator`
|
|
11
|
+
### Fixed
|
|
12
|
+
- minor z-index inconsistencies for event rendering
|
|
13
|
+
|
|
14
|
+
## [0.6.0] - 2021-11-15
|
|
15
|
+
### Added
|
|
16
|
+
- Added option horizontal_scroll_split to view helper, which defaults to false. This option affects
|
|
17
|
+
horizontal orientation only. If set to false, the
|
|
18
|
+
different days of the calendar scroll together horizontally, which is more consistent with the
|
|
19
|
+
behaviour of the vertical layout. If set to true, the days scroll independently.
|
|
20
|
+
|
|
21
|
+
## [0.5.1] - 2021-11-15
|
|
22
|
+
### Fixed
|
|
23
|
+
- Fixed reliance of calendar on legacy function to
|
|
24
|
+
calculate event height
|
|
25
|
+
|
|
3
26
|
## [0.5.0] - 2021-11-14
|
|
4
27
|
- Removed images for the README from the gem, sry :(
|
|
5
28
|
|
data/Gemfile.lock
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PATH
|
|
2
2
|
remote: .
|
|
3
3
|
specs:
|
|
4
|
-
simple_calendar-timeslot (0.
|
|
4
|
+
simple_calendar-timeslot (0.8.0)
|
|
5
5
|
simple_calendar (~> 2.0)
|
|
6
6
|
|
|
7
7
|
GEM
|
|
@@ -90,8 +90,6 @@ GEM
|
|
|
90
90
|
nokogiri (1.12.5)
|
|
91
91
|
mini_portile2 (~> 2.6.1)
|
|
92
92
|
racc (~> 1.4)
|
|
93
|
-
nokogiri (1.12.5-x86_64-darwin)
|
|
94
|
-
racc (~> 1.4)
|
|
95
93
|
parallel (1.21.0)
|
|
96
94
|
parser (3.0.2.0)
|
|
97
95
|
ast (~> 2.4.1)
|
|
@@ -159,7 +157,7 @@ GEM
|
|
|
159
157
|
sprockets (4.0.2)
|
|
160
158
|
concurrent-ruby (~> 1.0)
|
|
161
159
|
rack (> 1, < 3)
|
|
162
|
-
sprockets-rails (3.
|
|
160
|
+
sprockets-rails (3.4.0)
|
|
163
161
|
actionpack (>= 5.2)
|
|
164
162
|
activesupport (>= 5.2)
|
|
165
163
|
sprockets (>= 3.0.0)
|
data/README.md
CHANGED
|
@@ -47,12 +47,17 @@ If you use an SCSS file (`application.scss`), add the following line instead:
|
|
|
47
47
|
|
|
48
48
|
TODO: Write usage instructions here
|
|
49
49
|
|
|
50
|
+
Your model must implement a `start_time` and `end_time` function,
|
|
51
|
+
or you can specify alternatives as options to the call below
|
|
52
|
+
as `attribute: :my_start_time` and `end_attribute: :my_end_time`.
|
|
53
|
+
|
|
50
54
|
```erb
|
|
51
55
|
<%= timeslot_calendar(events: @events,
|
|
52
56
|
number_of_days: 2,
|
|
53
57
|
px_per_minute: 1.5,
|
|
54
58
|
orientation: :horizontal,
|
|
55
59
|
horizontal_height_px: 250,
|
|
60
|
+
# attribute: :my_start_time,
|
|
56
61
|
# display_grid: false,
|
|
57
62
|
# display_bucket_title: :event_type,
|
|
58
63
|
# bucket_title_size: 30,
|
|
@@ -67,14 +72,16 @@ TODO: Write usage instructions here
|
|
|
67
72
|
```
|
|
68
73
|
|
|
69
74
|
Shortversion in the meantime:
|
|
70
|
-
- orientation (
|
|
71
|
-
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
77
|
-
-
|
|
75
|
+
- `orientation` (`:vertical`, `:horizontal`, default: :vertical)
|
|
76
|
+
- `px_per_minute` (defines size of calendar, default: 0.65)
|
|
77
|
+
- `horizontal_height_px` default: 300
|
|
78
|
+
- `horizontal_scroll_split` (scroll days separately or together, default: false)
|
|
79
|
+
- `split_by_type` (model function to call in case of bucketing f.ex.`:event_type`, default: false)
|
|
80
|
+
- `display_bucket_title` (model function to call in case of bucketing f.ex.`:event_type_name`, default: false)
|
|
81
|
+
- `bucket_title_size` default: 20
|
|
82
|
+
- `grid_width` default: 20px
|
|
83
|
+
- `display_grid` default: true
|
|
84
|
+
- `display_current_time_indicator` (display a stylable div across the timeline that display the current time, css-class: `current_time_indicator`, default: false)
|
|
78
85
|
|
|
79
86
|
## Development
|
|
80
87
|
|
|
@@ -1,14 +1,34 @@
|
|
|
1
1
|
.timeslot-calendar div {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
}
|
|
4
|
-
.timeslot-calendar .days-wrapper-vertical {
|
|
4
|
+
.timeslot-calendar .days-wrapper-vertical .days-body {
|
|
5
5
|
display: flex;
|
|
6
6
|
flex-direction: row;
|
|
7
7
|
}
|
|
8
|
+
.timeslot-calendar .days-wrapper-vertical .days-heading {
|
|
9
|
+
width: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: row;
|
|
12
|
+
top: 0;
|
|
13
|
+
/*position: sticky;*/
|
|
14
|
+
}
|
|
15
|
+
.timeslot-calendar .days-wrapper-vertical .days-heading .day-title-row{
|
|
16
|
+
flex: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
8
19
|
.timeslot-calendar .days-wrapper-horizontal {
|
|
9
20
|
display: flex;
|
|
10
21
|
flex-direction: column;
|
|
11
22
|
}
|
|
23
|
+
.timeslot-calendar .days-wrapper-horizontal .day-title-row {
|
|
24
|
+
display: inline-block;
|
|
25
|
+
left: 0;
|
|
26
|
+
/*position: sticky;*/
|
|
27
|
+
}
|
|
28
|
+
.timeslot-calendar .days-wrapper-horizontal.scroll-link {
|
|
29
|
+
overflow-x: auto;
|
|
30
|
+
overflow-y: hidden;
|
|
31
|
+
}
|
|
12
32
|
.timeslot-calendar .day-wrapper {
|
|
13
33
|
flex: 1 1 0;
|
|
14
34
|
}
|
|
@@ -21,13 +41,14 @@
|
|
|
21
41
|
display: flex;
|
|
22
42
|
flex-direction: column;
|
|
23
43
|
position: relative;
|
|
44
|
+
}
|
|
45
|
+
.timeslot-calendar .day-content-horizontal.scroll-split {
|
|
24
46
|
overflow-x: auto;
|
|
25
47
|
overflow-y: hidden;
|
|
26
48
|
}
|
|
27
49
|
.timeslot-calendar .day-content-horizontal-inner {
|
|
28
50
|
position: relative;
|
|
29
51
|
}
|
|
30
|
-
|
|
31
52
|
.timeslot-calendar .hour-indicator-col-vertical {
|
|
32
53
|
display: flex;
|
|
33
54
|
flex: 1 1 0;
|
|
@@ -87,6 +108,9 @@
|
|
|
87
108
|
z-index: 1;
|
|
88
109
|
box-sizing: border-box;
|
|
89
110
|
}
|
|
111
|
+
.timeslot-calendar .current_time_indicator {
|
|
112
|
+
position: absolute;
|
|
113
|
+
}
|
|
90
114
|
/*--- Event example style ----*/
|
|
91
115
|
.timeslot-event {
|
|
92
116
|
width: 100%;
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
|
|
8
8
|
<% if calendar.orientation == :vertical %>
|
|
9
9
|
<div class="days-wrapper-vertical">
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
<div class="days-heading">
|
|
11
|
+
<% date_range.slice(0, 7).each do |day| %>
|
|
12
12
|
<div class="day-title-row">
|
|
13
13
|
<span class="day-weekday">
|
|
14
14
|
<%= t('date.abbr_day_names')[day.wday] %>
|
|
@@ -17,56 +17,65 @@
|
|
|
17
17
|
<%= day %>
|
|
18
18
|
</span>
|
|
19
19
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
20
|
+
<% end %>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="days-body">
|
|
23
|
+
<% date_range.slice(0, 7).each do |day| %>
|
|
24
|
+
<div class="day-wrapper">
|
|
25
|
+
<%= content_tag :div, class: calendar.td_classes_for(day) do %>
|
|
26
|
+
<div class="day-content-vertical" style="height:<%=calendar.height%>px;">
|
|
27
|
+
<% if calendar.display_grid %>
|
|
28
|
+
<div class="hour-indicator-col-vertical">
|
|
29
|
+
<% if calendar.display_bucket_title %>
|
|
30
|
+
<div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px"></div>
|
|
31
|
+
<% end %>
|
|
32
|
+
<% (0..23).each do |hour| %>
|
|
33
|
+
<div class="hour-indicator-vertical" id="hour-<%=hour %>">
|
|
34
|
+
<%=hour%>
|
|
35
|
+
</div>
|
|
36
|
+
<% end %>
|
|
37
|
+
</div>
|
|
38
|
+
<% end %>
|
|
39
|
+
<% if calendar.display_current_time_indicator %>
|
|
40
|
+
<div class="current_time_indicator" style="top:<%=calendar.current_time_offset %>px;left:0;right:0;height:0;"></div>
|
|
31
41
|
<% end %>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px">
|
|
43
|
-
<%= bucket&.first&.send calendar.display_bucket_title %>
|
|
44
|
-
</div>
|
|
45
|
-
<% end %>
|
|
46
|
-
<div class="events-wrapper">
|
|
47
|
-
<% events_size = calendar.slot_events(bucket, day) %>
|
|
48
|
-
<% bucket.each do |event| %>
|
|
49
|
-
<div class="event-wrapper" style="z-index:20;width:<%=events_size[event][0]%>%;top:<%=events_size[event][3]%>px;left:<%=events_size[event][1]%>%;height:<%=events_size[event][2]%>px">
|
|
50
|
-
<% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
|
|
51
|
-
<% capture_haml(event, &passed_block) %>
|
|
52
|
-
<% else %>
|
|
53
|
-
<% passed_block.call event %>
|
|
54
|
-
<% end %>
|
|
42
|
+
<% events = sorted_events.fetch(day, []) %>
|
|
43
|
+
<% buckets = calendar.split_into_buckets(events) %>
|
|
44
|
+
<div class="buckets-wrapper" style="left:<%=calendar.grid_width%>;right:0">
|
|
45
|
+
<div class="buckets-vertical">
|
|
46
|
+
<% buckets.each do |bucket| %>
|
|
47
|
+
<div class="bucket-wrapper">
|
|
48
|
+
<div class="bucket-vertical">
|
|
49
|
+
<% if calendar.display_bucket_title %>
|
|
50
|
+
<div class="bucket-title" style="height:<%=calendar.bucket_title_size%>px">
|
|
51
|
+
<%= bucket&.first&.send calendar.display_bucket_title %>
|
|
55
52
|
</div>
|
|
56
53
|
<% end %>
|
|
54
|
+
<div class="events-wrapper">
|
|
55
|
+
<% events_size = calendar.slot_events(bucket, day) %>
|
|
56
|
+
<% bucket.each do |event| %>
|
|
57
|
+
<div class="event-wrapper" style="width:<%=events_size[event][0]%>%;top:<%=events_size[event][3]%>px;left:<%=events_size[event][1]%>%;height:<%=events_size[event][2]%>px">
|
|
58
|
+
<% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
|
|
59
|
+
<% capture_haml(event, &passed_block) %>
|
|
60
|
+
<% else %>
|
|
61
|
+
<% passed_block.call event %>
|
|
62
|
+
<% end %>
|
|
63
|
+
</div>
|
|
64
|
+
<% end %>
|
|
65
|
+
</div>
|
|
57
66
|
</div>
|
|
58
67
|
</div>
|
|
59
|
-
|
|
60
|
-
|
|
68
|
+
<% end %>
|
|
69
|
+
</div>
|
|
61
70
|
</div>
|
|
62
71
|
</div>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
72
|
+
<% end %>
|
|
73
|
+
</div>
|
|
74
|
+
<% end %>
|
|
75
|
+
</div>
|
|
67
76
|
</div>
|
|
68
77
|
<% elsif calendar.orientation == :horizontal %>
|
|
69
|
-
<div class="days-wrapper-horizontal">
|
|
78
|
+
<div class="days-wrapper-horizontal <%= calendar.horizontal_scroll_split ? "" : "scroll-link" %>">
|
|
70
79
|
<% date_range.slice(0, 7).each do |day| %>
|
|
71
80
|
<div class="day-wrapper">
|
|
72
81
|
<div class="day-title-row">
|
|
@@ -78,7 +87,7 @@
|
|
|
78
87
|
</span>
|
|
79
88
|
</div>
|
|
80
89
|
<%= content_tag :div, class: calendar.td_classes_for(day) do %>
|
|
81
|
-
<div class="day-content-horizontal">
|
|
90
|
+
<div class="day-content-horizontal <%= calendar.horizontal_scroll_split ? "scroll-split" : "" %>">
|
|
82
91
|
<div class="day-content-horizontal-inner" style="width:<%=calendar.height%>px;height:<%=calendar.horizontal_height_px%>px">
|
|
83
92
|
<% if calendar.display_grid %>
|
|
84
93
|
<div class="hour-indicator-col-horizontal" style="z-index:-10;">
|
|
@@ -94,6 +103,9 @@
|
|
|
94
103
|
<% end %>
|
|
95
104
|
</div>
|
|
96
105
|
<% end %>
|
|
106
|
+
<% if calendar.display_current_time_indicator && !calendar.horizontal_scroll_split %>
|
|
107
|
+
<div class="current_time_indicator" style="left:<%=calendar.current_time_offset %>px;top:0;bottom:0;width:0;"></div>
|
|
108
|
+
<% end %>
|
|
97
109
|
<% events = sorted_events.fetch(day, []) %>
|
|
98
110
|
<% buckets = calendar.split_into_buckets(events) %>
|
|
99
111
|
<div class="buckets-wrapper" style="top:<%=calendar.grid_width%>;bottom:0">
|
|
@@ -50,6 +50,14 @@ module SimpleCalendar
|
|
|
50
50
|
@options.fetch(:display_grid, true)
|
|
51
51
|
end
|
|
52
52
|
|
|
53
|
+
def horizontal_scroll_split
|
|
54
|
+
@options.fetch(:horizontal_scroll_split, false)
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
def display_current_time_indicator
|
|
58
|
+
@options.fetch(:display_current_time_indicator, false)
|
|
59
|
+
end
|
|
60
|
+
|
|
53
61
|
def height
|
|
54
62
|
#h = (24 - TimeslotCalendar::FIRST_HOUR_SLOT) * 60 * px_per_minute
|
|
55
63
|
h = 24 * 60 * px_per_minute
|
|
@@ -63,9 +71,9 @@ module SimpleCalendar
|
|
|
63
71
|
elsif event.send(attribute).to_date < event.send(end_attribute).to_date
|
|
64
72
|
(event.send(end_attribute).midnight - 60 - event.send(attribute))/60
|
|
65
73
|
else
|
|
66
|
-
event.
|
|
74
|
+
(event.send(end_attribute) - event.send(attribute))/60
|
|
67
75
|
end
|
|
68
|
-
minutes * px_per_minute
|
|
76
|
+
minutes * px_per_minute
|
|
69
77
|
end
|
|
70
78
|
|
|
71
79
|
def event_top_distance(event, day)
|
|
@@ -119,6 +127,13 @@ module SimpleCalendar
|
|
|
119
127
|
r
|
|
120
128
|
end
|
|
121
129
|
|
|
130
|
+
def current_time_offset
|
|
131
|
+
now = Time.zone.now
|
|
132
|
+
offset = (now.hour * 60 + now.min) * px_per_minute
|
|
133
|
+
offset = offset + bucket_title_size if display_bucket_title
|
|
134
|
+
offset
|
|
135
|
+
end
|
|
136
|
+
|
|
122
137
|
private
|
|
123
138
|
|
|
124
139
|
def pack_events(r, columns)
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: simple_calendar-timeslot
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kim Laplume
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-11-
|
|
11
|
+
date: 2021-11-15 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: simple_calendar
|