0

I am using FullCalendar to try and display both a year list of events and a calendar view of events. Both are having problems with the same code structure. (So I am using the list one as my example. I am trying to set an end date on my recurring events. They can be displayed on multiple days of the week (this example is only Saturdays). I have 2 possible solutions that don't meet my needs. Solution one is the following: 

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultView: 'listYear',
            views: {
                listYear: { buttonText: 'Diary Dates' }
            },
            header: {
                left: '',
                center: '',
                right: 'prev title next'
            },
            events: [{
                title  : "Shoalhaven Heads Seafood and Fresh Produce Fair",
                url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
                backgroundColor: '#dd4242',
                borderColor: '#dd4242',                                                                                                                                     
                start: '08:00',
                end: '13:00',                                                                                            
                dow: [6],
                ranges: [{
                    start: '2018-04-21T08:00:00',                                                                                                        
                    end: '2018-11-03T13:00:00',                                                                  
                }],                                                                              
            },
            {
                title  : "BOWIE UNZIPPED at the BOWLO!",
                url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
                backgroundColor: '',
                borderColor: '',
                start: '2018-04-27',
                allDay: true,                                                                                                        
            }]
        });
    });
</script>

This successfully produces recuring events on the days I wanted. However the ranges do not reem to work, as they are printed for every Saturday until the end of time (Should only go until November this year).

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            defaultView: 'listYear',
            views: {
                listYear: { buttonText: 'Diary Dates' }
            },
            header: {
                left: '',
                center: '',
                right: 'prev title next'
            },
            events: [{
                title  : "Shoalhaven Heads Seafood and Fresh Produce Fair",
                url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
                backgroundColor: '#dd4242',
                borderColor: '#dd4242',                                                                                      
                start: '2018-04-21T08:00:00',
                end: '2018-11-03T13:00:00',                                                                                          
                dow: [6],                                                        
            },                                                                       
            {
                title  : "BOWIE UNZIPPED at the BOWLO!",
                url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
                backgroundColor: '',
                borderColor: '',                                                                                            
                start: '2018-04-27',                                                                                                 
                allDay: true,                                                                                            
            }]
        });
    });
</script>

I then tried another option, adding the date to the start/end parameters. This did the opposite, It was able to limit the events to the date range specified, however they would not be on specific days, but rather it would stretch over all dates.

I have attached images of both outcomes below.

1st Solution 2018: enter image description here 1st Solution 2019: enter image description here

2nd Solution 2018: enter image description here 2nd Solution 2019: enter image description here

BigD
  • 25
  • 1
  • 9
  • 1
    Recurring events are not built into fullCalendar directly. The "ranges" data you used in the first example only works with a bit of extra code, as shown here: https://stackoverflow.com/a/29393128/5947043 – ADyson Jul 19 '18 at 07:38
  • @ADyson you sir have my thanks, that was exactly the answer to my problem. – BigD Jul 27 '18 at 06:39

0 Answers0