Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Hi

I am using the events calendar in a site and it looks and works good but noticed a little issue or 2

1) Can the calendar be made responsive?
2) Can the date in the url be in UK format so DD-MM-YYYY, at the moment the url is events.php?cal=2018-02-01
The coding I have is below

Code: Select all
<cms:template title='Events' 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='end_date'
        label='Event End Date (if multi-days event)'
        desc='Enter date in yyyy-mm-dd format e.g. 2010-12-31'
        type='text'
        validator='regex=/(?:19|20)\d\d-(?:0[1-9]|1[012])-(?:0[1-9]|[12][0-9]|3[01])/'
        separator='#'
        validator_msg='regex=Incorrect date format'
    />

</cms:template>

<cms:if k_is_page >
        <!-- Page View -->
        <b>Event:</b> <cms:show k_page_title /><br>
        <b>Description:</b> <cms:show desc /><br>
        <b>Location:</b> <cms:show location /><br>
        <b>Date:</b> <cms:date k_page_date format='F j, 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><br>
            <a href="javascript:history.back()">Back to Calendar</a>
        </cms:if>

    <cms:else />
        <!-- List view -->
        <cms:calendar week_starts='1' date="<cms:gpc 'cal' />" masterpage=k_template_name show_future_entries='1' >
            <table class="calendar_big" align="center">
                <tr>
                    <th><a href="<cms:concat k_page_link '?cal=' k_prev_calendar_date />"> << </a></th>
                    <th colspan="5"><cms:date k_calendar_date format='F Y' /></th>
                    <th><a href="<cms:concat k_page_link '?cal=' k_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 limit='2' skip_custom_fields='1'>
                                        <li>
                                            <a href="<cms:show k_page_link />"><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>
    </cms:if>


Thank you in advance
Hi,

As, I am sure, you know Couch concerns itself with just providing tags. Those then can be applied to any arbitrary HTML design.

The calendar code that comes with the documentation is meant to serve only as an example of tag usage.
You can (rather, should) use your own design and apply the tags to it. Use a design that is responsive to begin with and you shall have a functional calendar that is responsive.

Hope this helps.
Hi

The website itself is designed as responsive but the calendar itself is not

UPDATE: So sorry I have sussued it, in the calendar.css I have made the width to 100% for the line table.calendar_big{

Regarding the second issue of 2) Can the date in the url be in UK format so DD-MM-YYYY, at the moment the url is events.php?cal=2018-02-01

Can that be done?
Regarding the second issue of 2) Can the date in the url be in UK format so DD-MM-YYYY, at the moment the url is events.php?cal=2018-02-01

Can that be done?

Will require some effort.

The format you see is the one internally used by Couch for dates and so using it in the URL makes it easy for us to use it unchanged anywhere Couch expects a date e.g.
<cms:calendar week_starts='1' date="expects date in Y-m-d format here" ..


If you wish to change that -
1. Use your desired format in all links where we are currently directly using dates.
For the large calendar, it is the following two places -
Code: Select all
<th><a href="<cms:concat k_page_link '?cal=' k_prev_calendar_date />"> << </a></th>

Code: Select all
<th><a href="<cms:concat k_page_link '?cal=' k_next_calendar_date />"> >> </a></th>

Change those two lines to become as follows -
Code: Select all
<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>

Code: Select all
<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>

2. Modify the statement where Couch expects a Y-m-d date from the following -
Code: Select all
<cms:calendar date="<cms:gpc 'cal' />" masterpage=k_template_name show_future_entries='1' >

- into this -
Code: Select all
<cms:set my_cal="<cms:date "<cms:gpc 'cal' />" format='Y-m-d' />" />
<cms:calendar date=my_cal masterpage=k_template_name show_future_entries='1' >

As you can see, we are normalizing back the dates from your custom format to that expected by Couch.

Hope it helps.
Thank you so much KK, is perfect, thank you again, appreciate it
5 posts Page 1 of 1