Google Calendar Material v2.1

Added by Balázs Orbán@userstyles, Created: Apr 08, 2016, Updated: Apr 21, 2016
  • With the style applied
  • v1.2
  • without the style
  • with the style


I am trying to bring Material Design to the Desktop version of Google's Calendar.

If you have any ideas/problems, please contact me!

This is actually for my own entertainment and css practicing, but feel free to grab it and modify if you would like ;)

More info
-small fixes
-changed navbar:
it is grey now, and has the google calendar logo on the left.
- top month picture will dynamically change as the month changes!


Go and get the userscript for it here:

-Quick fix for some of the issues I got
-Preparing code for Event Flairs!
(Those events with a nice flat background. Here is an example:
-Changing icons from PNG to SVG
-Sidebar on the left now uses the entire height. NOTE! I struggle making the day selector perfect circle on different screens. Might be fixed in future update
- Pop-up event viewer is styled now. (Right now only static background, will be changed dinamically in the future)

-Bug fixes (should be nicer on different screen sizes (still a lot to do though))
-Mainly tried to get the code cleaner and more organized.

- Perfected top search bar
- Google Calendar Seasonal Image to make the calendar more alive!
-Bigger, bolder Weekdays
-The "time right now" marker is stretching over the entire screen, so you can always catch up what time is it at the moment.
- FAB has a rotating animation on hover

- Even more Material Design!

- I made the FAB (create event) look like on the Android version ( there is a plus sign, and the button sits on the right bottom of the page)
- I made the side calendar look like on Android (selected day is a blue circle)

You should to add comment and rate the style.


+ Create discussion

Applies to:

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.