I thought would be easier to create a new topic as this is stuck on integrating couchcms into fullcalendar post

I have a file called calendar.php with the following code

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<script src='<cms:add_querystring "<cms:link masterpage='events.php' />" "js=1" />'></script>

<div id='calendar'></div>

<?php COUCH::invoke(); ?>

That shows the calendar all fine at https://www.beechwoodsolutions.co.uk/si ... lendar.php

I then have a events.php file with the following code, this is where I am not sure what I doing to be honest as trying to go by viewtopic.php?f=4&t=11117 but I'm not really understanding it

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='Calendar' order='9' clonable='1'>
    <cms:editable name='desc' label='Description' type='textarea' />
    <cms:editable name='location' label='Location' type='text' />

    <cms:editable name="start_time" label="Time From (24 Hrs)"
      opt_values=' Unspecified |
                  00:00 | 00:30 | 01:00 | 01:30 | 02:00 | 02:30 | 03:00 | 03:30 |
                  04:00 | 04:30 | 05:00 | 05:30 | 06:00 | 06:30 | 07:00 | 07:30 |
                  08:00 | 08:30 | 09:00 | 09:30 | 10:00 | 10:30 | 11:00 | 11:30 |
                  12:00 | 12:30 | 13:00 | 13:30 | 14:00 | 14:30 | 15:00 | 15:30 |
                  16:00 | 16:30 | 17:00 | 17:30 | 18:00 | 18:30 | 19:00 | 19:30 |
                  20:00 | 20:30 | 21:00 | 21:30 | 22:00 | 22:30 | 23:00 | 23:30 |'
      type='dropdown'
    />

    <cms:editable name="end_time" label="Time Until (24 Hrs)"
      opt_values=' Unspecified |
                  00:00 | 00:30 | 01:00 | 01:30 | 02:00 | 02:30 | 03:00 | 03:30 |
                  04:00 | 04:30 | 05:00 | 05:30 | 06:00 | 06:30 | 07:00 | 07:30 |
                  08:00 | 08:30 | 09:00 | 09:30 | 10:00 | 10:30 | 11:00 | 11:30 |
                  12:00 | 12:30 | 13:00 | 13:30 | 14:00 | 14:30 | 15:00 | 15:30 |
                  16:00 | 16:30 | 17:00 | 17:30 | 18:00 | 18:30 | 19:00 | 19:30 |
                  20:00 | 20:30 | 21:00 | 21:30 | 22:00 | 22:30 | 23:00 | 23:30 |'
      type='dropdown'
    />
    
    <cms:editable
    name='start_date'
    label='Start Date'
    type='datetime'
    format='dmy'
    fields_separator=','
    default_time='@current'
    required='1'
    validator='MyEvent::start_date'
    validator_msg='myevent::start_date=Incorrect date format'
/>
    
    <cms:editable
    name='end_date'
    label='End Date'
    type='datetime'
    format='dmy'
    fields_separator=','
    default_time='@current'
    required='1'
    validator='MyEvent::end_date'
    validator_msg='myevent::end_date=Incorrect date format'
/>

</cms:template>


         
            <cms:if "<cms:gpc 'js' />" >
         <cms:content_type 'application/javascript' />
                
                <cms:capture into='msg' >

        <cms:pages show_future_entries='1' >
            
            <cms:if k_paginated_top>
