pfwilliams wrote on Tuesday, May 07, 2013:
The column width in the Outlook-style Calendar’s day view is dependent upon the length of the provider name. I’ve found this makes for a odd looking table where each provider gets a different amount of “real estate”. I made a small effort a while back to count providers, then divide to receive a percentage, then apply that percentage to column widths via html style settings. It did not function as desired. I’ve tried more of an old-school approach this time and it seems to be behaving well. I was wondering if anyone else might give it a try and tell me what they think?
(I’d meant this to be my first Github branch/commit, but returning to Github a month after creating my account, I’m having issues. Having misplaced my SSH key passphrase being one of them)
I modified the .providerheader entry at line 217 of ajax_calendar.css to reduce the overly-large font size, switch to a monospaced font, and disable whitespace compression:
.providerheader {
font-family: "Lucida Console", Monaco, monospace;
font-size: 0.8em;
text-align: center;
background-color: #EDEAFF;
width: 100%;
overflow: hidden;
border-bottom: 1px solid lightgrey;
white-space: pre;
I replaced lines 406-408 (inclusive) of day\ajax_template.html with the following 10 lines to pad the provider name headings to be a standard length, collapsing first names down to first initial if a name is over a certain length:
$pname_max = 20; // needs tuning? go global?
$pname_display = htmlspecialchars($provider['fname'],ENT_QUOTES)." ".htmlspecialchars($provider['lname'],ENT_QUOTES);
If (strlen($pname_display) > $pname_max) {
$pname_display = htmlspecialchars(substr($provider['fname'], 0, 1),ENT_QUOTES)." ".htmlspecialchars($provider['lname'],ENT_QUOTES);
}
$pname_len = ($pname_max - strlen($pname_display)) / 2;
$pname_display = substr(" ", 0, $pname_len + .5).$pname_display.substr(" ", 0, $pname_len);
echo "<td class='schedule' title='".$pname_display."' date='".date("Ymd",$caldate )."' provider='$providerid'>";
echo "<div class='providerheader'>";
echo $pname_display."</div>";
How does it work for you?
For me, it creates a much prettier calendar with uniform column sizes for our 7 providers whose firstname/space/lastname strings vary from 10 to 17 characters.
Edit: You’ll likely need to clear your browsers cache to apply the .css changes, and corrected syntax error introduced by adding last-minute tuning/global comments.