|
|
|
|
|
|
|
/new-site/events/calendar/
/new-site/events/calendar/
|
|
|
|
<templates:section paddingleft="1rem" paddingRight="2rem" paddingTop="6rem" paddingBottom="6rem" bgimage="https://images.unsplash.com/photo-1588453251771-cd919b362ed4?ixid=M3w2ODg1fDB8MXxzZWFyY2h8N3x8Y2FsZW5kYXJ8ZW58MHx8fHwxNzQ5NjQwMzk2fDA&" color="#ffffff" bgposition="center" contentsize="md" bgwashcolor="#000000" bgwashopacity="40" bgcolor="#979e92">
<h1 style="text-align: center;">Calendar</h1>
</templates:section>
<templates:section paddingleft="1rem" paddingRight="2rem" paddingTop="4rem" paddingBottom="4rem" bgimage="" bgposition="top right">
<logic:include page="/new-site/includes/event-page-list/" />
<br />
<div class="eventsCalendar calendar">
<data:calendar id="calendar" datasource="\Components\Marketing\Events::getAllForCategory(6)" as="event" startdatecolumn="event_start_datetime" urlcolumn="event_content_url" enddatecolumn="event_end_datetime" initialview="dayGridMonth">
<div class="event-title">[? $event['event_title'] ?]</div>
<div class="event-details">
<logic:if test="$event['event_icon']">
<div class="event-thumbnail">
<standard:image src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" width="" height="200px" maintainaspect="crop" />
</div>
</logic:if>
<div class="event-timedate">
<h4>[? $event['event_title'] ?]</h4>
<div class="date">
<standard:icon library="feather" name="calendar-alt-solid" size="4" iconname="calendar" iconstyle="standard" /> <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?] </time>
<logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')">
- <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?] </time>
</logic:if>
</div>
<div class="time">
<standard:icon library="feather" name="clock-solid" size="4" iconname="clock" iconstyle="standard" />
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]
</time>
<logic:if test="$event['event_end_datetime']">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]
</time>
</logic:if>
</div>
</div>
<logic:if test="$event['event_description_short']">
<div class="event-description">[?? $event['event_description_short'] ??]</div>
</logic:if>
<div class="event-description"><a href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">View Event →</a></div>
</div>
</data:calendar>
</div>
</templates:section>
<templates:section paddingleft="1rem" paddingRight="2rem" paddingTop="6rem" paddingBottom="6rem" bgimage="https://images.unsplash.com/photo-1588453251771-cd919b362ed4?ixid=M3w2ODg1fDB8MXxzZWFyY2h8N3x8Y2FsZW5kYXJ8ZW58MHx8fHwxNzQ5NjQwMzk2fDA&" color="#ffffff" bgposition="center" contentsize="md" bgwashcolor="#000000" bgwashopacity="40" bgcolor="#979e92">
<h1 style="text-align: center;">Calendar</h1>
</templates:section>
<templates:section paddingleft="1rem" paddingRight="2rem" paddingTop="4rem" paddingBottom="4rem" bgimage="" bgposition="top right">
<logic:include page="/new-site/includes/event-page-list/" />
<br />
<div class="eventsCalendar calendar">
<data:calendar id="calendar" datasource="\Components\Marketing\Events::getAllForCategory(6)" as="event" startdatecolumn="event_start_datetime" urlcolumn="event_content_url" enddatecolumn="event_end_datetime" initialview="dayGridMonth">
<div class="event-title">[? $event['event_title'] ?]</div>
<div class="event-details">
<logic:if test="$event['event_icon']">
<div class="event-thumbnail">
<standard:image src="[? $event['event_icon'] ?]" alt="[? $event['event_title'] ?]" width="" height="200px" maintainaspect="crop" />
</div>
</logic:if>
<div class="event-timedate">
<h4>[? $event['event_title'] ?]</h4>
<div class="date">
<standard:icon library="feather" name="calendar-alt-solid" size="4" iconname="calendar" iconstyle="standard" /> <time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], null, '') ?] </time>
<logic:if test="$event['event_end_datetime'] && \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], 'MMM d', '') != \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], 'MMM d', '')">
- <time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], null, '') ?] </time>
</logic:if>
</div>
<div class="time">
<standard:icon library="feather" name="clock-solid" size="4" iconname="clock" iconstyle="standard" />
<time itemprop="startDate" datetime="[? date_format(date_create($event['event_start_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_start_datetime'], '') ?]
</time>
<logic:if test="$event['event_end_datetime']">
-
<time itemprop="endDate" datetime="[? date_format(date_create($event['event_end_datetime']), 'Y-m-d\TH:i:s') ?]">
[? \Components\Marketing\Events::renderTime($event, $event['event_end_datetime'], '') ?]
</time>
</logic:if>
</div>
</div>
<logic:if test="$event['event_description_short']">
<div class="event-description">[?? $event['event_description_short'] ??]</div>
</logic:if>
<div class="event-description"><a href="/community/event-rsvp/?event_id=[? $event['event_id'] ?]">View Event →</a></div>
</div>
</data:calendar>
</div>
</templates:section>
|
|
.fc {
.fc-daygrid-day-top {
z-index: 1;
}
.fc-scroller-harness {
overflow: visible;
}
.fc-scrollgrid-section-sticky > *,
.fc-daygrid-event {
z-index: auto;
}
.fc-col-header-cell a,
.fc-daygrid-day-number {
color: #808080;
}
.fc-event {
.fc-event-main {
z-index: auto;
}
}
.fc-daygrid-event {
overflow: visible;
}
.fc-daygrid-event-harness {
padding: 5px 10px;
margin-left: -3px;
position: relative;
border-left: 5px solid #F39237;
background: #fff4f6;
margin-right: 5px;
border-radius: 5px 0 0 5px;
border-bottom: 10px solid #fff;
&:last-child {
margin-bottom: 0;
}
&:hover > .fc-daygrid-event .event-details {
visibility: visible;
}
}
.fc-daygrid-dot-event {
&:hover,
&.fc-event-mirror {
background: none;
}
}
/* Long Events */
.fc-daygrid-event-harness-abs {
.fc-h-event {
background: transparent;
border: 0 none;
}
.fc-event-time,
.event-title {
display: block;
vertical-align: middle;
}
.fc-event-time {
font-size: 12px;
text-transform: uppercase;
color: #333;
}
}
/* Time Grid View */
.fc-timegrid-body {
.fc-timegrid-event {
background: #fff4f6;
border: 0 none;
border-left: 3px solid #F39237;
border-radius: 5px 0 0 5px;
padding: 5px;
.fc-event-time {
display: none;
}
}
}
}
.fc-event-time {
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
color: #333;
}
.event-title {
color: #828282;
white-space: break-spaces;
}
.event-details {
background: #f7f7f7;
width: 300px;
position: absolute;
left: 30%;
top: 0;
white-space: normal;
visibility: hidden;
z-index: 999;
transform: translate(2%, -50%);
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.12);
color: #000;
border-radius: 10px;
@media (max-width: 700px) {
display: none;
}
.event-thumbnail img {
width: 100%;
border-radius: 10px 10px 0 0;
}
.event-timedate {
padding: 20px 20px 10px;
h4 {
font-size: 20px;
position: relative;
margin-bottom: 20px;
&:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 2px;
background: #F39237;
}
}
.s8-standard-icon {
width: 16px;
height: 16px;
color: #F39237;
margin-right: 5px;
}
> .date,
> .time {
margin-bottom: 5px;
color: #999;
}
}
.event-description {
line-height: normal;
padding: 10px 20px;
color: #7a7a7a;
}
}
.fc-day-fri .event-details,
.fc-day-sat .event-details {
left: unset !important;
right: 30% !important;
}
.fc {
.fc-daygrid-day-top {
z-index: 1;
}
.fc-scroller-harness {
overflow: visible;
}
.fc-scrollgrid-section-sticky > *,
.fc-daygrid-event {
z-index: auto;
}
.fc-col-header-cell a,
.fc-daygrid-day-number {
color: #808080;
}
.fc-event {
.fc-event-main {
z-index: auto;
}
}
.fc-daygrid-event {
overflow: visible;
}
.fc-daygrid-event-harness {
padding: 5px 10px;
margin-left: -3px;
position: relative;
border-left: 5px solid #F39237;
background: #fff4f6;
margin-right: 5px;
border-radius: 5px 0 0 5px;
border-bottom: 10px solid #fff;
&:last-child {
margin-bottom: 0;
}
&:hover > .fc-daygrid-event .event-details {
visibility: visible;
}
}
.fc-daygrid-dot-event {
&:hover,
&.fc-event-mirror {
background: none;
}
}
/* Long Events */
.fc-daygrid-event-harness-abs {
.fc-h-event {
background: transparent;
border: 0 none;
}
.fc-event-time,
.event-title {
display: block;
vertical-align: middle;
}
.fc-event-time {
font-size: 12px;
text-transform: uppercase;
color: #333;
}
}
/* Time Grid View */
.fc-timegrid-body {
.fc-timegrid-event {
background: #fff4f6;
border: 0 none;
border-left: 3px solid #F39237;
border-radius: 5px 0 0 5px;
padding: 5px;
.fc-event-time {
display: none;
}
}
}
}
.fc-event-time {
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
color: #333;
}
.event-title {
color: #828282;
white-space: break-spaces;
}
.event-details {
background: #f7f7f7;
width: 300px;
position: absolute;
left: 30%;
top: 0;
white-space: normal;
visibility: hidden;
z-index: 999;
transform: translate(2%, -50%);
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.12);
color: #000;
border-radius: 10px;
@media (max-width: 700px) {
display: none;
}
.event-thumbnail img {
width: 100%;
border-radius: 10px 10px 0 0;
}
.event-timedate {
padding: 20px 20px 10px;
h4 {
font-size: 20px;
position: relative;
margin-bottom: 20px;
&:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 2px;
background: #F39237;
}
}
.s8-standard-icon {
width: 16px;
height: 16px;
color: #F39237;
margin-right: 5px;
}
> .date,
> .time {
margin-bottom: 5px;
color: #999;
}
}
.event-description {
line-height: normal;
padding: 10px 20px;
color: #7a7a7a;
}
}
.fc-day-fri .event-details,
.fc-day-sat .event-details {
left: unset !important;
right: 30% !important;
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/new-site/events/
/new-site/events/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|