Create custom design Google Calendar widget

  • Created : Jan, 14, 2020
  • Last Updated: Jan, 17, 2020


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

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