DEV

WordPress Calendar Embed

ICS Calendar

Previous Page

Share

STEP 1
Install ICS Calendar
STEP 2:
Add Css to apperance customiser
Notes:
Edit the PHP template, to change text display for booked events. This example is for all day.

Script & CSS

Original Css:

Revised Css to remove dtails from the ICS events, Css added to appearence customiser

				
					.ics-calendar-month-grid .events .title {
    display: block;
    font-size: 100% !important;
    line-height: 1.5em;
}
				
			
				
					.ics-calendar-month-grid .events .title {
    display: none;
    font-size: 100% !important;
    line-height: 1.5em;
}

Original Css:

				
					.ics-calendar-month-grid .events .all-day-indicator {
    display: block;
    font-size: 80%;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: uppercase;
}

The .all-day-inicator Class can be edited within the plugin files.

This can be found in 

ics-calendar\templates\calendar-month.php  on line 201

				
					# Original #
<span class="all-day-indicator"><?php esc_html_e('All Day', 'ics-calendar'); ?></span>

## Revised ###
<span class="all-day-indicator"><?php esc_html_e('Booked', 'ics-calendar'); ?></span>

Further styling provide a nicer boxed block.

				
					.ics-calendar-month-grid .events .all-day-indicator {
    display: block;
    font-size: 100%;
    font-weight: 400;
    line-height: 6;
    text-transform: uppercase;
    padding-left: 32%;
    background-color: #d5d7d588;
}
				
			
				
					.ics-calendar-month-grid {
    background-color: var(--r34ics--color--white);
    border-collapse: collapse;
    line-height: 1.5em;
    margin: .5em 0;
    table-layout: fixed;
    width: 100%;
    border-radius: 20px 20px 30px 30px;
}
				
			
				
					.ics-calendar-color-key {
    clear: both;
    display: none;
    font-size: 85%;
    margin: 0 0 1.5em;
}

This removes the colour key when feeding 2 ICS feeds.

				
					.ics-calendar-color-key-item label
Specificity: (0,1,1)
 {
    margin: 0;
    display: none;
}

Shortcode Parameters

				
					<div class="r34ics-ajax-container loading" data-args="86a5e0ac201605291dc1dacc7e308af723370b05" data-js-args="{&quot;debug&quot;:null}" data-r34icsym="202606" data-r34icsymd="20260605" data-view-is-list-long="0" data-view-is-list-style="0" data-view="month" id="r6a2340b89b9ba3e">&nbsp;</div>
				
			
				
					<div class="r34ics-ajax-container loading" data-args="0ca404bbdde1245cabb51b069814dd6b993f969e" data-js-args="{&quot;debug&quot;:null}" data-r34icsym="202606" data-r34icsymd="20260605" data-view-is-list-long="0" data-view-is-list-style="0" data-view="month" id="r6a2340b89c12839">&nbsp;</div>

Note:

Editing plugin files are a short fix when the plugin updates, the change needs to be made again, Ensure your have the css, removing the details from the ICS feed.

 
Previous Page