Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
8 posts Page 1 of 1
I managed to get working a modal popup showing event details when click on the event on the events calendar if anyone wants to do the same thing, below is the working code, this works in couchcms v2.2

Code: Select all
<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='Event End Date (if multi-days event)'
    type='datetime'
   format='dmy'
    fields_separator=','
   default_time='@current'
    />

</cms:template>

<div class="container">

      <!-- Page Features -->
      <div class="row my-4">
        <div class="col-lg-12">
           
        <cms:set my_cal="<cms:date "<cms:gpc 'cal' />" format='Y-m-d' />" />
        <cms:calendar week_starts='1' date=my_cal masterpage=k_template_name show_future_entries='1' >
       
            <table class="calendar_big">
                <tr>                   
                    <cms:set my_prev_calendar_date = "<cms:date k_prev_calendar_date format='d-m-Y' />" />
                    <th><a href="<cms:concat k_page_link '?cal=' my_prev_calendar_date />"> << </a></th>
                   
                    <th colspan="5"><cms:date k_calendar_date format='F Y' /></th>                   
                    <cms:set my_next_calendar_date = "<cms:date k_next_calendar_date format='d-m-Y' />" />
                    <th><a href="<cms:concat k_page_link '?cal=' my_next_calendar_date />"> >> </a></th>
                   
                </tr>
                <tr>
                    <cms:repeat count='7'>
                    <td class="months_heading"><cms:zebra 'M' 'T' 'W' 'Th' 'F' 'S' 'Su'/></td>
                    </cms:repeat>
                </tr>

                <cms:weeks>
                    <tr>
                    <cms:days >
                        <cms:if k_timeline_position='present'>
                            <cms:set tdclass='today' />
                        <cms:else />
                            <cms:set tdclass='' />
                        </cms:if>

                        <cms:if k_position='current_month' >
                            <cms:if k_count_entries >
                                <td class='entries <cms:show tdclass />' align='center'>
                                    <a href="#"><cms:show k_day /></a>
                                    <ul>
                                    <cms:entries skip_custom_fields='1'>
                                        <li>
                                            <a href="#" data-toggle="modal" data-target="#myModal<cms:show k_page_id />"><cms:show k_page_title /></a>
                                        </li>
                                    </cms:entries>
                                    </ul>
                                </td>
                            <cms:else />
                                <td class='<cms:show tdclass />' ><cms:show k_day /></td>
                            </cms:if>
                        <cms:else />
                            <td class='other_month'><cms:show k_day /></td>
                        </cms:if>
                    </cms:days>
                    </tr>
                </cms:weeks>
            </table>   
             </cms:calendar>
               
        </div>
        <!-- COL LG 12 -->
         
      </div>
      <!-- /.row -->
        <cms:set my_cal="<cms:date "<cms:gpc 'cal' />" format='Y-m-d' />" />
        <cms:pages date=my_cal masterpage='calendar.php' show_future_entries='1'>
        <div class="modal" id="myModal<cms:show k_page_id />" tabindex="-1" role="dialog" aria-hidden="false">           
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
          <h4><cms:show k_page_title /></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">   
          <strong>Event:</strong> <cms:show k_page_title />         
              <br>
        <strong>Description:</strong> <cms:show desc />
          <br>
        <strong>Location:</strong> <cms:show location />
          <br>
        <strong>Start Date:</strong> <cms:date start_date format='l F jS Y' />
          <br>
        <cms:if start_time!='Unspecified' >
            <strong>From:</strong> <cms:show start_time />
            <br>
        </cms:if>
        <cms:if "<cms:not_empty end_date />" >
            <strong>End Date:</strong> <cms:date end_date format='l F jS Y' />
            <br>
        </cms:if>
        <cms:if end_time!='Unspecified' >
            <strong>End Time:</strong> <cms:show end_time />
            <br>
        </cms:if>
              </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
            </cms:pages>
       
    </div>
@ianhaney50

