diff --git a/event/static/js/calendar.js b/event/static/js/calendar.js
index 03c15dc..58f2572 100644
--- a/event/static/js/calendar.js
+++ b/event/static/js/calendar.js
@@ -787,12 +787,37 @@ class EventDetails {
     // On click, switch the subscription state
     // and update objects related to the perm count
     let event = this.event;
-    buttonNode.on("click", () => {
-      // TODO: subscribe or unsubscribe
-      event.subscribedByUser = ! event.subscribedByUser;
 
-      this.updatePermManagementArea();
-      event.updatePermCounter();
+    buttonNode.on("click", () => {
+      let goal = event.subscribedByUser ? "unenrol" : "enrol";
+      let url = event.calendar.subscriptionURLFormat
+        .replace("999999", event.id);
+
+      $.ajax(url, {
+        method: "POST",
+        dataType: "json",
+
+        headers: {
+          "X-CSRFToken": event.calendar.csrfToken
+        },
+
+        data: {
+          "goal": goal
+        },
+
+        success: (jsonAnswer) => {
+          event.subscribedByUser = jsonAnswer.enrolled;
+          event.nbPerms = jsonAnswer.number;
+
+          this.updatePermManagementArea();
+          event.updatePermCounter();
+          event.updateNodeStyle();
+        },
+
+        error: (_, message) => {
+          alert(message);
+        }
+      });
     });
 
     return buttonNode;