Divi Events Calendar

Documentation

Home » Docs » Bonus Customization Resources


Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Events Calendar Modules Plugin by Pee Aye Creative 2.2

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

Bonus Customization Resources

Events Feed Module

You can target the Events Feed module with .decm_event_display

Change The Order Of Event Image And Details

This will move the entire details section (title, details, excerpt, button) to the top, and move the image to the bottom.

/*make the event elements flexible*/

.decm_event_display .ecs-event .row {
  display: flex;
  flex-direction: column;
}

/*details*/
.decm_event_display .ecs-event .col-md-12 {
  order: 1!important;
}

/*image*/
.decm_event_display .ecs-event .decm-show-image-left {
  order: 2!important;
}

Change The Order Of Event Items

This allows you to change the default order of the title, details, excerpt, and button. Make sure to assign a number from 1 through 4 for each item.

/*make the event elements flexible*/

.decm-events-details, .col-md-8 {
  display: flex;
  flex-direction: column;
}

/*title*/
.entry-title.title1.summary {
  order: 1;
}

/*details*/
.decm-show-detail-center {
  order: 2;
}

/*excerpt*/
.ecs-excerpt {
  order: 3;
}

/*button*/
.ecs-showdetail.et_pb_button_wrapper {
  order: 4;
}

Change The Order Of  Individual Event Details

This allows you to change the default order of the individual items within the event details, like date, time, location, etc. Make sure to assign a number from 1 through 7 for each item.

/*make the event details order flexible*/

.decm-show-detail-center {
	display: flex;
	flex-direction: column;
}


/*event date order*/

.ecs-eventDate {
	order: 1;
}


/*event time order*/

.ecs-eventTime {
	order: 2;
}


/*event venue order*/

.ecs-venue {
	order: 3;
}


/*event location order*/

.ecs-location {
	order: 4;
}


/*event organizer order*/

.ecs-organizer {
	order: 5;
}


/*event price order*/

.ecs-price {
	order: 6;
}


/*event details order*/

.ecs-categories {
	order: 7;
}

Change The Order Of Callout Box Items

This allows you to change the default order of the items in the Callout Box. Make sure to assign a number from 1 through 4 for each item.

/*make the callout box display flex*/
.decm_event_display .callout-box-grid, 
.decm_event_display .callout-box-cover, 
.decm_event_display .callout-box-list {
  display: flex;
  flex-direction: column;
}

/*date*/
.callout_date {
  order: 4;
}
  
/*month*/
.callout_month {
  order: 3;
}
 
/*day of the week*/
.callout_weekDay {
  order: 1;
}

/*year*/
.callout_year {
  order: 4;
}

Replace Details Label Text

If you want to change the words of the details labels, you first need to find the selector for that label, then add some jQuery snippet to change the text. This example is changing the location label.

Also check our general tutorial on this subject: Replace Any Text On Your Website

<script>
jQuery(document).ready(function(){
setInterval(function(){
jQuery(".decm_event_display .ecs-location .ecs-detail-label").html("Custom Text ");
},100)
})
</script>

Auto Vertically Center Align The Image And Details

/*prepare the parent div for flex alignment*/
.decm_event_display .act-post .row {
    display: flex;
}

/*align two two columns to the center*/
.decm_event_display .col-md-4, .decm_event_display .col-md-8 {
  align-self: center;
}

Stack List Layout Columns On Tablet

/*stack list layout columns on Tablet*/

@media (max-width: 981px) {
	.decm_event_display .col-md-2 {
		width: 100%;
	}
	.decm_event_display .col-md-4 {
		width: 100%;
	}
	.decm_event_display .col-md-5 {
		width: 100%;
	}
}

Set The Featured Image Height

/*set the event image height*/

.decm_event_display .ecs-event .act-post img {
	position: relative;
	height: 200px;
	object-fit: cover;
}

Make Entire Event Clickable In Cover Layout

/*add a neceassry position to the events*/

.decm-events-details-cover {
position: relative;
}

/*make the title link spread over the entire event*/

.decm-cover-overlay-details>.decm-events-details-cover>.entry-title a:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*change the mouse cursor into a pointer*/

.decm-events-details-cover:hover {
cursor: pointer;
}

Events Calendar Module

You can target the Events Calendar module with .decm_divi_event_calendar

Adjust Days Of The Week Padding When Calendar Is Small

/*adjust Days of the Week padding when the calendar is small*/
.decm_divi_event_calendar .fc-head-container .fc-widget-header th {
  padding: 4px;
}

Replace Navigation Arrows

/*replace previous navigation arrow*/

.decm_divi_event_calendar .fc-icon-chevron-left:before {
    content: "";
  font-family: ETModules;
}

/*replace next navigation arrow*/

.decm_divi_event_calendar .fc-icon-chevron-right:before {
    content: "";
  font-family: ETModules;
}

Style Featured Events

/*style the main event in the calendar grid*/

.decm-featured-event {
	background-color: red !important;
	border: 2px solid blue !important;
	color: #000 !important;
	/*Change Timing color*/
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}


/*change color of event title*/

