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

Rest keep as default

Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Here’s an example and steps to create a overlay 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.