Technology weblog

IT-Essence
Sunday Apr 29, 2018

Fullcalendar with json-server

In this post we will describe how to get Fullcalendar working with json-server.

First of all, we need to install the json-server. We do this by invoking $ npm install -g json-server --save-dev. This enables us to run our project as a module:

// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('events.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

This module can now be started with node server.js.

The API of the json-server should be access from within the HTML like so:

<script>
  $(document).ready(function() {

    $('#calendar').fullCalendar({
      selectable: true,
      selectHelper: true,
      editable: true,

      // add event name to title attribute on mouseover
      eventMouseover: function(event, jsEvent, view) {
        if (view.name !== 'agendaDay') {
          $(jsEvent.target).attr('title', 'Click to edit event: ' + event.title);
        }
      },
      eventDestroy: function(event, element, view)
      {
        //alert("Are you sure you want to delete " + event.title + "?");
      },
      eventClick: function(calEvent, jsEvent, view)
      {
        var r=confirm('Are you absolutely sure you want to delete "' + calEvent.title + '"'      );
        if (r===true)
        {
          $.ajax({
            url: "https://www.masomenoshoa.com/api/events/" + calEvent.id,
            method: "delete",
            datatype: "json",
            contenttype: "application/json"
          });
          $('#calendar').fullCalendar('removeEvents', calEvent._id);
        }
      },
      select: function(start, end) {
        var title = prompt('Agenda entry title:');
        var eventData;
        if (title) {
          eventData = {
            title: title,
            start: start,
            end: end
          };
          $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
          $.ajax({
            url: "https://www.masomenoshoa.com/api/events",
            method: "POST",
            datatype: "json",
            contenttype: "application/json",
            data: {
              "title" : eventData.title,
              "start" : moment(start).format("YYYY-MM-DD"),
              "end" : moment(end).format("YYYY-MM-DD")
            }
          });
        }
        $('#calendar').fullCalendar('unselect');
      },
      events:
      {
        url: 'https://www.masomenoshoa.com/api/events',
        textColor: 'yellow',
        startParam: 'start_gte',
        endParam: 'end_lte'
      }
    });
  });
</script>

The most important change is in the events: section: here we replace the standard json-server start and end query parameters to "start_gte" and "end_lte", so that it is properly understood and processed by the standard json-server API.

Note also that the json-server standard runs on port 3000. This is also the case here, but we have used Apache as a reversed proxy, so that the port 3000 did not have to be opened in the firewall:

  <VirtualHost *:80>
     ServerName www.masomenoshoa.com
     Redirect / https://www.masomenoshoa.com/
  </VirtualHost>

  <VirtualHost _default_:443>
     ServerName www.masomenoshoa.com
     ServerAlias masomenoshoa.com
     DocumentRoot "/var/www/com.masomenoshoa.www/htdocs"

     <Proxy *>
      <Limit POST DELETE PUT PATCH>
        AuthType Basic
        AuthName "Password Protected API"
        AuthBasicProvider file
        AuthUserFile /var/www/com.masomenoshoa.www/htdocs/.htpasswd
        Require valid-user
      </Limit>
     </Proxy>
     ProxyPreserveHost On
     ProxyRequests off
     ProxyPass /api/ http://212.114.109.245:3000/
     ProxyPassReverse /api/ http://212.114.109.245:3000/
     <Directory "/var/www/com.masomenoshoa.www/htdocs/downloads">
     . . . . .

We also see how the POST, DELETE, PUT and PATCH operations have been protected with basic authentication, so that not every arbitrary visitor can modify the calendar.

Last but not least, we were able to start the json-server at boot using nodejs-init-gentoo project on GitHub.

Comments:

Post a Comment:
Comments are closed for this entry.

Hire us
Archives
Tags
Links
Stats
Referrers