☰

Google Calendar - Hide Header

Hide the header of Google Calendar. Show it when you click on the "Calendar" logo in the top left.

  1. // ==UserScript==
  2. // @name         Google Calendar - Hide Header
  3. // @namespace    http://seanbannister.com/
  4. // @version      0.3
  5. // @description  Hide the header of Google Calendar. Show it when you click on the "Calendar" logo in the top left.
  6. // @author       Sean Bannister
  7. // @match        *://calendar.google.com/*
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.   'use strict';
  12.  
  13.   var header = document.getElementById('onegoogbar').style;
  14.  
  15.   // Hide the header
  16.   header.display = 'none';
  17.  
  18.   // When you click on the word "Calednar" (The logo in the top left)
  19.   document.getElementById('mainlogo').addEventListener('click', function() {
  20.     // If header is hidden show it
  21.     if (header.display == 'none') {
  22.       header.display = 'block';
  23.     }
  24.     // If header is showing hide it
  25.     else if (header.display == 'block') {
  26.       header.display = 'none';
  27.     }
  28.   });
  29.  
  30.   /**
  31.    * Make the popups that display reminders and events details larger.
  32.    */
  33.   addGlobalStyle('.bubble { top: 130px; width: 700px !important; }');
  34.   addGlobalStyle('div[jsname=QScM4d] { max-height: 500px !important; }');
  35.   addGlobalStyle('.reminder-title-container { width: 560px; }');
  36.   addGlobalStyle('.reminder-title-container span { max-width: 550px !important; }');
  37.   // When you create or edit a reminder make the time drop down larger so you don't have to scroll through it as much.
  38.   addGlobalStyle('.reminder-bubble .duedate-tile .goog-container-vertical { height: 900px !important; }');
  39.  
  40.  
  41.   function addGlobalStyle(css) {
  42.     var head, style;
  43.     head = document.getElementsByTagName('head')[0];
  44.     if (!head) { return; }
  45.     style = document.createElement('style');
  46.     style.type = 'text/css';
  47.     style.innerHTML = css;
  48.     head.appendChild(style);
  49.   }
  50. })();