.decm-featured-event .fc-calendar-title a {
	color: #000 !important;
	/*Change title color*/
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}


/*style the featured event background and time text on hover*/

.decm-featured-event:hover {
	background-color: blue !important;
	border: 2px solid red !important;
	color: #fff !important;
}


/*change the color of event title on hover*/

.decm-featured-event:hover .fc-calendar-title a {
	color: #fff !important;
}


/*adjust the list view for similar results*/

.decm-featured-event:hover td {
	background-color: blue !important;
	color: #fff !important;
	transition: all 0.2s ease-in-out;
}

Style The Time In Day/Week View

/*day and week view all day*/
.decm_divi_event_calendar .fc-axis {
  color: red;
}

/*day and week view time*/
.decm_divi_event_calendar .fc-axis.fc-time {
  color: red;
}

Style The Time In List View

/*list view time*/
.decm_divi_event_calendar .fc-list-item-time {
  color: red;
}

Hide The Time In List View

/*hide time in Events Calendar List View*/
.decm_divi_event_calendar .fc-list-item-time.fc-widget-content {
  display: none;
}

Style Multi-Day Events

/*style multi-day events*/
.decm_divi_event_calendar .fc-start.fc-not-end, .decm_divi_event_calendar .fc-end.fc-not-start  {
  background: red!important;
}

Move Loader Animation Up

/*move loading animation up*/
.decm_divi_event_calendar.spinner_calendar {
    margin-top: -400px;
}

Hide Event Title Text On Desktop

/*hide event title text on desktop*/
.decm_divi_event_calendar .fc-content {
  display: none;
} 

Events Carousel Module

You can target the Events Carousel module with .diec_event_carousel

Hide Navigation Dots On Desktop

/*hide navigation dots on desktop*/

@media (min-width: 981px) {
.diec_event_carousel .owl-dots {
  display: none;
}
}

Make Each Event Equal Height

/*set a min height for each event in the carousel to make them equal*/
.diec_event_carousel .ecs-event .act-post .row {
  min-height: 500px!important;
}

Disable The Event Title Link To The Single Event Page

/*disable the event title link in the Events Carousel*/
.diec_event_carousel  .entry-title a {
pointer-events: none;
}

Disable The Event Image Link To The Single Event Page

/*disable the event image link in the Events Carousel*/
.diec_event_carousel .decm-show-image-left a {
    pointer-events: none;
}

Disable The Event Category Link To The Event Category Page

/*disable the event category link in the Events Carousel*/
.diec_event_carousel  .ecs-categories a {
pointer-events: none;
}

Set The Featured Image Aspect Ratio

/*set the event image aspect ratio*/

.diec_event_carousel .ecs-event .act-post img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

Set The Featured Image Height

/*set the event image height*/

.diec_event_carousel .ecs-event .act-post img {
	position: relative;
	height: 200px;
	object-fit: cover;
}

Change The Scroll Transition Speed

/*change the transition speed of the Events Carousel module*/

.diec_event_carousel .owl-stage {
  transition: all 1.25s ease!important; 
}

Remove @ Symbol Before Time

<script>
jQuery('.ecs-eventTime.duration.time').text(function (_,txt) {
return txt.replace(/@/g, '');
});
</script>

Make Entire Event Clickable

/*add a neceassry position to the events*/

.diec_event_carousel .ecs-event .act-post {
position: relative;
}

/*make the title link spread over the entire event*/

.diec_event_carousel .ecs-event .act-post .entry-title a:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*change the mouse cursor into a pointer*/

.diec_event_carousel .ecs-event .act-post:hover {
cursor: pointer;
}

Events Page Module

You can target the Events Page module with .diec_event_page

Style The Add To Calendar Links As Buttons

/*style the add to cart links as buttons*/
.diec_event_page p.ecs-show_calendar, 
.diec_event_page p.ecs-showical-export, 
.diec_event_page p.ecs-showoutlook-link {
  border-radius: 50px;
  background-color: #0048FF;
  padding: 15px 30px!important;
  text-decoration: none;
  margin-right: 10px;
}

Events Filter Module

You can target the Events Filter module with .decm_event_filter

Style The Filter Reset Button

/*style the filter reset button*/
.decm_event_filter #dec-filter-remove{
  color:red;
}

Change The Width Of Filter Dropdowns

/*change width of filter dropdowns*/

.decm_event_filter_0 .dec-filter-list, .daterangepicker .ranges ul {
  width: 300px;
}

Style The Inline Category Filter Buttons

/*style the inline category filter buttons*/
.dec-filter-event-inline li:nth-child(1) {
  background: red;
}

.dec-filter-event-inline li:nth-child(2) {
  background: blue;
}

.dec-filter-event-inline li:nth-child(3) {
  background: green;
}

.dec-filter-event-inline li:nth-child(4) {
  background: yellow;
}

.dec-filter-event-inline li:nth-child(5) {
  background: purple;
}

.dec-filter-event-inline li:nth-child(6) {
  background: orange;
}

Last updated Mar 6, 2023 @ 3:42 PM