dojox.calendar and JsonRest - how to update? - json

Question

I'm very new to dojo, so please bear with me. I'm currently working on creating a dojo calendar, with events sourced from a database. The calendar defaults to the grid (monthly) view, and on load, makes an initial call to get the first set of events. The default view makes a call to get the current months events +/- one week. I'm using a JsonRest object in an Observable to accomplish this.
This is currently working without issue. Where I'm having an issue is pulling / updating data for other months. The desired effect is to have the user click the forward or back button to move to the next or previous month. When this occurs, I would like to query the database for the new events to display. I'm able to return the new data and log it to the console, but I cannot get it to display on the calendar. I'm sure I'm missing something (hopefully) simple, but I cant figure it out, or find any good documentation. Here's what I have:
require(['dojo/parser',
'dojo/ready',
'dojox/calendar/Calendar',
'dojo/store/Observable',
'dojo/store/JsonRest',
'dijit/registry'],
function(parser, ready, Calendar, Observable, JsonRest, registry) {
ready(function(){
var MM = new Date().getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
var YYYY = new Date().getFullYear();
var monthStore = new Observable(JsonRest({target: '/levelx/teamSchedule/getMonthInfo/'}));
calendar = new Calendar({
store: monthStore,
dateInterval: 'month',
style: styleText,
editable: false,
cssClassFunc: function(e){
return e.calendar;
},
query: '?q=' + YYYY + '-' + MM
}, 'calendar');
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
monthStore.query('?q=' + YYYY + '-' + MM).then(function(results){
console.log(results);
});
});
I feel like I'm so close. Like I said, I have the correct data being returned to the console (console.log(results)), but no clue how to get it to show in the actual calendar.

Answer 1

I was able to accomplish what I needed with the following modifications. Whenever the user changes the displayed date range, it will automatically run a query to gather and display the proper events.
require(['dojo/parser',
'dojo/ready',
'dojox/calendar/Calendar',
'dojo/store/JsonRest',
'dijit/registry',
'dojo/dom',
'dojo/html'],
function(parser, ready, Calendar, JsonRest, registry, dom, html) {
ready(function(){
var MM = new Date().getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
var YYYY = new Date().getFullYear();
var detailStore = JsonRest({target: '/levelx/teamSchedule/getDayInfo/'});
var monthStore = JsonRest({target: '/levelx/teamSchedule/getMonthInfo/'});
calendar = new Calendar({
dateInterval: 'month',
style: styleText,
editable: false,
cssClassFunc: function(e){
return e.calendar;
}
}, 'calendar');
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
calendar.set('query','?q=' + YYYY + '-' + MM);
calendar.set('store', monthStore);
});
});
});

Answer 2

Try changing the interval-change function so that query is set via Calendar object and not directly onto the store.
calendar.on("timeIntervalChange",function(e){
var YYYY = e.startTime.getFullYear();
var MM = e.startTime.getMonth() + 1;
if (MM < 10)
{ MM = '0' + MM};
// this
this.query('?q=' + YYYY + '-' + MM).then(function(results){
console.log(results);
});
});
Have never used the calendar just yet, so its a guess tbh.. But it looks like there's an initial query to be set in the calendar properties, and that this should reflect in the dojo.store.api. The calendar itself most likely does not observe correctly and then in turn does not render when new data arrives.