Userscripts.org

In Google Calendar month view, increase the font size of days in month view:

http://img189.imageshack.us/img189/6363/zwische...

---

Increase the font size for the month name and set it to bold:

http://img411.imageshack.us/img411/5931/biggera...

When working on a larger monitor, the font sizes in month view for days and month name are too small! Would be very helpful!

obvious question first, is zooming the page any use?

Post the HTML for those elements you want to change - it's probably as easy as adding a CSS rule.

Hi Mike, zooming with Ctrl-+/- makes the Calendar area and the Tasks pane area overlap. Hence this does not work.

It seems that the month number elements have different CSS classes for each month numbers:

http://img23.imageshack.us/img23/3923/elementsz...

This is good for me to look at, I'm learning how to use wildcard matches with querySelectorAll

Google's code isn't very nice, all done in tables and CSS sizes in absolute pixels... yuck.

var doCheck = true;

makeChanges();
setupListener();

function makeChanges() {
	var dayNums = document.querySelectorAll("[class^='ca-cdp']");  // matching all elements whose class begins with 'ca-cdp' 
	for (i=0; i < dayNums.length; i++) {  // loop through the matches
		dayNums[i].style.fontWeight='bold';
		dayNums[i].style.fontSize='200%';
		dayNums[i].style.lineHeight='1em'; 
	}
}


function setupListener(){
  document.addEventListener('DOMNodeInserted',function(e){
     if (doCheck) {
      doCheck = false;
      setTimeout(function(){
        makeChanges();
	doCheck = true;
      }, 50);
     } 
  },false);
}

Pretty straightforward except for having to setup a listener that runs the code again when the view updates.

Hi Mike, thank you very much for your code! I have never written a user-script, so this is how I implemented it:

// ==UserScript==
// @name       Bigger Fonts for Google Calendar
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  Increases some font-sizes in Google Calendar
// @match      https://www.google.com/calendar/*
// @copyright  2012+, Peter Panino
// ==/UserScript==

var doCheck = true;

makeChanges();
setupListener();

function makeChanges() {
	var dayNums = document.querySelectorAll("[class^='ca-cdp']");  // matching all elements whose class begins with 'ca-cdp' 
	for (i=0; i < dayNums.length; i++) {  // loop through the matches
		//dayNums[i].style.fontWeight='bold';
		dayNums[i].style.fontSize='150%';
		dayNums[i].style.lineHeight='1em'; 
	}
}

function setupListener(){
  document.addEventListener('DOMNodeInserted',function(e){
     if (doCheck) {
      doCheck = false;
      setTimeout(function(){
        makeChanges();
	doCheck = true;
      }, 50);
     } 
  },false);
}

It seems to work. Is the implementation correct?

But, in the header, what is @namespace for?

And why is @match relevant, since it's inside a comment?

And what do the listboxes on the Settings page mean and how do I set them up?

Edit: One additional tought: Since the setupListener function is called each time the Calendar page refreshes, is there a new Listener instance created each time? Wouldn't this eat memory resources?

You're welcome. While the top block is commented it is processed by Greasemonkey: http://wiki.greasespot.net/Metadata_Block

Not sure which listboxes you mean but if the script is working they're probably fine ;)

If you refresh the page it clears any listeners added to the document.

I use the script extension "Tampermonkey" for Chrome. This is the Settings page for a script:

http://img441.imageshack.us/img441/6816/setting...

I tried also to create my own code, but unfortunately it does not work:

http://img811.imageshack.us/img811/4434/monthna...

Could somebody please tell me what is wrong here?

Ah Tampermonkey, right. Please post code as text, it's much easier to read.

getElementsByClassName returns an array, not a single element, so you'd need to refer to it with monthName[0] for the first instance and increment the number for any others. 24px needs to be in "quotes" too

As it's a single classname you could just make a new CSS rule to make the change, would be simpler and wouldn't require listening for page updates.

Hi Mike, thank you for your help!

I have tried this, but it does not work:

var monthName = document.getElementsByClassName('date-top');
monthName[0].style.fontSize='24px';

So how would you make a new CSS rule to make the change?

I guess Chrome has something like Firefox's error console? It may give a hint why it's not working. Maybe there's another element with that class before the one you can see ...or maybe the change is made as expected but google's code is refreshing the view before you see the change.. lots of possibilities.

for css it's as simple as:
GM_addStyle(".date-top { font-size: 24px !important; } ");

I think you might be able to do everything with CSS.

div.mv-event-container table.st-grid td > span:first-child {
  font-weight:bold !important;
  font-size:1.5em !important;
}
.date-top {
  font-weight:bold !important;
  font-size:20px !important;
}

In Firefox, you can use Greasemonkey and GM_addStyle or you could use Stylish with the following rule (specific to the .com domain):

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://www.google.com/calendar") {
 div.mv-event-container table.st-grid td > span:first-child {
  font-weight:bold !important;font-size:1.5em !important;
 }
 .date-top {
  font-weight:bold !important;font-size:20px !important;
 }
}

I have read that Chrome has its own features for custom CSS rules.

Ah yes - I've never tried using the first-child CSS selector, definitely a more elegant approach.

Tampermonkey supports some GM_ calls, GM_addStyle being one of them.

Thanks so much to everybody! I've learned a lot with your advices! So I "wrote" an addition to increase the size of the weather images inside the calendar:

GM_addStyle(".st-wc { height: 24px !important; width: 24px !important; } ");

I also tryed to increase the font size of the Today button, but unfortunately it does not work:

GM_addStyle(".navbuttonouter { font-size: 13px !important; } ");

OK, it was the wrong class name. This one increases the font size of the Today button and other navigation buttons:

GM_addStyle(".goog-imageless-button-content { font-size: 13px !important; } ");

Beware, it's addictive. Next thing you'll be coding a control panel with grow/shrink controls and a live preview. ;-)

Yet one last question: I need to change the height of this element:

Damn, why this code block is not displayed despite using the pre tag? Here is the screenshot:

http://img832.imageshack.us/img832/8449/element...

(The class name is not static, it changes from ..evp17.. to ..evp18.. etc.).

In the Chrome HTML view (Inspect elements), when I insert a height value into the style attribute, nothing happens. However, in the "Matched CSS Rules" view, when I change the height value, the element in the browser changes too:

.st-c .te, .st-c .rb-n {
cursor: pointer;
height: 16px;
line-height: 1.2;
padding: 2px 9px;
-moz-transform: all .218s;
-webkit-transform: all .218s;
}

So how can I change the height value of this element with the script?

GM_addStyle('[class^="ca-evp"] { height: 50px !important; }');

Thank you very much for the help, AmpliDude. Now things become clearer and clearer!

@Jefferson Scher
I would love to be able to use css to modify the font-size within my google calendar embed. I've tried your css code and have not been able to get anything to work... Do you have a solution?

Thanks!!!

Cerzky wrote:
@Jefferson Scher
I would love to be able to use css to modify the font-size within my google calendar embed.

When you go to share your Google Calendar and click html it gives you iframe embed code which allows you to copy and paste it on your site and it will display your calendar in an iFrame. I am wanting to modify the css to that Calendar somehow to display a smaller font-size or do a text wrap.

Hi Cerzky, is this for a userscript or for your own website? A userscript can target an iframe directly, but browsers may not allow CSS in the parent page to cross the barrier to the framed site.

I haven't worked with the embedded calendar. Probably someone else will have a chance to dig into it before I do.