This is indeed a way to have modals working. But there is an issue in this. I am facing the same issue as of now.

The Issue:
The <cms:pages>...<</cms:pages> makes the modal code repeat all over again and again. Till the use case is such that there are only a few modals this method will suffice. But the main issue is that as the number of modals increase, the html code will get repeated so many times that there will be issues.

I too am trying to get a solution for the same. My approach:
1. Open a single modal for each and every button.
2. Pass id of the page to the modal on button (using data-* attribute preferably). so that only one modal is used to display everything.
3. I am trying to have the custom_routes so that the CRUD operations can be performed in the modal itself.

If you happen to read this post, please do give a thought to the redundant modals code being repeated by the cms:pages tag.

Regards,
GenXCoders
Image
where innovation meets technology
Hi

To be honest I can't remember what site that was on now but I did another one since and used fullcalendar and the following coding for the modal popup

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: false,
  timezone: 'Europe/London',
  eventLimit: true, // allow "more" link when too many events
  displayEventTime: false,
  locale: "en-gb",
  firstDay: 1,
       
  events: [
    <cms:pages masterpage='events.php' show_future_entries='1'>
        {
     id: <cms:escape_json><cms:show k_page_id /></cms:escape_json>,
     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:date start_date format='Y-m-d' /> <cms:show start_time /></cms:escape_json>,
     end: <cms:escape_json><cms:date end_date format='Y-m-d' /> <cms:show end_time /></cms:escape_json>,
    }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
    </cms:pages>
  ],

   eventClick: function(info) {
       
  var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };

  var startdate = calendar.formatDate(info.event.start, dateSettings);
  var starttime = calendar.formatDate(info.event.start,  timeSettings);

  var enddate;
  var endtime;
  if (info.event.end != null) {
    enddate = calendar.formatDate(info.event.end, dateSettings);
    endtime = calendar.formatDate(info.event.end, timeSettings);
  }
  else {
    enddate = startdate;
    endtime = starttime;
  }
       
  $('#modalID').html(info.event.id);
  $('#modalTitle').html(info.event.title);
  $('#modalLocation').html(info.event.extendedProps.location);
  $('#modalStartDate').html(startdate + " at " + starttime);
  $('#modalEndDate').html(enddate + " at " + endtime);
  $('#fullCalModal').modal();
},
                                             
    eventTextColor: '#FFFFFF',

});

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

<div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   
                    <h4 id="modalTitle" class="modal-title"></h4>
               <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
               </div>
               
                <div class="calendarinfo"><strong>Event Location</strong>: <span id="modalLocation" class="modal-body"></span></div>               
                <div class="calendarinfo"><strong>Event Start Date/Time</strong>: <span id="modalStartDate" class="modal-body"></span></div>
                <div class="calendarinfo"><strong>Event End Date/Time</strong>:<span id="modalEndDate" class="modal-body"></span></div>
                <div class="modal-footer">
               
                </div>
            </div>
            </div>
        </div>
       
                <div id='calendar'></div>

<script src='https://fullcalendar.io/releases/core/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/interaction/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.js'></script>


It works fine with that coding on that page and the events.php coding is below

Code: Select all
<cms:template title='Add Calendar Events' order='1' 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'
/>
   
    <cms:editable name='end_date'
    label='Event End Date (if multi-days event)'
    type='datetime'
    format='dmy'
    fields_separator=','
    default_time='@current'
/>
Hi,

I have been trying to use an Event Calendar with Modals with no success.
I came across your code but it does not seem to work for me.
On the calendar.php is there some code missing after the closing script tag as using the code as posted my events are not showing in the calendar. Also I get the modal titles and close button showing on the page itself.

I would appreciate any help you can give me to sort this.

Thanks
Hi gandalf12

Strange it works fine on the live site I have it on, I checked the code and don't see any missing code

