88 lines
3 KiB
Markdown
88 lines
3 KiB
Markdown
# NC calendar 2 JS fullcalendar
|
|
|
|
Embed a NC calendar as a JS fullcalendar
|
|
|
|
## Install
|
|
|
|
This needs to be installed a server that can access the nextcloud database
|
|
|
|
|
|
* create subdomain my-calendar.my-domain.net
|
|
* download tarball https://farga.exo.cat/buttle/nc-calendar-2-fullcalendar/archive/main.tar.gz
|
|
* unpack at /var/www/my-calendar
|
|
* create a apache/nginx config
|
|
|
|
```
|
|
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
|
|
|
|
Goto http://my-calendar.my-domain.net
|
|
|
|
You can embed this into a wordpress page like this
|
|
|
|
|
|
```
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://my-calendar.my-domain.net/lib/moment.min.js"></script>
|
|
<script src="https://my-calendar.my-domain.net/lib/fullcalendar/ca.js"></script>
|
|
<script src="https://my-calendar.my-domain.net/lib/fullcalendar/fullcalendar.min.js"></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>
|
|
</div>
|
|
```
|
|
|
|
Create a directory in wp-content called agenda
|
|
|
|
add a files calles script.js
|
|
|
|
```
|
|
$(document).ready(function() {
|
|
var dayEvents = {};
|
|
$('#calendar').fullCalendar({
|
|
// put your options and callbacks here
|
|
events: 'https://my-calendar-my-domain.net/feed?callback=?',
|
|
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();
|
|
$('#modal-content').html(content);
|
|
//$('#modal-content').html(dayEvents[day].html());
|
|
//console.log(dayEvents[day]);
|
|
$("#modal").addClass("active");
|
|
},
|
|
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"/>');
|
|
$content.append(event.description);
|
|
element.append($content);
|
|
return element;
|
|
},
|
|
});
|
|
$("#modal-close").click(function () {
|
|
$("#modal").removeClass("active");
|
|
});
|
|
});
|
|
```
|