Updating UI

This is a basic example of how you can use a web sockets service like Pusher to trigger UI updates when a change happens in a user’s calendar.

The code samples assume a Rails app using the Cronofy and Pusher libraries.

1. Setup the web hook receiver #

Create a controller to receive the push notification for a user. We’re going to identify which user this relates to by passing a user_id parameter as part of the URL.

When a change notification is received from Cronofy, we then trigger a calendar_changed event on a Pusher Channel for the user_id.

# config/routes.rb
post "/cronofy_webhooks/:user_id", to: 'cronofy_webhooks#create'

# app/controllers/cronofy_web_hooks
class CronofyWebhooksController < ApplicationController

  def create
    user_id = params[:user_id]
    Pusher.trigger(user_id, "calendar_changed", {})
  end
end

2. Open Cronofy Channel for the User #

When the user is authorized, we add a channel that is configured to receive change notifications for that user.

callback_url = cronofy_webhooks_url(user_id: user.id)
cronofy.create_channel(callback_url)

3. Listen for changes and reload the element #

In the client code, we subscribe to the Pusher Channel for that user and bind a function to the calendar_changed event.

The function will call the .update() method on the Cronofy UI Element variable to reflect the latest changes.

var availabilityViewer = CronofyElements.AvailabilityViewer({...});

var pusher = new Pusher('<%= Pusher.key %>', {
  encrypted: true
});

var userId = '<%= user.id %>';
var channel = pusher.subscribe(userId);
channel.bind('calendar_changed', function(data) {
  availabilityViewer.update();
});