[
  {
    "title": "All Day Event",
    "start": "2019-04-01"
  },
  {
    "title": "Long Event",
    "start": "2019-04-07",
    "end": "2019-04-10"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2019-04-09T16:00:00-05:00"
  },
  {
    "id": "999",
    "title": "Repeating Event",
    "start": "2019-04-16T16:00:00-05:00"
  },
  {
    "title": "Conference",
    "start": "2019-04-11",
    "end": "2019-04-13"
  },
  {
    "title": "Meeting",
    "start": "2019-04-12T10:30:00-05:00",
    "end": "2019-04-12T12:30:00-05:00"
  },
  {
    "title": "Lunch",
    "start": "2019-04-12T12:00:00-05:00"
  },
  {
    "title": "Meeting",
    "start": "2019-04-12T14:30:00-05:00"
  },
  {
    "title": "Happy Hour",
    "start": "2019-04-12T17:30:00-05:00"
  },
  {
    "title": "Dinner",
    "start": "2019-04-12T20:00:00"
  },
  {
    "title": "Birthday Party",
    "start": "2019-04-13T07:00:00-05:00"
  },
  {
    "title": "Click for Google",
    "url": "http://google.com/",
    "start": "2019-04-28"
  }
]
                
                </cms:if>
            
            <cms:if k_paginated_bottom>
                
                $(document).ready(function() {
              
      var calendar = $('#calendar').fullCalendar({
   editable: true,
   header: {
    left: 'prev',
    center: 'title',
    right: 'next,today'
   },

          firstDay: 1,
          navLinks: false,
          eventLimit: true
                
                });
       
      });
                
                </cms:if>
        
        </cms:pages>
        
    </cms:capture>
    <cms:abort is_404='0' msg=msg />
</cms:if>
        
<?php COUCH::invoke(); ?>

[KK]

Following is how I quickly adapted a sample from fullcalendar distribution for Couch -
After downloading fullcalendar source files and storing them in my test server's root, I created the following template named calendar.php to test out the calendar -

Code: Select all

<?php require_once("couch/cms.php"); ?>
<cms:template order='-10000' clonable='0'>

</cms:template>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='<cms:show k_site_link />fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='<cms:show k_site_link />fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
<script src='<cms:show k_site_link />fullcalendar/packages/core/main.js'></script>
<script src='<cms:show k_site_link />fullcalendar./packages/interaction/main.js'></script>
<script src='<cms:show k_site_link />fullcalendar/packages/daygrid/main.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2019-04-12',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2019-04-01'
        },
        {
          title: 'Long Event',
          start: '2019-04-07',
          end: '2019-04-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-04-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-04-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2019-04-11',
          end: '2019-04-13'
        },
        {
          title: 'Meeting',
          start: '2019-04-12T10:30:00',
          end: '2019-04-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2019-04-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2019-04-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2019-04-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2019-04-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2019-04-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2019-04-28'
        }
      ]
    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>
<?php COUCH::invoke(); ?>

Test this template at this point to make sure you can see the calendar as expected.

Now as you can see from the code above, all the events shown by the calendar are contained in an array named 'events'.
We'd like to use Couch to generate this array with data from our events.php template.

As is the recommended practice for generating repeated data, we need to isolate one single instance of the portion that is repeated. Notice the events array as it becomes now with a single event -

Code: Select all

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '2019-04-12',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
    {
     title: 'Long Event',
     start: '2019-04-07',
     end: '2019-04-10'
    },
  ]
})

Next, we add <cms:pages> to repeat the event as many times as there are cloned pages available -

Code: Select all

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '<cms:date format='Y-m-d' />',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
  <cms:pages masterpage='events.php' show_future_entries='1'>
    {
      title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
      start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
      end: <cms:escape_json><cms:show end_date /></cms:escape_json> 
    }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
  </cms:pages>  
  ]
});

And that should be it. You may add more fields and parameters as documented by fullcalendar.

The full working template is as follows -

Code: Select all

<?php require_once("couch/cms.php"); ?>
<cms:template order='-10000' clonable='0'>

</cms:template>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='<cms:show k_site_link />fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='<cms:show k_site_link />fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
<script src='<cms:show k_site_link />fullcalendar/packages/core/main.js'></script>
<script src='<cms:show k_site_link />fullcalendar./packages/interaction/main.js'></script>
<script src='<cms:show k_site_link />fullcalendar/packages/daygrid/main.js'></script>
<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '<cms:date format='Y-m-d' />',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
      <cms:pages masterpage='events.php' show_future_entries='1'>
        {
          title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
          start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
          end: <cms:escape_json><cms:show end_date /></cms:escape_json> 
        }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
      </cms:pages>  
      ]
    });


    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>
