Uniform column widths in Outlook-style Calendar

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.

mdsupport wrote on Tuesday, May 07, 2013:

Since you want each provider to have equal real estate, wouldn’t it be simpler to use :

white-space:nowrap;
width:(100/display-count)%;

And if your providers have similar names, display full name using embedded span - no scripting needed.

pfwilliams wrote on Tuesday, May 07, 2013:

That was the “Plan A” I mentioned trying above.
I can leave the width in .providerheader at 100%, while still inserting the “font-size: 0.8em” (since the font is obnoxiously large) and then add a “width: 14.286%” parameter (100/7) to the .schedule definition and have a hardcoded solution for my 7 providers. Getting the count($providers) was doable but somewhere I ran into a roadblock in dynamically updating the style setting for width. Maybe I should revisit that method and try some more, or you’d be able to offer a fix. None of this (php, html, css) is really my forte.

mdsupport wrote on Wednesday, May 08, 2013:

If you use CSS as intended,
div class=‘providerheader’
will become
div class=‘providerheader’ style=‘overflow: hidden; white-space:nowrap; font-size: 0.8em;’

If currently width is 100%, chances are these changes alone may be enough. Width should be dynamic since you do not want to keep making changes as nbr of providers changes.

pfwilliams wrote on Sunday, May 12, 2013:

Your suggestions do not work.
Increasing day\ajax_template.html by 8 lines still appears to me to be the simplest solution.