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 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;
}

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;
}

Set The Featured Image Aspect Ratio

/*set the event image aspect ratio*/

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

Custom Pagination Text

/*remove default previous pagination text*/
a.ecs-page_alignment_left {
visibility: hidden;
}

/*add new custom previous pagination text*/
a.ecs-page_alignment_left:before {
content: 'Custom Text Here';
visibility: visible;
}

/*remove default next pagination text*/
a.ecs-page_alignment_right {
visibility: hidden;
}

/*add new custom next pagination text*/
a.ecs-page_alignment_right:after {
content: 'Custom Text Here';
visibility: visible;
}

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;
}

Hide Saturday And Sunday Columns

/*hide Saturday and Sunday columns*/
.decm_divi_event_calendar .fc-sun, .decm_divi_event_calendar .fc-sat {
  display: none;
}
.decm_divi_event_calendar .fc .fc-row .fc-content-skeleton td {
  width: 100%;
}

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;
}

Hide The Time In the List View

/*hide time in Events Calendar List View*/
.decm_divi_event_calendar .fc-list-item-time.fc-widget-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 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;
}

Add Colons To Labels

/*add colons to details labels*/
.ecs-detail-label::after{
	content: ":";
 	left: -3px;
 	position: relative;
}

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 Filter Item Labels (Change City To Town Example)

/*remove filter label*/
.decm_event_filter_0 .dec-filter-bar.dec-city-filter .dec-filter-label span:first-child {
  display: none;
}

/*show custom word instead*/
.decm_event_filter_0 .dec-filter-bar.dec-city-filter .dec-filter-label span:before {
  content: 'Town';
}

Last updated May 9, 2022 @ 11:51 am GMT-0400

Is This Article Helpful?