<?php COUCH::invoke(); ?>

I hope you can take it from this point to what you exactly need.

Thank you KK that gives me a head start and can work with it, only thing i'm not sure on is the events.php file/coding

I have put the following into it but no events show on the calendar

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>

<cms:template title='Calendar Events' order='9' clonable='1'>
    <cms:editable name='desc' label='Description' type='textarea' />
    <cms:editable name='location' label='Location' type='text' />

    <cms:editable name="start_time" label="Time From (24 Hrs)"
      opt_values=' Unspecified |
                  00:00 | 00:30 | 01:00 | 01:30 | 02:00 | 02:30 | 03:00 | 03:30 |
                  04:00 | 04:30 | 05:00 | 05:30 | 06:00 | 06:30 | 07:00 | 07:30 |
                  08:00 | 08:30 | 09:00 | 09:30 | 10:00 | 10:30 | 11:00 | 11:30 |
                  12:00 | 12:30 | 13:00 | 13:30 | 14:00 | 14:30 | 15:00 | 15:30 |
                  16:00 | 16:30 | 17:00 | 17:30 | 18:00 | 18:30 | 19:00 | 19:30 |
                  20:00 | 20:30 | 21:00 | 21:30 | 22:00 | 22:30 | 23:00 | 23:30 |'
      type='dropdown'
    />

    <cms:editable name="end_time" label="Time Until (24 Hrs)"
      opt_values=' Unspecified |
                  00:00 | 00:30 | 01:00 | 01:30 | 02:00 | 02:30 | 03:00 | 03:30 |
                  04:00 | 04:30 | 05:00 | 05:30 | 06:00 | 06:30 | 07:00 | 07:30 |
                  08:00 | 08:30 | 09:00 | 09:30 | 10:00 | 10:30 | 11:00 | 11:30 |
                  12:00 | 12:30 | 13:00 | 13:30 | 14:00 | 14:30 | 15:00 | 15:30 |
                  16:00 | 16:30 | 17:00 | 17:30 | 18:00 | 18:30 | 19:00 | 19:30 |
                  20:00 | 20:30 | 21:00 | 21:30 | 22:00 | 22:30 | 23:00 | 23:30 |'
      type='dropdown'
    />
    
    <cms:editable
    name='start_date'
    label='Start Date'
    type='datetime'
    format='dmy'
    fields_separator=','
    default_time='@current'
    required='1'
    validator='MyEvent::start_date'
    validator_msg='myevent::start_date=Incorrect date format'
/>
    
    <cms:editable name='end_date'
    label='Event End Date (if multi-days event)'
    type='datetime'
    format='dmy'
    fields_separator=','
    default_time='@current'
/>

</cms:template>

<?php COUCH::invoke(); ?>

I looked at the source code on the calendar.php file in the web browser and it's got the following code so looks like the event info is showing in the source code but just not showing on the calendar

Code: Select all

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '2019-05-04',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
            {
     title: "Test Event",
     start: "Unspecified",
     end: "Unspecified"    }      ]
});

    calendar.render();
  });

</script>

I added the following code in calendar.php as thought that must be way the event is not showing on the calendar but is still not displaying

Code: Select all

start_date: <cms:escape_json><cms:show start_date /></cms:escape_json>,

[KK]

It is indeed the 'start_date' and 'end_date' fields that need to be used.
It is a simple <cms:pages> loop fetching data from events.php so you can test it and see if data is being pulled in properly.

I have updated the code to the following but still can't get any events showing on the calendar

