2 Column Simplified Event List
Chef Ron Hudson
Imports: 22

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!

Import to Planning Center
Preview

Report Preview
Copy Code Import to Planning Center 

 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>

Chef Ron Hudson March 2025