It is nice to be able to display multiple lines, however, it’s just a bit of a shame that the formatting doesn’t come out more cleanly.

Your website needs to be able to serve PHP files for this to work.

custom_calendar.php


<?php
$your_google_calendar="https://www.google.com/calendar/embed?src=usa__en@holiday.calendar.google.com&gsessionid=OK";
$url= parse_url($your_google_calendar);
$google_domain = $url['scheme'].'://'.$url['host'].dirname($url['path']).'/';

// Load and parse Google's raw calendar
$dom = new DOMDocument;
$dom->loadHTMLfile($your_google_calendar);

// Change Google's CSS file to use absolute URLs (assumes there's only one element)
$css = $dom->getElementByTagName('link')->item(0);
$css_href = $css->getAttributes('href');
$css->setAttributes('href', $google_domain . $css_href);

// Change Google's JS file to use absolute URLs
$scripts = $dom->getElementByTagName('script')->item(0);
foreach ($scripts as $script) {
$js_src = $script->getAttributes('src');
if ($js_src) $script->setAttributes('src', $google_domain . $js_src);
}

// Create a link to a new CSS file called custom_calendar.css
$element = $dom->createElement('link');
$element->setAttribute('type', 'text/css');
$element->setAttribute('rel', 'stylesheet');
$element->setAttribute('href', 'custom_calendar.css');

// Append this link at the end of the element
$head = $dom->getElementByTagName('head')->item(0);
$head->appendChild($element);

// Export the HTML
echo $dom->saveHTML();
?>


custom_calendar.css


.dp-cur, .chip dt, .te, .te-t, .te-rev-s, .rb-n, .rb-i, .agenda, .event-title{
white-space:normal !important;
}


In many places having the lines wrap will “mess up” the appearance of the calendar by creating lots of gaps between events. You may need some experimentation to get it to look right for your site.

I’m just struggling to put all the code together to achieve this.

I actually did not customize the wrap-text feature; this particular calendar is in agenda view and has enough room for all the titles to stretch. However, if I were to hazard a guess as to which attribute to change in the Google CSS, I would say .agenda .event-title would be the one. For example, my CSS currently reads as follows:

.agenda .event-title {
clear: none;
color: #D15600;
display: block;
font-size: 12px;
font-style: normal;
font-weight: normal;
margin: 0;
overflow: hidden;
white-space: nowrap;
}

I would change that to:
.agenda .event-title {
clear: none;
color: #D15600;
display: block;
font-size: 12px;
font-style: normal;
font-weight: normal;
margin: 0;
overflow: hidden;
white-space: normal;
}

Hope that helps!