Code: Select all

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '<cms:date format='Y-m-d' />',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
    <cms:pages masterpage='events.php' show_future_entries='1'>
        {
     title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
     location: <cms:escape_json><cms:show location /></cms:escape_json>,
     start: <cms:escape_json><cms:show start_time /></cms:escape_json>,
     end: <cms:escape_json><cms:show end_time /></cms:escape_json>,
     start_date: <cms:escape_json><cms:show start_date /></cms:escape_json>,
     end_date: <cms:escape_json><cms:show end_date /></cms:escape_json>,
    }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
    </cms:pages>
  ]
});

    calendar.render();
  });

</script>

I can see the date in the source code itself

Code: Select all

<script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '2019-05-04',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
  events: [
            {
     title: "Test Event Two",
     location: "Test Location",
     start: "09:00",
     end: "10:00",
     start_date: "2019-05-07 00:00:00",
     end_date: "2019-05-07 00:00:00",
    },            {
     title: "Test Event Three",
     location: "Test Location",
     start: "Unspecified",
     end: "Unspecified",
     start_date: "2019-05-06 00:00:00",
     end_date: "2019-05-06 00:00:00",
    },            {
     title: "Test Event",
     location: "Test Location",
     start: "Unspecified",
     end: "Unspecified",
     start_date: "2019-05-04 00:00:00",
     end_date: "2019-05-04 00:00:00",
    }      ]
});

    calendar.render();
  });

</script>

[KK]

Please stick to the original unmodified code first which is this -

Code: Select all

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '<cms:date format='Y-m-d' />',
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
      <cms:pages masterpage='events.php' show_future_entries='1'>
        {
          title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
          start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
          end: <cms:escape_json><cms:show end_date /></cms:escape_json> 
        }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
      </cms:pages>  
      ]
    });

    calendar.render();
  });
</script>

This works, trust me.
Once you get this working, then move on to add more parameters as needed.

Ahh ok so sorry I see where I was going wrong now with the code, it works perfect now. Thank you so much KK. I can start to add other variables now

I have added the other variables and seems to be working all ok

My last bit is the modal popup using bootstrap, I got the bootstrap modal showing when click on the event name within the calendar but can't get the info to show, the coding for the modal popup is below

Code: Select all

<script>

  document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

  plugins: [ 'interaction', 'dayGrid' ],
  defaultDate: '<cms:date format='Y-m-d' />',
  editable: true,
  eventLimit: true, // allow "more" link when too many events
        
  eventClick:  function(event, jsEvent, view) {
  $('#modalTitle').html(event.k_page_title);
  $('#modalBody').html(event.location);
  $('#fullCalModal').modal();
  return false;
  },
        
  events: [
  <cms:pages masterpage='events.php' show_future_entries='1'>
  {
  title: <cms:escape_json><cms:show k_page_title /></cms:escape_json>,
  location: <cms:escape_json><cms:show location /></cms:escape_json>,
  start: <cms:escape_json><cms:show start_date /></cms:escape_json>,
  end: <cms:escape_json><cms:show end_date /></cms:escape_json>
  }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
    </cms:pages>
  ],

});

 calendar.render();
  });

</script>

<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
                
</div>
</div>
</div>
</div>

I am sure the issue is with the following lines but am unsure how to get the couchcms tags integrated into it

Code: Select all

$('#modalTitle').html(event.k_page_title);
$('#modalBody').html(event.location);

I tried the following but it makes the calendar not appear, I even tried putting ' ' around the <cms> tags

Code: Select all

$('#modalTitle').html(event.<cms:show k_page_title/>);
$('#modalBody').html(event.<cms:show location/>);

[trendoman]

@ianhaney50,
If your posts are destined exclusively to be read by @KK alone, I have no other humble request but to write him to email or PM. Otherwise, if the target audience is not limited, please care to fix the bloody pasted code. It is so painful to view it with random tabulation / spaces mix, as if there is no gravity left on Earth. I am forced to hide all your topics and posts just because of that (forum has a setting for that).

Usually, configuring the code editor from tabs to all spaces helps (it is a common practice and good manners on coding forums).