|
|
|
|
|
/home-new/events/calendar/
|
|
|
|
{"togglable_footerCTA":null,"togglable_memberCTA":"on","togglable_testCTA":null,"togglable_newslettercta":null}
|
|
|
|
<?php
\Framework\Date::setTimezone('Etc/GMT+5');
?>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<templates:section paddingLeft="2rem" paddingRight="2rem" paddingTop="10rem" paddingBottom="10rem" bgimage="https://images.unsplash.com/photo-1560420025-9453f02b4751?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Nnx8Y2FsZW5kYXJ8ZW58MHx8fHwxNjc2NTIyNDc3&" bgwashcolor="#333333" bgwashopacity="50" bgparallax="true" color="#ffffff" bgposition="center" contentsize="md">
<h1 style="text-align: center;">Event Calendar</h1>
</templates:section>
<templates:section paddingLeft="2rem" paddingRight="2rem" paddingTop="6rem" paddingBottom="6rem" bgimage="" bgposition="top right">
<logic:include page="/includes/events/events-page-list/"></logic:include>
<br />
<br />
<div class="eventsCalendar calendar">
<data:calendar id="calendar" datasource="\Components\Website\Posts::getAllForCategory(33)" as="post" weekmode="liquid" urlcolumn="post_content_url" startdatecolumn="post_event_start_date" initialview="dayGridMonth" useajax="true">
<div class="eventsCalendar-details">
<h4 style="margin: 0;"><strong><small>[? $post['post_title'] ?]</small></strong></h4>
<standard:image hspace="2" alt="[? $post['post_title'] ?]" title="[? $post['post_title'] ?]" src="[? $post['post_icon'] ?]" width="100%" height="50" maintainaspect="crop" />
</div>
</data:calendar>
</div>
</templates:section>
|
|
.fc .fc-daygrid-day-top{
z-index: 1;
}
.fc .fc-scroller-harness
{
overflow: visible;
}
.fc .fc-scrollgrid-section-sticky > *,
.fc .fc-daygrid-event
{
z-index: auto;
text-wrap: pretty;
line-height: normal;
}
.fc-col-header-cell a,
.fc-daygrid-day-number
{
color: #808080;
}
.fc-event .fc-event-main
{
z-index: auto;
}
.event-details
{
background: #f7f7f7;
width: 300px;
position: absolute;
left: 30%;
white-space: normal;
visibility: hidden;
z-index: 99;
transform: translate(2%, -50%);
top: 50%;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
color: #000;
border-radius: 10px;
}
@media(max-width: 700px)
{
.event-details
{
display: none;
}
}
.event-details .event-thumbnail img
{
width: 100%;
border-radius: 10px 10px 0 0;
}
.event-details .event-timedate
{
padding: 20px 20px 10px;
}
.event-details .event-timedate h4
{
font-size: 20px;
position: relative;
margin-bottom: 20px;
}
.event-details .event-timedate h4:after
{
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 2px;
background: #F39237;
}
.event-details .event-timedate .s8-standard-icon
{
width: 16px;
height: 16px;
color: #F39237;
margin-right: 5px;
}
.event-details .event-timedate > .date,
.event-details .event-timedate > .time
{
margin-bottom: 5px;
color: #999;
}
.event-details .event-description
{
line-height: normal;
padding: 10px 20px;
color: #7a7a7a;
}
.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;
}
.fc-daygrid-event-harness:last-child
{
margin-bottom: 0;
}
.fc-daygrid-event-harness:hover > .fc-daygrid-event .event-details
{
visibility: visible;
}
.fc-daygrid-event
{
overflow: visible;
}
.fc-event-time
{
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
color: #333;
}
.event-title
{
color: #828282;
white-space: break-spaces;
}
.fc-daygrid-dot-event:hover,
.fc-daygrid-dot-event.fc-event-mirror
{
background: none
}
/* Long Events */
.fc-daygrid-event-harness-abs .fc-h-event
{
background: transparent;
border: 0 none;
}
.fc-daygrid-event-harness-abs .fc-event-time,
.fc-daygrid-event-harness-abs .event-title
{
display: block;
vertical-align: middle;
}
.fc-daygrid-event-harness-abs .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-timegrid-body .fc-timegrid-event .fc-event-time
{
display: none;
}
|
|
|