Hello all,

I've been using the Calendar (which works awesome) for a school website I did, and I'm wondering if there's a feature to make part of what I'm doing a little easier.

Currently, when I input their dates and come to parts where things span over a couple of days I'm having to put that entry into each date so it shows on all affected dates. Example: Thanksgiving week is from the 20th - 27th. When I make my entry on the 20th I can choose a start and end date, but of course on the calendar it only shows on the 20th. I need a way to make that entry show on each day up through the 27th if possible, because not everyone clicks the link to view the detail entry page. I don't mind doing it for each date manually if I have to.

Is something like this possible?

Thanks!

[KK]

Hi,

I am sorry but, at the moment, there is nothing out-of-the-box to help with this feature.

No problemo. It's not a deal breaker by any means.

Thanks!

[trendoman]

It's easy to use an open-source JS plugin https://fullcalendar.io/

2017-10-01-150332.png (43.42 KiB) Viewed 3884 times

As this is an alternative solution, we don't need 'cms:calendar' at all. Once all dates are listed with regular 'cms:pages' tag to a js-object, calendar is being created automatically.

Code: Select all

$(function() {


    // Add events
    // ------------------------------

    // Default events
    var events = [
        {
            title: 'All Day Event',
            start: '2014-11-01'
        },
        {
            title: 'Long Event',
            start: '2014-11-07',
            end: '2014-11-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-11-09T16:00:00'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: '2014-11-16T16:00:00'
        },
        {
            title: 'Conference',
            start: '2014-11-11',
            end: '2014-11-13'
        },
        {
            title: 'Meeting',
            start: '2014-11-12T10:30:00',
            end: '2014-11-12T12:30:00'
        },
        {
            title: 'Lunch',
            start: '2014-11-12T12:00:00'
        },
        {
            title: 'Meeting',
            start: '2014-11-12T14:30:00'
        },
        {
            title: 'Happy Hour',
            start: '2014-11-12T17:30:00'
        },
        {
            title: 'Dinner',
            start: '2014-11-12T20:00:00'
        },
        {
            title: 'Birthday Party',
            start: '2014-11-13T07:00:00'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-11-28'
        }
    ];



    // Initialization
    // ------------------------------

    // Basic view
    $('.fullcalendar-basic').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        defaultDate: '2014-11-12',
        editable: true,
        events: events
    });

}

Basically, you can put everything to a couch-managed js file, which can happen to be the same 'events' template you already have, but with a code to be used also for js purpose.

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

Then that template will generate the objects and init the calendar.

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='My events' clonable='1' >
  .. editables
</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>
                // Add events
                // ------------------------------

                // Default events
                
            </cms:if>
        
           ...create 'events' js object here...
        
        
            <cms:if k_paginated_bottom>
            
                // Initialization
                // ------------------------------

                // Basic view
                $('.fullcalendar-basic').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay'
                    },
                    defaultDate: '2014-11-12',
                    editable: true,
                    events: events
                });        
            </cms:if>
        
        </cms:pages>
        
    </cms:capture>
    <cms:abort is_404='0' msg=msg />
</cms:if>

.. here is regular template code if you have a list-view/page-view for it.

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

I suggest first to do everything in a static way with sample data and familiarize yourself with the concept and js plugin. Then piece by piece add couchcms into the flow.

Oh! This is really interesting. I'm going to check this out in full detail, thanks for the tip!