Code: Select all
<!-- THIS GOES JUST BEFORE CLOSING </head> TAG -->
<link href='fullcalendar/packages/core/main.css' rel='stylesheet' />
<link href='fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
<script src='fullcalendar/packages/core/main.js'></script>
<script src='fullcalendar/packages/interaction/main.js'></script>
<script src='fullcalendar/packages/daygrid/main.js'></script>


This code goes on the page you want the calendar to appear on

Code: Select all
<?php require_once( 'couchcms/cms.php' ); ?>

<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: false,
  timezone: 'Europe/London',
  eventLimit: true, // allow "more" link when too many events
  displayEventTime: false,
  locale: "en-gb",
  firstDay: 1,
       
  events: [
    <cms:pages masterpage='events.php' show_future_entries='1'>
        {
     id: <cms:escape_json><cms:show k_page_id /></cms:escape_json>,
     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:date start_date format='Y-m-d' /> <cms:show start_time /></cms:escape_json>,
     end: <cms:escape_json><cms:date end_date format='Y-m-d' /> <cms:show end_time /></cms:escape_json>,
    }<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
    </cms:pages>
  ],

   eventClick: function(info) {
       
  var dateSettings = { "year": "numeric", "month": "2-digit", "day": "2-digit" };
  var timeSettings = { "hour": "2-digit", "minute": "2-digit", "hour12": false };

  var startdate = calendar.formatDate(info.event.start, dateSettings);
  var starttime = calendar.formatDate(info.event.start,  timeSettings);

  var enddate;
  var endtime;
  if (info.event.end != null) {
    enddate = calendar.formatDate(info.event.end, dateSettings);
    endtime = calendar.formatDate(info.event.end, timeSettings);
  }
  else {
    enddate = startdate;
    endtime = starttime;
  }
       
  $('#modalID').html(info.event.id);
  $('#modalTitle').html(info.event.title);
  $('#modalLocation').html(info.event.extendedProps.location);
  $('#modalStartDate').html(startdate + " at " + starttime);
  $('#modalEndDate').html(enddate + " at " + endtime);
  $('#fullCalModal').modal();
},
                                             
    eventTextColor: '#FFFFFF',

});

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

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

.calendarinfo {
padding: 10px;
}
</style>

<div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   
                    <h4 id="modalTitle" class="modal-title"></h4>
               <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
               </div>
               
                <div class="calendarinfo"><strong>Event Location</strong>: <span id="modalLocation" class="modal-body"></span></div>               
                <div class="calendarinfo"><strong>Event Start Date/Time</strong>: <span id="modalStartDate" class="modal-body"></span></div>
                <div class="calendarinfo"><strong>Event End Date/Time</strong>:<span id="modalEndDate" class="modal-body"></span></div>
                <div class="modal-footer">
               
                </div>
            </div>
            </div>
        </div>
       
                <div id='calendar'></div>

<!--THIS GOES AT THE VERY END-->
<script src='https://fullcalendar.io/releases/core/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/interaction/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/daygrid/4.1.0/main.min.js'></script>
<script src='https://fullcalendar.io/releases/timegrid/4.1.0/main.min.js'></script>
<?php COUCH::invoke(); ?>


On events.php, have the following code

Code: Select all
<?php require_once( 'couchcms/cms.php' ); ?>

<cms:template title='Add Calendar Events' order='1' 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'
/>
   
    <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(); ?>


Any probs, let me know and will see if can help out on it
Hi Ian,

Thanks for the reply.
I have copied your code as displayed, but it still does not work.

My events are showing up in the calendar, but they are not clickable and as a result the modal does not appear.

I have a 'close' button in the top left hand corner of the page, underneath it is the following:
Event Location:
Event Start Date/Time:
Event End Date/Time:.

It appears that the issue is with the Bootstrap side of the code......any clues?

Thanks

Richard
Hi Ian,

Would it be possible to look at the live version you have as I may be able to spot where I am going wrong from there.

Thanks

Richard
Sure no probs, I'll PM you the link

Update: Just sent you a PM
8 posts Page 1 of 1
cron