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);
        });
    });
});