Create custom design Google Calendar widget

Created : Jan, 14, 2020
Last Updated: May, 12, 2022

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

Easy Steps

Related posts

Tutorial Categories

Create custom design Google Calendar widget

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