Customizing the new calendar widget layout - what I've learned

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
If you're new at this widget stuff like I am and would like to know how to customize the layout (my initial goal was to be able to indent the "location" field of each event), I've put together a summary of what I've learned.   Disclaimer:  I know almost zero about javascript and css, and much less than that about the tools that need to be installed to make this work but I do have a programming background and am comfortable in the Linux shell.   With this page as a starting point, here is what I've done:

  1. I installed the latest Ubuntu version (14.10) as a VMware guest which would allow me to easily save my work in different stages using snapshots and revert if anything weird happened along the way.  

  2. Once Ubuntu was installed, install git:  
    sudo apt-get install git
  3. According to the node.js page from the above link, the latest Ubuntu version has the required software repositories enabled so you can install directly using:
    sudo apt-get install nodejs nodejs-dev npm
    I learned that this does not install "node", however, "nodejs" is installed and works with the hello_world.js example given on the node.js page above.   Later on you will see that we'll need "node" after all.

  4. Install bower:
    sudo npm install -g bower
  5. Install gulp:
    sudo npm install -g gulp
    This failed due to "node" not being installed.  The fix is to get "node" by installing nodejs-legacy first:
    sudo apt-get install nodejs-legacy
    You can then install gulp per above.

  6. Next I created a work directory and cloned the code using git:
    mkdir work
    cd work
    git clone https://github.com/Rise-Vision/widget-google-calendar.git
  7. For the next step, "npm install" fails, so you need sudo:
    sudo npm install
  8. Run bower:
    bower install
  9. Build the widget:
    gulp build
  10. Now that you have the environment set up and the widget built as distributed, you can change the layout by modifying the css file in the src/widget/widget.css file.

    In my case, I wanted to indent the "location" field for each event so I added the following:
    .location {
        margin-left: 40px;
    }
  11. Build the "dist" folder again by navigating to the folder where you cloned the widget to and then:
    gulp build
  12. Upload the "dist" folder to your hosting provider and follow the remaining instructions here to add the customized widget.
Photo of FAC Signage

FAC Signage

  • 732 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Excellent work.  Thanks for providing the steps on what you've done.  I'm sure it will help a lot of people.
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb
Curtis, I hacked the widget to let you put in CSS additions to the settings page. That has proven, for me, much easier that lots of "gulp build" iterations.  See here.

https://community.risevision.com/rise_vision_inc/topics/new-google-calendar-widget-with-custom-css-s...
Photo of FAC Signage

FAC Signage

  • 732 Points 500 badge 2x thumb
Oliver, this is terrific!  Agreed, iterative builds is less than optimal and I look forward to looking at your changes to the source and learning from it.   Many thanks from myself and our church communications team for your efforts in making these improvements!

Curtis