Interacting with the server

Now that we've reviewed the general concepts of working with data in Bryntum components, let's explore server interactions in more detail. There are multiple ways to interact with the server.

For Bryntum Calendar, you can either use loadUrl to interact with all stores collectively:

crudManager : {
    loadUrl : '/data.php'
}

or use createUrl, readUrl, updateUrl, and deleteUrl to define an endpoint for each store individually. For example:

const calendar = new Calendar({
  // other config
  resourceStore : {
    createUrl : 'resource/create.js',
    readUrl   : 'resource/read.js',
    updateUrl : 'resource/update.js',
    deleteUrl : 'resource/delete.js'
  }
});

// CalendarConfig.tsx
import { type BryntumCalendarProps } from "@bryntum/calendar-react";

export const calendarProps: BryntumCalendarProps = {
  // other config
  resourceStore : {
    createUrl : 'resource/create.js',
    readUrl   : 'resource/read.js',
    updateUrl : 'resource/update.js',
    deleteUrl : 'resource/delete.js'
  }
};

import calendarProps from "./calendarConfig";
// App.tsx
const App = props => {

    return <BryntumCalendar {...calendarProps} />
}

<script setup lang="ts">
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
import calendarConfig  from './AppConfig.ts';
</script>

<template>
  <bryntum-calendar v-bind="calendarConfig" />
</template>

import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';

export const calendarConfig : BryntumCalendarProps = {
  // other config
  resourceStore : {
    createUrl : 'resource/create.js',
    readUrl   : 'resource/read.js',
    updateUrl : 'resource/update.js',
    deleteUrl : 'resource/delete.js'
  }
};

<bryntum-calendar
    #calendar
    [crudManager]="calendarProps.crudManager!"
></bryntum-calendar>

// app.config.ts
import { type BryntumCalendarProps } from '@bryntum/calendar-angular';

export const calendarProps: BryntumCalendarProps = {
  // other config
  resourceStore : {
    createUrl : 'resource/create.js',
    readUrl   : 'resource/read.js',
    updateUrl : 'resource/update.js',
    deleteUrl : 'resource/delete.js'
  }
};

// app.component.ts

export class AppComponent implements AfterViewInit {

    // other config
    calendarProps = calendarProps;
}

We don't recommend interacting with a store separately. The best is to use the Crud Manager for store interactions.

The ResourceStore then uses the URLs for AJAX requests for the different CRUD operations. You'll learn more about the ResourceStore in the store interaction section below.

The crudManager is a top-level entity that holds multiple stores together.

You can pass autoLoad : true, if you want the data to be loaded automatically after a store has been initialized.

const calendar = new Calendar({
  // other config
  resourceStore : {
    autoLoad  : true,
    createUrl : 'resource/create.php',
    readUrl   : 'resource/read.php',
    updateUrl : 'resource/update.php',
    deleteUrl : 'resource/delete.php'
  }
});

Using Fetch

You can use the JavaScript Fetch API to fetch the data and feed it into the Bryntum Calendar:

const response = await fetch('resource/load.php');
const data = await response.json();

// feed it to Calendar like this:
const calendar = new Calendar({
    resourceStore : {
        data : data
    }
})

// or this:
calendar.resourceStore.data = data;

Understanding Crud Manager

The Crud Manager provides an easy way to define endpoints for server interactions. It accepts only two endpoints, one for loading data (loadUrl) and another for creating, updating, and deleting data (syncUrl).

const calendar = new Calendar({
  // other config
  crudManager : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  },
})

// CalendarConfig.tsx
import { type BryntumCalendarProps } from "@bryntum/calendar-react";

export const calendarProps: BryntumCalendarProps = {
  // other config
  crudManager : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  }

};

import calendarProps from "./calendarConfig";
// App.tsx
const App = props => {

    return <BryntumCalendar {...calendarProps} />
}

<script setup lang="ts">
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
import calendarConfig  from './AppConfig.ts';
</script>

<template>
  <bryntum-calendar v-bind="calendarConfig" />
</template>

import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';

export const calendarConfig : BryntumCalendarProps = {
    // other config
    crudManager : {
      loadUrl : 'read.js',
      syncUrl : 'sync.js'
    }
};

<bryntum-calendar
    #calendar
    [crudManager]="calendarProps.crudManager!"
></bryntum-calendar>

// app.config.ts
import { type BryntumCalendarProps } from '@bryntum/calendar-angular';

export const calendarProps: BryntumCalendarProps = {
  // other config
  crudManager : {
    loadUrl : 'read.js',
    syncUrl : 'sync.js'
  }
};

// app.component.ts

export class AppComponent implements AfterViewInit {

    // other config
    calendarProps = calendarProps;
}

Check out the Calendar demo that uses the Crud Manager.

The Bryntum component then uses the crudManager to handle CRUD operations for you. Whenever changes are made to tasks, assignments, resources, or anything else, a request is sent to the syncUrl path.

On the backend, you can see the type of change (Create, Update, or Delete) by looking at the request body. Then, based on the operation type, it sends the relevant data.

The following examples use the loadUrl to load the Calendar data with a fake API call using crudManager.

Store interactions

You can use one of the stores, such as AssignmentStore or ResourceStore, to handle a specific type of store data. For example:

const customAssignmentStore = new AssignmentStore({
  createUrl : "assignment/create.php",
  readUrl   : "assignment/read.php",
  updateUrl : "assignment/update.php",
  deleteUrl : "assignment/delete.php"
});

new Calendar({
  assignmentStore : customAssignmentStore
})

We recommend you use this approach when you have API endpoints for a specific store, like AssignmentStore. The Bryntum Calendar will then use these endpoints to interact with the server for assignment-related data.

This means you can have multiple data-specific stores:

new Calendar({
  assignmentStore : {
      createUrl : "assignment/create.php",
      readUrl   : "assignment/read.php",
      updateUrl : "assignment/update.php",
      deleteUrl : "assignment/delete.php"
  },
  resourceStore   : {
    createUrl : "resource/create.php",
    readUrl   : "resource/read.php",
    updateUrl : "resource/update.php",
    deleteUrl : "resource/delete.php"
  }
});

This is useful for managing a single store, but management becomes more difficult when you use all your stores this way. Therefore, we encourage you to use the Crud Manager to manage your data.

Headers

You can use the headers config to configure requests and send custom HTTP headers to the server:

crudManager : {
  transport : {
    sync : {
        url : 'http://mycool-server.com/sync.php',
        // specify Content-Type for requests
        headers : {
            'Content-Type' : 'application/json'
        }
    }
  }
}

If you want send headers in a separate store :

// Configuring headers for each request
const resourceStore = new ResourceStore({
  readUrl : "resource/read.php",
  headers : {
    "Content-Type"   : "text/xml",
    "Accept-Charset" : "utf-8",
  },
});

Next, let's learn how data is structured for different requests.

Continue reading: Understanding structure.

Interacting with the server

Using Fetch

Understanding Crud Manager

Store interactions

Headers

Contents