How can I make an event calendar that is a full year view?

edited June 25, 2020 in Questions
Essentially through salesforce and skuid I want to create a yearly view event calendar like the first example here: 


  • Pat Vachon
    Pat Vachon 💎💎💎
    edited June 25, 2020
    That is a super slick simple calendar! Second parameter is the mouse over text.

    Would be easy to use in Skuid. Slick!
  • Matt Brown
    Matt Brown 🛠️ 
    edited December 10, 2019
    Hi Neel! I think that would be a great idea for a custom Skuid component. You may also be able to embed a Google Chart like this one using a Skuid template. There are a few posts about this on the Community that may be helpful:

    Hope that helps. Thanks!
  • Bill McCullough
    Bill McCullough 💎💎
    edited December 11, 2019

    Here's a quick adaptation of the sample code from Google.  This will get you started.



    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
    <template multiple="false" uniqueid="sk-3qxw-299" allowhtml="true">
    <contents>&lt;div id="calendar_basic" style="width: 1000px; height: 350px;"&gt;&lt;/div&gt;</contents>
    <jsitem location="external" name="googleCharts" cachelocation="false" url="var" alt="" title="" name="" value="" type="">">var params = arguments[0],
    $ = skuid.$;
    <jsitem location="inline" name="loadCalendar" cachelocation="false" url="">(function(skuid){
    var $ = skuid.$;
          google.charts.load("current", {packages:["calendar"]});

    function drawChart() {
           var dataTable = new google.visualization.DataTable();
           dataTable.addColumn({ type: 'date', id: 'Date' });
           dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
              [ new Date(2012, 3, 13), 37032 ],
              [ new Date(2012, 3, 14), 38024 ],
              [ new Date(2012, 3, 15), 38024 ],
              [ new Date(2012, 3, 16), 38108 ],
              [ new Date(2012, 3, 17), 38229 ],
              // Many rows omitted for brevity.
              [ new Date(2013, 9, 4), 38177 ],
              [ new Date(2013, 9, 5), 38705 ],
              [ new Date(2013, 9, 12), 38210 ],
              [ new Date(2013, 9, 13), 38029 ],
              [ new Date(2013, 9, 19), 38823 ],
              [ new Date(2013, 9, 23), 38345 ],
              [ new Date(2013, 9, 24), 38436 ],
              [ new Date(2013, 9, 30), 38447 ]

           var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

           var options = {
             title: "Red Sox Attendance",
             height: 350,

           chart.draw(dataTable, options);
    <styleitem type="background" bgtype="none"/>

  • Germany3
    Germany3 🛠️ 

    Hey @Neel , and thank you for bringing up that question!

    Skuid has implemented a calendar component in the new Chicago release which is now available on the Skuid Releases page. Best practices for upgrading can be found in Upgrading Skuid on Salesforce.  As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission-critical functionality before installing into a production environment.

    We also recommend that you update out-of-date themes and design systems after you upgrade. Please let us know if you continue to encounter any problems with this issue after upgrading.

    Thanks again,

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!