Printable PyCon 2024 schedule

Want to print out the PyCon US schedule? Paper doesn’t run out of batteries, is easy to scribble on, and stuff into a pocket (technical term: the affordances of paper).

Here’s some custom CSS and JavaScript to make it nicely printable.

Install the Styler browser extension
View a PyCon schedule page such as https://us.pycon.org/2024/schedule/talks/ and click the Styler extension’s S icon
Paste this CSS into the upper box:


<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.internal-page-header</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.panel-heading</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>footer</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.badges</span> <span>{</span>
  <span>display</span><span>:</span> <span>none</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.container</span> <span>{</span>
  <span>margin</span><span>:</span> <span>0</span><span>;</span>
  <span>max-width</span><span>:</span> <span>fit-content</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>main</span><span>.content</span> <span>{</span>
  <span>margin</span><span>:</span> <span>0</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.calendar</span> <span>{</span>
  <span>left</span><span>:</span> <span>auto</span> <span>!important</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.slot</span> <span>{</span>
  <span>padding</span><span>:</span> <span>5px</span><span>;</span>
<span>}</span>
<span>@media</span> <span>print</span> <span>{</span>
  <span>a</span><span>:</span><span>after</span> <span>{</span> <span>content</span><span>:</span><span>''</span><span>;</span> <span>}</span>
  <span>a</span><span>[</span><span>href</span><span>]</span><span>:after</span> <span>{</span> <span>content</span><span>:</span> <span>none</span> <span>!important</span><span>;</span> <span>}</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.internal-page-header</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.panel-heading</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>footer</span><span>,</span>
<span>body</span><span>.pycon-schedule</span> <span>div</span><span>.badges</span> <span>{</span>
  <span>display</span><span>:</span> <span>none</span><span>;</span>
<span>}</span>

<span>body</span><span>.pycon-schedule</span> <span>.container</span> <span>{</span>
  <span>margin</span><span>:</span> <span>0</span><span>;</span>
  <span>max-width</span><span>:</span> <span>fit-content</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>main</span><span>.content</span> <span>{</span>
  <span>margin</span><span>:</span> <span>0</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.calendar</span> <span>{</span>
  <span>left</span><span>:</span> <span>auto</span> <span>!important</span><span>;</span>
  <span>width</span><span>:</span> <span>100%</span> <span>!important</span><span>;</span>
<span>}</span>
<span>body</span><span>.pycon-schedule</span> <span>.slot</span> <span>{</span>
  <span>padding</span><span>:</span> <span>5px</span><span>;</span>
<span>}</span>
<span>@media</span> <span>print</span> <span>{</span>
  <span>a</span><span>:</span><span>after</span> <span>{</span> <span>content</span><span>:</span><span>''</span><span>;</span> <span>}</span>
  <span>a</span><span>[</span><span>href</span><span>]</span><span>:after</span> <span>{</span> <span>content</span><span>:</span> <span>none</span> <span>!important</span><span>;</span> <span>}</span>
<span>}</span>
body.pycon-schedule div.internal-page-header,
body.pycon-schedule div.panel-heading,
body.pycon-schedule footer,
body.pycon-schedule div.badges {
  display: none;
}

body.pycon-schedule .container {
  margin: 0;
  max-width: fit-content;
}
body.pycon-schedule main.content {
  margin: 0;
  width: 100% !important;
}
body.pycon-schedule .calendar {
  left: auto !important;
  width: 100% !important;
}
body.pycon-schedule .slot {
  padding: 5px;
}
@media print {
  a:after { content:''; }
  a[href]:after { content: none !important; }
}

Enter fullscreen mode Exit fullscreen mode

Paste this JavaScript into the lower box:


<span>$</span><span>(</span><span>document</span><span>).</span><span>ready</span><span>(</span><span>function</span><span>()</span> <span>{</span>
    <span>if </span><span>(</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2024/schedule/</span><span>'</span><span>)</span> <span>&&</span> 
       <span>!</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2024/schedule/presentation/</span><span>'</span><span>))</span> <span>{</span>
    <span>$</span><span>(</span><span>"</span><span>body</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>pycon-schedule</span><span>"</span><span>);</span>
  <span>}</span>
<span>});</span>
<span>$</span><span>(</span><span>document</span><span>).</span><span>ready</span><span>(</span><span>function</span><span>()</span> <span>{</span>
    <span>if </span><span>(</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2024/schedule/</span><span>'</span><span>)</span> <span>&&</span> 
       <span>!</span><span>window</span><span>.</span><span>location</span><span>.</span><span>pathname</span><span>.</span><span>match</span><span>(</span><span>'</span><span>2024/schedule/presentation/</span><span>'</span><span>))</span> <span>{</span>
    <span>$</span><span>(</span><span>"</span><span>body</span><span>"</span><span>).</span><span>addClass</span><span>(</span><span>"</span><span>pycon-schedule</span><span>"</span><span>);</span>
  <span>}</span>
<span>});</span>
$(document).ready(function() {
    if (window.location.pathname.match('2024/schedule/') && 
       !window.location.pathname.match('2024/schedule/presentation/')) {
    $("body").addClass("pycon-schedule");
  }
});

Enter fullscreen mode Exit fullscreen mode

Print!

It’ll run on any of the https://us.pycon.org/2024/schedule/* pages, but not the individual presentation pages such as https://us.pycon.org/2024/schedule/presentation/61/

It’s not perfect, the right edge is slightly cut off, but it’s more printable than the original.

Once printed, you can click the Styler icon and the x button to disable Styler for the site so you can browse the original version.