This plugin requires JavaScript!

Installation

After the installation of the plugin simply add the calendar component to your page, you can limit the retrieved events using the "Limit" property, the "Language" property can be used to change the language of the calendar.

If you add more than one calendar component to the page you could for example set each with a different language to allow localization.

To add events to a calendar navigate to the calendar within the backend and add an entry, it can be customized a lot.

Custom Markdown

If you would like to add a custom markdown, instead of using the default one, please add the following code to your page including the calendar component.

Make sure to deactivate the "default" property within the component.

All customization options for the calendar self can be found here: https://fullcalendar.io/docs

 {% component 'calendar' %}
        {% put scripts %}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('{{ calendar.alias }}');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    plugins: [ 'dayGrid', 'list', 'bootstrap' ],
                    header: {
                        left:   'today, prev, next',
                        center: 'title',
                        right:  'dayGridMonth, dayGridWeek, dayGridDay, list'
                    },
                    locale: '{{ calendar.property("language") }}',
                    events: {
                        url: document.location.origin + '/api/christophheich/calendar/feed/{{ __SELF__.property("limit") }}/{{ __SELF__.property("category") }}/{{ __SELF__.property("timezone") }}',
                        method: 'GET',
                        failure: function() {
                            alert('there was an error while fetching events!');
                        }
                    },
                    eventClick: function(info) {
                        if (info.event.url) {
                            window.open(info.event.url);
                            return false;
                        }
                    },
                    eventRender: function(info) {
                        info.el.setAttribute('title', info.event.extendedProps.description);
                    },
                });

                calendar.render();
            });
        </script>
{% endput %}

Licence

The Plugin uses the OctoberCMS licence for paid plugins Regular or Extended.

Icon created by Paomedia from www.iconfinder.com.