2 Column Simplified Event List
This is a two column simplified event list with the format: Sun 3/17 at 9AM: Service Sun 3/17 at 10:45AM: Service Mon 3/18 at 6:30PM: Divorce Care Support Group Tue 3/19 at 5:30PM: Covenant Class Tue 3/19 at 7PM: Turning Point Tuesday Commissioned by New Life Church! Thanks Joe!
Preview
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<head>
<title>{{report.title}}</title>
<link rel="stylesheet" type="text/css" media="all" href="{{ report.stylesheet_href }}">
</head>
<link rel="stylesheet" type="text/css" media="all" href="{{ report.stylesheet_href }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
}
.events-container {
column-count: 2;
column-gap: 30px;
margin: 0 auto;
padding: 10px;
max-width: 1200px;
}
.month-title {
padding: 0px;
border-bottom: 1px solid #dee2e6;
margin-bottom: 4px;
margin-top: 10px;
column-span: all;
text-align: left;
margin-top: 5px;
display: block; /* Ensure this is treated as a block element within columns */
}
.event-item {
break-inside: avoid-column;
margin: 0 0 0rem;
padding: 0;
}
@media print {
.events-container {
column-count: 2;
}
}
</style>
</head>
<body>
<div class="report-wrapper">
<h1 class="header-large txt-center gutter-bottom-small">{{report.title}}</h1>
<h2 class="header-medium txt-center soft gutter-bottom-large">{{ report.start_date }} - {{ report.end_date }}</h2>
<div class="events-container">
{% assign previous_month = "" %}
{% for day in days_with_instances %}
{% assign time_format = "%-I:%M%P" %}
{% assign date_format = "%a %m/%d" %}
{% assign sorted_instances = day.instances | sort: "starts_at" %}
{% assign current_month = day.date | date: '%B' %}
{% if current_month != previous_month %}
<div class="month-title"><h2>{{ current_month }}</h2></div>
{% endif %}
{% assign previous_month = current_month %}
{% for instance in sorted_instances %}
<div class="event-item">
{% assign start_time = instance.starts_at | date: time_format %}
{% assign start_date = instance.starts_at | date: date_format %}
{{ start_date }} at {{ start_time | downcase }}: {{ instance.event.name }}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</body>
</html>