Create custom design Google Calendar widget demo

Created : Jan, 14, 2020
Last Updated: Oct, 16, 2024

Ready to start organizing your schedule with Google Calendar? If so, our beginner’s guide will help you navigate the basics. Or, if you’re looking for a comprehensive guide on creating a Google Calendar widget for your website, look no further! Our tutorial will walk you through the process step-by-step. Get started today and streamline your scheduling with Google Calendar! Let’s start

Easy Steps

Widget Settings

Create widget -> Google Calendar
Google Calendar ID -> feedwindmikle@gmail.com
General -> Width -> Responsive/In Pixels -> Responsive
General -> Height -> Events-> 3
General -> Scroll -> ON
General -> Scroll -> Horizontal
General -> Scroll -> Navigation arrow -> ON
General -> Scroll -> Autoscroll -> OFF
General -> Scroll -> Fade transition -> OFF

General -> Advanced Settings -> Customs CSS Link -> Show custom css

Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.


/* Copy CSS from here  */

#fw-gc-feed-items-scroll-area {
  background: transparent;
}

header {
  background: #C04848;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #480048, #C04848);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #480048, #C04848);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: white;
}

.fw-gc-feed-header-title .fa {
  padding-right: 15px;
  animation: animationFrames linear 1.8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 1.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 1.8s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 1.8s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 1.8s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames {
  0% {
    transform: translate(0px, 0px);
  }

  15% {
    transform: translate(0px, -25px);
  }

  30% {
    transform: translate(0px, 0px);
  }

  45% {
    transform: translate(0px, -15px);
  }

  60% {
    transform: translate(0px, 0px);
  }

  75% {
    transform: translate(0px, -5px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

@-moz-keyframes animationFrames {
  0% {
    -moz-transform: translate(0px, 0px);
  }

  15% {
    -moz-transform: translate(0px, -25px);
  }

  30% {
    -moz-transform: translate(0px, 0px);
  }

  45% {
    -moz-transform: translate(0px, -15px);
  }

  60% {
    -moz-transform: translate(0px, 0px);
  }

  75% {
    -moz-transform: translate(0px, -5px);
  }

  100% {
    -moz-transform: translate(0px, 0px);
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform: translate(0px, 0px);
  }

  15% {
    -webkit-transform: translate(0px, -25px);
  }

  30% {
    -webkit-transform: translate(0px, 0px);
  }

  45% {
    -webkit-transform: translate(0px, -15px);
  }

  60% {
    -webkit-transform: translate(0px, 0px);
  }

  75% {
    -webkit-transform: translate(0px, -5px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform: translate(0px, 0px);
  }

  15% {
    -o-transform: translate(0px, -25px);
  }

  30% {
    -o-transform: translate(0px, 0px);
  }

  45% {
    -o-transform: translate(0px, -15px);
  }

  60% {
    -o-transform: translate(0px, 0px);
  }

  75% {
    -o-transform: translate(0px, -5px);
  }

  100% {
    -o-transform: translate(0px, 0px);
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform: translate(0px, 0px);
  }

  15% {
    -ms-transform: translate(0px, -25px);
  }

  30% {
    -ms-transform: translate(0px, 0px);
  }

  45% {
    -ms-transform: translate(0px, -15px);
  }

  60% {
    -ms-transform: translate(0px, 0px);
  }

  75% {
    -ms-transform: translate(0px, -5px);
  }

  100% {
    -ms-transform: translate(0px, 0px);
  }
}

.fw-gc-feed-header-title,
.fw-gc-feed-item {
  border: none;
}

.fw-gc-feed-item {
  background-color: white;
  margin: 10px 0;
}

.fw-gc-feed-item:nth-child(even),
.fw-gc-feed-item:nth-child(odd) {
  padding-left: 110px;
  position: relative;
}

.fw-gc-feed-item:nth-child(even) {
  background-color: #4b61a3
}

.fw-gc-feed-item:nth-child(odd) {
  background-color: #2d3e50
}

.fw-gc-feed-item-date {
  position: absolute;
  top: 5px;
  left: 0;
  text-align: center;
  color: white;
}

.fw-gc-feed-item-date-only,
.fw-gc-feed-item-date .fa {
  display: block;
  font-size: 18px;
  padding-top: 10px;
}

.fw-gc-feed-item-date .fa {
  font-size: 54px;
}

/* CSS Ends Here  */

Calendar Title -> Custom -> ON
Calendar Title -> Font size -> 18
Calendar Title -> Colors -> Font color -> #FFFFFF
Calendar Event -> Size -> Event Title -> 18
Calendar Event -> Size -> Where -> 14
Calendar Event -> Size -> Description -> 16
Calendar Event -> Size -> Start Time/Date -> 14
Calendar Event -> Colors -> Event Title -> #FAFAFA
Calendar Event -> Colors ->Where -> #9B9B9B
Calendar Event -> Colors -> Description -> #FFFFFF
Calendar Event -> Colors -> Start Time/Date -> #929ba3
Calendar Event -> Colors -> Background -> #FFFFFF
Calendar Event -> Date -> Start Time/Date -> ON

Rest keep as default

Create custom design Google Calendar widget demo

Easy Steps

Related posts

Tutorial Categories

Create custom design Google Calendar widget demo

Easy Steps

Related posts

How to Create a Vimeo Video Widget for Your Website – Easy Guide

Ultimate Bento Design in FeedWind Widgets

Facebook posts: Enhance your brand’s online presence with custom overlay design

Tutorial Categories