Create custom design Google Calendar widget

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


Easy Steps

Widget Settings
  1. Create widget -> Google Calendar
  2. Google Calendar ID -> feedwindmikle@gmail.com
  3. General -> Width -> Responsive/In Pixels -> Responsive
  4. General -> Height -> Events-> 3
  5. General -> Scroll -> ON
  6. General -> Scroll -> Horizontal
  7. General -> Scroll -> Navigation arrow -> ON
  8. General -> Scroll -> Autoscroll -> OFF
  9. General -> Scroll -> Fade transition -> OFF
  10. 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  */
    
  11. Calendar Title -> Custom -> ON
  12. Calendar Title -> Font size -> 18
  13. Calendar Title -> Colors -> Font color -> #FFFFFF
  14. Calendar Event -> Size -> Event Title -> 18
  15. Calendar Event -> Size -> Where -> 14
  16. Calendar Event -> Size -> Description -> 16
  17. Calendar Event -> Size -> Start Time/Date -> 14
  18. Calendar Event -> Colors -> Event Title -> #FAFAFA
  19. Calendar Event -> Colors ->Where -> #9B9B9B
  20. Calendar Event -> Colors -> Description -> #FFFFFF
  21. Calendar Event -> Colors -> Start Time/Date -> #929ba3
  22. Calendar Event -> Colors -> Background -> #FFFFFF
  23. Calendar Event -> Date -> Start Time/Date -> ON
  24. Rest keep as default


Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Create widget in Overlay style

Here’s an example and steps to create a overlay widget

Facebook widget

Example Facebook page widget in large image style

Easily create a Facebook widget with a large image style and customize it as your need.

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now