2023-05-13 18:50:43 +02:00

3 KiB

NC calendar 2 JS fullcalendar

Embed a NC calendar as a JS fullcalendar


This needs to be installed a server that can access the nextcloud database

root        /var/www/my-calendar/public/;
index       index.php;
  • create a database user that has read access to the table oc_calendarobjects

  • Find the id(s) of the calendar(s) in the table you want to share

  • edit /var/www/my-calendar/src/settings.php


You can embed this into a wordpress page like this

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="/wp-content/agenda/script.js"></script>
<div id="calendar"></div>
<div id="modal">
<div id="modal-content"></div>
<div id="modal-close">[tancar]</div>

Create a directory in wp-content called agenda

add a files calles script.js

$(document).ready(function() {
      var dayEvents = {};
            // put your options and callbacks here
            events: '',
            firstDay: 1,
            timeFormat: 'H:mm',
            locale: 'ca',
            //defaultView: 'listMonth',
            defaultView: $(window).width() < 765 ? 'listMonth':'month',
            height: 1000,
            //contentHeight: 1250,
            //aspectRatio: 1,
            eventClick: function(data, jsEvent, view) {
                var day = moment(data.start).format("DD/MM/YY");
                var content = $(this).find('.desc').html();
            eventRender: function(event, element) {

                $content = $('<div class="desc" style="display:none"></div>');
                $content.append('<strong>'+event.title+'</strong><br />');
                if (event.location != null) {
                        $content.append(event.location+' : ');
                $content.append(moment(event.start).format('DD/MM/YY HH:mm')+'h - '+moment(event.end).format('HH:mm')+'h');
                $content.append('<hr style=" margin:0; padding:0"/>');
                return element;
        $("#modal-close").click(function () {