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

Sports-widget

Add a Dynamic Sports Widget to Your Website

Contents1 Increase User Engagement1.1 Increased Engagement1.2 Lower Bounce Rates1.3 Level Up User Experience2 How to Add FeedWind Sports Widget...

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

Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background

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