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">×</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>