In this tutorial we will add a new field "Contact Name" to the event dialogs step by step.

• First create a table that holds your custom field values.

  CREATE TABLE spc_custom_fields (
      id INT UNSIGNED AUTO_INCREMENT NOT NULL,
      spc_event_id INT UNSIGNED NOT NULL,
      contact_name VARCHAR(30),
      PRIMARY KEY(id),
      FOREIGN KEY(spc_event_id) REFERENCES spc_calendar_events(id) ON DELETE CASCADE
  ) ENGINE = InnoDb;
  

• Open "system/apps/calendar/files/dialogs.php" and add your new fields to the "add-event-dialog" and "edit-event-dialog".

• Client Side Callbacks

  Define your callbacks in "index.php".

  //index.php
  <script type="text/javascript">
  $(function() {
  
      SPC.Calendar.initApi({
          //when a new event created add contact name to the database
          createEventBeforeRequest: function(spcEvent) {
              SPC.userData = {
                  contactName: $("#add-event-dialog-contact-name").val()
              };
          },
  
          //when an event clicked retrieve the added field and update the edit-event-dialog
          eventClick: function(spcEvent) {
              //you can reach your
              var contactName = spcEvent["contact_name"];
              $("#edit-event-dialog-contact-name").val(contactName);
          },
  
          //update added field
          editEventBeforeRequest: function(spcEvent) {
              SPC.userData = {
                  contactName: $("#edit-event-dialog-contact-name").val()
              };
          }
      });
  });
  </script>
  

• Server Side Event Controller

  Open 'system/apps/calendar/controllers/Event.php'

  public function getEvent($eventId) {
      $event = $this->event->getEvent($eventId);
  
      //add your custom fields to the event data
      //select 'contact_name' field from 'spc_custom_fields' table
      $select = $this->event->select(array('contact_name'), 'spc_custom_fields')
                            ->where("spc_event_id = $eventId");
      $contactName = $this->event->fetchColumn($select);
      $event['contact_name'] = $contactName;
  
      echo Spc::jsonEncode(array('event' => $event));
  }
  
  public function insertEvent($event) {
      $eventId = $this->event->insertEvent($event);
  
      $contactName = $_POST['spcUserData']['contactName'];
      $sql = "INSERT INTO
                  spc_custom_fields
              SET
                  spc_event_id = {$eventId},
                  contact_name = '{$contactName}'";
  
      $this->event->query($sql);
  }
  
  public function updateEvent($event) {
      $eventId = $event['event']['id'];
      $this->event->updateEvent($event);
  
      $contactName = $_POST['spcUserData']['contactName'];
      $sql = "UPDATE
                  spc_custom_fields
              SET
                  contact_name = '{$contactName}'
              WHERE
                  spc_event_id = {$eventId}";
  
      $this->event->query($sql);
  }
  

• Now you can use your custom fields.