Configuring Appointments (igScheduler)

Purpose

This topic explains the concept of the appointments in the igScheduler control and provides examples on how to bind and perform CRUD operations with those appointments.

Overview

The appointments are used to represent an event which starts at a specific time and ends at a specific time. The appointment can be associated with a resource, which means that the resource (a kind of entity, for example a person) is the owner of the activity represented by that appointment.

It is important to note that the scheduling control is built by the igSchedulerCore and the igScheduler controls. The igSchedulerCore is the engine and the igScheduler runs the user interface.

The igScheduler works with appointments that are simple JSON objects, containing only the properties listed in the Appointment object properties section. The collection of appointments, assigned to the dataSource option by the developer, needs to contain this type of appointments.

At the same time the igSchedulerCore maps these objects to another type of appointment objects. In comparison to the other type of appointments, the appointments of the igSchedulerCore do not contain the properties listed in the Appointment object properties section, but expose getter and setter methods with the same name and more. Please refer to Appointment object methods section below for more information.

The crossing point between those type are the events triggered on user interactions with the igScheduler. Attaching to a certain event, the developer may access the appointment that is being created, edited, etc. However, the developer may need to call .dataObject() in order to retrieve a simple JSON object representing the activity, and this JSON object then may be passed to other methods to work with it.

Code example

The developer access the appointment that is created and then programatically creates the same event for a different location:

$("#scheduler").igScheduler({
    dataSource: appointments,
    resources: resources,
    appointmentCreated: function (evt, ui) {
        console.log(ui.appointment.dataObject());
        ui.appointment.dataObject().location = "London";
        ui.owner.createAppointment(ui.appointment.dataObject());
    },

Appointment object properties

The following table lists the Appointment's key properties and their purpose:

Appointment object methods

The following table lists the Appointment's key methods and their purpose:

Code example

The appointments are a collection of JSON objects, containing all or some of the appointment`s properties:

var appointments = [{
        "id": 11,
        "start": new Date(currentYear, currentMonth, 2, 6, 45),
        "end": new Date(currentYear, currentMonth, 3, 6, 45),
        "subject": "Marketing conference",
        "resourceId": 1
    },
    {
        "id": 5,
        "end": new Date(currentYear, currentMonth, 3, 12, 45),
        "start": new Date(currentYear, currentMonth, 3, 13, 45),
        "subject": "Dentist appointment"
        "resourceId": 6
    },
    {
        "id": 10,
        "start": new Date(currentYear, currentMonth, 4, 8),
        "end": new Date(currentYear, currentMonth, 4, 8, 30),
        "subject": "Distributions sync",
        "description": "Sync with distributions team"
        "resourceId": 11
    }
],

$("#scheduler").igScheduler({
    height: "650px",
    width: "100%",
    dataSource: appointments
});

Getting all appointments in time range

A collection of all appointments for the given time range can be retrieved by the getAppointmentsInRange method

Code example

var appointment = $("#scheduler").igScheduler("getAppointmentById", 4);

Adding appointment through the API

Appointments can be added by using the createAppointment method by passing the appointment object as an argument .

Code example

var appointment = $("#scheduler").igScheduler("createAppointment", {
    id: 1,
    subject: "Some subject",
    location: "Somewhere",
    start: new Date(2017, 04, 05, 12, 30),
    end: new Date(2017, 04, 05, 12, 30),
    resourceId: 4,
    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
});

Editing appointment through the API

Appointments can be edited by using the editAppointment method that is taking as parameters the appointment object and an object containing the properties that will be changed.

Code example

var appointment = var appointment = $("#scheduler").igScheduler("getAppointmentById", 4);

$("#scheduler").igScheduler("editAppointment", appointment, {
    subject: "Some subject",
    location: "Somewhere",
    start: new Date(2017, 04, 05, 12, 30),
    end: new Date(2017, 04, 05, 12, 30),
    resourceId: 4,
    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
});

Deleting appointment through the API

Appointments can be deleted by using the deleteAppointment method which needs to be passed the appointment object as an argument.

Code example

$("#scheduler").igScheduler("deleteAppointment", appointment);

Related topics

Configuring Views (igScheduler): The topics in this section provide information about the different views used by the igScheduler control to present calendar data.