We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 6180
    • 31 Posts
    I’m working on setting up a calendar of events in Revo using the technique described here:
    http://www.newmediacampaigns.com/page/create-a-jquery-calendar-with-ajax-php-and-a-remote-data-source
    and
    http://www.gethifi.com/blog/salvation-army-calendar-with-jquery-and-thickbox

    The technique uses jquery to take a PHP derived calendar (based on http://davidwalsh.name/php-calendar) and associate each cell with a list of events occurring on the represented day. The jquery call executes a PHP script that does a lookup against a database to retrieve an unordered list of calendar entries, then the JS builds the link and adds a handler for the onclick event of each calendar entry.

    I’m trying to translate this process to modx so I can use it in a similar setting, however I simply don’t understand enough about modx development, PHP and JS to accomplish the task. I have successfully set up the calendar generator as a snippet, but I’m not sure about how to work in the javascript. I can generate the unordered list of events using a getResources call (my events are simply resources in a specified container), but I’m not sure how to reference that from inside the JS, as the sample requires.

    I would greatly appreciate suggestions on how to perform this sort of technique.
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      If you can output the list with the ID and classnames that the js requires, then just add the script tags to your template, and it’ll go. Configuring the javascript itself may be another matter, but MODx can only generate the content that the javascript works on.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 6180
        • 31 Posts
        I’ve abandoned my original plan in favor of the greater functionality offered by the FullCalendar script (http://arshaw.com/fullcalendar/). It seems to be a bit easier to integrate with modx Revolution.

        As such, I am experimenting with whatever configuration options I can think of to find one that works. This has brought me to the process of constructing a snippet that will call the script. At this point I have a very basic snippet that registers the CSS and JS files that are needed to generate the calendar, but I’m having a tough time with the $modx->regClientStartupHTMLBlock call. For the sake of modularity, I have configured the call to retrieve the value of a chunk. The chunk includes a call to the getResources snippet for populating the calendar using an array. The challenge I am experiencing now is that usually nothing happens! On the rare occasion the registration calls take effect and the linked files appear in the HTML.

        I’m not sure what is happening here as the calls should work. Any ideas?

        FullCalendar basic snippet
        <?php
        $modx->regClientCSS('/assets/components/fullcalendar/fullcalendar.css');
        $modx->regClientStartupScript('/assets/components/fullcalendar/fullcalendar.min.js');
        
        $modx->regClientStartupHTMLBlock($modx->getChunk('tsaGetCalendarEvents'));
        
        ?>


        The tsaGetCalendarEvents chunk
          <script type="text/javascript">
          $(document).ready(function() {
        
            $('#calendar').fullCalendar({
              header: {
                left: 'month,agendaWeek,agendaDay',
                center: 'title',
                right: 'today prev,next'
              },
              editable: false,
              events: [[getResources? &parents=`82` &tpl=`JSONListing` &tplFirst=`JSONListingFirst` &tplLast=`JSONListingLast` &includeTVs=`1` &includeContent=`1` &showHidden=`1` &sortby=`pagetitle` &sortdir=`ASC` &tvFilters=`EventStartDate==2010-08%` ]]
              });
            });
          </script>

          • 6180
          • 31 Posts
          Finally found it. The snippet had to be called uncached in order to work.

          [[!FullCalendar]]

          Now to figure out how to work a JSON data source.