Create New All-in-One Calendar Plugin Theme

June 06, 2018

Ever thought about customizing Time.ly’s All-in-One Event Calendar layouts on your website?

Step 1:

Navigate to wp-content > plugins > all-in-one-events-calendar > app > config >constants.php and update AI1EC_DEBUG to true

// Enable All-in-One-Event-Calendar to work in debug mode, which means,
// that cache is ignored, extra output may appear at places, etc.
// Do not set this to any other value than `false` on production even if
// you know what you are doing, because you will waste valuable
// resources - save the Earth, at least.
if ( ! defined( 'AI1EC_DEBUG' ) ) {
    define( 'AI1EC_DEBUG', true );
}

This will show errors as you’re editing your theme with twig.

Step 2:

Navigate to wp-content > plugins > all-in-one-events-calendar > public > themes-ai1ec and download or copy a theme to begin modifying.

Step 3:

Move the duplicated theme to wp-content > themes-ai1ec and give it a custom name.

Step 4:

Update style.css for your new theme with the new title and a description of your theme.

/**
 * Theme Name: Modified-Calendar
 * Theme URI: http://katherinewestwood.com
 * Author: Katherine Goodmanson
 * Author URI: http://katherinewestwood.com
 * Description: Katherine modified vortex theme
 * Version: 1.0.0
 * Tags: light, white, gray, blue
 */

Step 5:

Copy files that you’d like to modify from the twig folders of existing themes (see Step 2) into the twig folder of your new theme, and begin making edits.

Step 6:

Edit the theme files you’d like to include. For example, customize the Agenda view and include images using the following:

{{ navigation | raw }}

<div class="ai1ec-agenda-view{% if has_product_buy_button %} ai1ec-has-product-buy-button{% endif %}">
	{% if dates is empty %}
		<p class="ai1ec-no-results">
			{{ text_upcoming_events }}
		</p>
	{% else %}
		{% for date, date_info in dates %}
			
			<div class="ai1ec-date
				{% if date_info.today is not empty %}ai1ec-today{% endif %}">
				
				{% for category in date_info.events %}
					{% for event in category %}
					
						{% if event.avatar_not_wrapped is not empty %}
							<a class="ai1ec-load-event"
								href="{{ event.permalink | e('html_attr') }}">
								
								<div class="ai1ec-event-border">
									<div class="ai1ec-event-avatar">
										<div class="agenda-image" style="background-image:url({{ event.avatar_url | e( 'html_attr' ) }});">
																				
										</div>
									</div>
								</div>
							</a>
						{% endif %}
						
					
					{% endfor %} {# event in category #}
				{% endfor %} {# category in date_info.events #}
				
				
				
				<a class="ai1ec-date-title ai1ec-load-view"
					href="{{ date_info.href | e('html_attr') }}"
					{{ data_type | raw }}>
					<div class="ai1ec-month">{{ date_info.month }}</div>
					<div class="ai1ec-day">{{ date_info.day }}</div>
					{% if show_year_in_agenda_dates %}
						<div class="ai1ec-year">{{ date_info.year }}</div>
					{% endif %}
				</a>
				
				
				
				<div class="ai1ec-date-events">
					{% for category in date_info.events %}
						{% for event in category %}
							<div class="ai1ec-event
								ai1ec-event-id-{{ event.post_id }}
								ai1ec-event-instance-id-{{ event.instance_id }}
								{% if event.is_allday %}ai1ec-allday{% endif %}
								{% if expanded %}ai1ec-expanded{% endif %}"
								{% if event.ticket_url is not empty %}
									data-ticket-url="{{ event.ticket_url | e( 'html_attr' ) }}"
								{% endif %}
								data-end="{{ event.end }}">

								<div class="ai1ec-event-header">
									
									<a class="ai1ec-load-event"	href="{{ event.permalink | e('html_attr') }}">
										<span class="ai1ec-event-title">
											{{ event.filtered_title | raw }}
											{% if show_location_in_title and event.venue is not empty %}
												<span class="ai1ec-event-location"
													>{{ text_venue_separator | format( event.venue ) }}</span>
											{% endif %}
										</span>
									</a>
									{{ action_buttons | raw }}
									{% set edit_post_link = event.edit_post_link %}
									{% if edit_post_link is not empty %}
										<a class="post-edit-link" href="{{ edit_post_link | raw }}">
											<i class="ai1ec-fa ai1ec-fa-pencil"></i> {{ text_edit }}
										</a>
									{% endif %}

									<div class="ai1ec-event-time">
										 {{ event.timespan_short | raw }}
									</div>
								</div>
								
							</div>
						{% endfor %} {# event in category #}
					{% endfor %} {# category in date_info.events #}
				</div>
			</div>
			
			
		{% endfor %} {# date, date_info in dates #}
	{% endif %} {# dates is not empty #}
</div>

<div class="ai1ec-pull-left">{{ pagination_links | raw }}</div>

Step 7:

Include style adjustments within your theme.

Step 8:

Deactivate twig debug mode and you’re all done!

References:

• Create New Calendar Theme
• Display Multiple Calendars Site
• All in One Event Calendar Theme Customization Tutorial – My Perfect WordPress Calendar