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

Questions
,
1

Essentially through salesforce and skuid I want to create a yearly view event calendar like the first example here: https://developers.google.com/chart/interactive/docs/gallery/calendar 

1 Like
2

That is a super slick simple calendar! Second parameter is the mouse over text.

Would be easy to use in Skuid. Slick!

3

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:

https://community.skuid.com/t/embedded-kendoui-chart

https://community.skuid.com/t/google-charts-in-skuid-template

Hope that helps. Thanks!

4

Neel,

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

Thanks,

Bill

<div id="calendar_basic" style="width: 1000px; height: 350px;"></div> https://www.gstatic.com/charts/loader.js">var params = arguments[0], $ = skuid.$; (function(skuid){ var $ = skuid.$; $(document.body).one('pageload',function(){ google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart);

});
})(skuid);

function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: ‘date’, id: ‘Date’ });
dataTable.addColumn({ type: ‘number’, id: ‘Won/Loss’ });
dataTable.addRows([
[ 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);

}







5

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,