I am working further on the couchcms demo site and thought would be nice to show events in a modal popup when clicked on a event on the calendar date but got nothing showing in the modal popup, I'm not sure what I am missing as thought the

Code: Select all

<cms:entries>

tag shows the events?

within the calendar coding that shows the events on the calendar I have the following

Code: Select all

<cms:entries skip_custom_fields='1'>
                                        <li>
                                            <a href="<cms:show k_page_link />" data-toggle="modal" data-target="#myModal"><cms:show k_page_title /></a>
                                        </li>
                                    </cms:entries>

In the modal popup I have the following

Code: Select all

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
            <cms:entries skip_custom_fields='1'>
              <a href="<cms:show k_page_link />"><cms:show k_page_title /></a>
            </cms:entries>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

The url is https://www.beechwoodsolutions.co.uk/si ... lendar.php

UPDATE: I have added the following into the popup but all it has is today's date next to Start Date:

Code: Select all

<b>Event:</b> <cms:show k_page_title /><br>
        <b>Description:</b> <cms:show desc /><br>
        <b>Location:</b> <cms:show location /><br>
        <b>Start Date:</b> <cms:date start_date format='l F jS Y' /><br>
        <cms:if start_time!='Unspecified' >
            <b>From:</b> <cms:show start_time /><br>
        </cms:if>
        <cms:if "<cms:not_empty end_date />" >
            <b>End Date:</b> <cms:date end_date format='F j, Y' /><br>
        </cms:if>
        <cms:if end_time!='Unspecified' >
            <b>Till:</b> <cms:show end_time /><br>
        </cms:if>

If I add in

Code: Select all

<cms:if k_is_page >

and

Code: Select all

</cms:if>

nothing shows when it has the following code

Code: Select all

<div class="modal-body">
<cms:if k_is_page >
                <b>Event:</b> <cms:show k_page_title /><br>
        <b>Description:</b> <cms:show desc /><br>
        <b>Location:</b> <cms:show location /><br>
        <b>Start Date:</b> <cms:date start_date format='l F jS Y' /><br>
        <cms:if start_time!='Unspecified' >
            <b>From:</b> <cms:show start_time /><br>
        </cms:if>
        <cms:if "<cms:not_empty end_date />" >
            <b>End Date:</b> <cms:date end_date format='F j, Y' /><br>
        </cms:if>
        <cms:if end_time!='Unspecified' >
            <b>Till:</b> <cms:show end_time /><br>
        </cms:if>
</cms:if>
      </div>

UPDATE: I have managed to work out how to get the event info showing in the popup but it's showing the same event info for different events as well on different dates in the calendar

My updated coding is below

Code: Select all

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
        <cms:pages masterpage='calendar.php' limit='1'>
      <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>
            </cms:pages>
    </div>
  </div>
</div>

Is there a way to show the event info dependent on the event clicked on the calendar date such as k_page_link or k_page_title.

I am still trying to work this out and updated the coding to the following, I found a similar post at viewtopic.php?f=2&t=10659 that have gone by as well as viewtopic.php?f=4&t=10192

Code: Select all

<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>

The modal popup is below

Code: Select all

<cms:pages masterpage='calendar.php' limit='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>

In the source code, it looks like the following

Code: Select all

<ul>
                                                                            <li>
                                            <a href="#" data-toggle="modal" data-target="#myModal135">Test Event</a>
                                            
                                        </li>
                                                                        </ul>

<div class="modal" id="myModal135" tabindex="-1" role="dialog" aria-hidden="false">            
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
          <h4>Test Event</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">    
          <strong>Event:</strong> Test Event          
              <br>
        <strong>Description:</strong> test event one          <br>
        <strong>Location:</strong> Test Location          <br>
        <strong>Start Date:</strong> Wednesday May 1st 2019          <br>
                    <strong>From:</strong> 09:00            <br>
                            <strong>End Date:</strong> Wednesday May 1st 2019            <br>
                            <strong>End Time:</strong> 18:00            <br>
                      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

It works on the Test Event popup on the calendar but when go to the next month and click on the event, it don't work and looked at the source code and it still has the id 135 in the source code but it should be id 136

I think I am slowly getting there, just need bit of help with the id's if someone could help and quickly see what I am missing or if the couchcms tags need moving to different place within the popup or the link popup

UPDATE: Just done it and got it working

The new updated code is below

Code: Select all

<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>

I am more than happy to add it to the tips and tricks forum if it helps anyone else out wanting to do the same thing, is that ok @KK

The working url is https://www.beechwoodsolutions.co.uk/si ... lendar.php