How to use JQuery FullCalendar to display multiple forms' data in a calendar

Hi All

It feels great to give something back to the community!

I'm in the middle of developing a web app as a service and had a need to display the data from two forms in a calendar. In my case I had:

• Form 1 = Service Dates for individual items in an inventory
• Form 2 = Service Dates for items in a wider system

I looked around for a solution and came across the JQuery plugin fullcalendar; this was able to take an array of data and display it in the calendar, to get it working with formidable these were the steps I followed.

1. Add the following lines to your themes functions.php (your locations may be different!) to load the required files
   1. wp_enqueue_style( 'fullcalendar', get_template_directory_uri().'/plugins/fullcalendar/fullcalendar.css' );
   2. wp_enqueue_script( 'moment', get_template_directory_uri().'/plugins/fullcalendar/moment.js' );
   3. wp_enqueue_script( 'fullcalendar', get_template_directory_uri().'/plugins/fullcalendar/fullcalendar.js' ); /* fullcalendar */
2. Install Code Snippets plugin if you haven't already done so and add the following
   1. <script>
      $(document).ready(function() {

      // page is now ready, initialize the calendar...

      $('#calendar').fullCalendar({
      // put your options and callbacks here
      })

      });
      </script>

   2. Add an element to a wordpress page or post where you would like the calendar to display with <div id='calendar'></div>
   3. Load the page, you should see a blank calendar. 🙂
   4. Create a view using the first form
      1. View Format should be 'All Entries'
      2. Add the following ( events: [ ) in the before content field, don't add brackets.
      3. In the content field add:
         {
         title : '[214]',
         start : '[560 format="Y-m-d"]',
         backgroundColor : '[558 show=787]',
         url : '/equipment-inventory-overview/view-equipment-inventory/?entry=[id]'
         },
      4. Add the fields you would like to use, also note the change of date to Y-m-d format!
      5. Note/copy the shortcode for adding the view in a template
      6. Go back to your snippet and add the shortcode like below
      7. <script>
         $(document).ready(function() {

         // page is now ready, initialize the calendar...

         $('#calendar').fullCalendar({
         // put your options and callbacks here
         <?php echo FrmProDisplaysController::get_shortcode( array( 'id' => 2171) ) ?>
         })

         });
         </script>

   5. Create a view for the second form
      1. View Format should be 'All Entries'
      2. In the content field add:
         {
         title : '[553]',
         start : '[789 format="Y-m-d"]',
         backgroundColor : '[787]',
         url : '/vessel-systems-overview/view-vessel-systems/?entry=[id]'
         },
      3. In the After Content field add a single square bracket }
      4. Note/copy the shortcode for adding the view in a template
      5. Go back to your snippet and add the shortcode behind the other shortcode you added in step 4-6 & 4-7 above
   6. Your code should now look like this..
      <script>
      $(document).ready(function() {

      // page is now ready, initialize the calendar...

      $('#calendar').fullCalendar({
      // put your options and callbacks here
      <?php echo FrmProDisplaysController::get_shortcode( array( 'id' => 2171) ) ?><?php echo FrmProDisplaysController::get_shortcode( array( 'id' => 2187) ) ?>
      })

      });
      </script>

   7. Go to your page and you should see entries added to the calendar! 🙂

It looks like there are tons of customisation options with the fullCalendar plugin.

Hope it helps some others! 🙂

Regards

Matt