Vue Scheduler - Customize Appointment

For a minor customization of Scheduler appointments, you can define specific fields in appointment data objects. For example, the following code generates three appointments: the first is not customized, the second is hidden, and the third is disabled.

jQuery
index.js
var appointments = [{
    text: "Website Re-Design Plan",
    startDate: new Date("2016-04-25T09:30:00.000Z"),
    endDate: new Date("2016-04-25T11:30:00.000Z")
}, {
    text: "Book Flights to San Fran for Sales Trip",
    startDate: new Date("2016-04-25T12:00:00.000Z"),
    endDate: new Date("2016-04-25T13:00:00.000Z"),
    hidden: true
}, {
    text: "Annual Meeting in Berlin",
    startDate: new Date("2016-04-26T11:00:00.000Z"),
    endDate: new Date("2016-04-26T13:00:00.000Z"),
    disabled: true
}
// ...
];

$(function () { 
    $("#schedulerContainer").dxScheduler({
        dataSource: appointments,
        currentDate: new Date(2016, 4, 25)
    });
});
Angular
app.component.ts
app.component.html
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{
        text: "Website Re-Design Plan",
        startDate: new Date("2016-04-25T09:30:00.000Z"),
        endDate: new Date("2016-04-25T11:30:00.000Z")
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        startDate: new Date("2016-04-25T12:00:00.000Z"),
        endDate: new Date("2016-04-25T13:00:00.000Z"),
        hidden: true
    }, {
        text: "Annual Meeting in Berlin",
        startDate: new Date("2016-04-26T11:00:00.000Z"),
        endDate: new Date("2016-04-26T13:00:00.000Z"),
        disabled: true
    }
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler
    [dataSource]="appointments"
    [currentDate]="currentDate">
</dx-scheduler>
Vue
App.vue
<template>
    <DxScheduler
        :data-source="appointments"
        :current-date="currentDate"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            currentDate: new Date(2016, 4, 25),
            appointments: [{
                text: "Website Re-Design Plan",
                startDate: new Date("2016-04-25T09:30:00.000Z"),
                endDate: new Date("2016-04-25T11:30:00.000Z")
            }, {
                text: "Book Flights to San Fran for Sales Trip",
                startDate: new Date("2016-04-25T12:00:00.000Z"),
                endDate: new Date("2016-04-25T13:00:00.000Z"),
                hidden: true
            }, {
                text: "Annual Meeting in Berlin",
                startDate: new Date("2016-04-26T11:00:00.000Z"),
                endDate: new Date("2016-04-26T13:00:00.000Z"),
                disabled: true
            }
            // ...
            ];
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const appointments = [{
    text: "Website Re-Design Plan",
    startDate: new Date("2016-04-25T09:30:00.000Z"),
    endDate: new Date("2016-04-25T11:30:00.000Z")
}, {
    text: "Book Flights to San Fran for Sales Trip",
    startDate: new Date("2016-04-25T12:00:00.000Z"),
    endDate: new Date("2016-04-25T13:00:00.000Z"),
    hidden: true
}, {
    text: "Annual Meeting in Berlin",
    startDate: new Date("2016-04-26T11:00:00.000Z"),
    endDate: new Date("2016-04-26T13:00:00.000Z"),
    disabled: true
}
// ...
];

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={appointments}
                defaultCurrentDate={new Date(2016, 4, 25)} 
            />
        );
    }
}
export default App;
jQuery

If you need a more flexible solution, combine HTML markup for appointments manually with jQuery DOM manipulation methods. To apply this markup, use the appointmentTemplate callback function as shown in the following code.

index.js
var schedulerData = [{
    movie: "His Girl Friday",
    price: 5,
    startDate: new Date("2016-04-24T09:10:00.000Z"),
    endDate: new Date("2016-04-24T11:20:00.000Z")
}, {
    movie: "Royal Wedding",
    price: 10,
    startDate: new Date("2016-04-24T10:05:00.000Z"),
    endDate: new Date("2016-04-24T11:30:00.000Z")
}, 
// ...
];

$(function () {
    $("#schedulerContainer").dxScheduler({
        dataSource: schedulerData,
        appointmentTemplate: function (model, index, element) {
            element.append("<i>" + model.appointmentData.movie + "</i>");
            element.append("<p>Price: $" + model.appointmentData.price + "</p>");
        }
    });
});

You can also customize an individual appointment. For this purpose, declare a template for this appointment as a script and pass its id to the template field of the appointment's data object.

HTML
JavaScript
<script id="individualTemplate" type="text/html">
    <!-- ... -->
</script>
var schedulerData = [{
    movie: "Royal Wedding",
    startDate: new Date("2016-04-24T10:05:00.000Z"),
    endDate: new Date("2016-04-24T11:30:00.000Z"),
    template: $("#individualTemplate")
}, {
    // ...
}];
Angular

If you need a more flexible solution, define a custom template. The following code shows how to use dxTemplate to define templates for appointments.

app.component.html
app.component.ts
<dx-scheduler 
    [dataSource]="schedulerData"
    appointmentTemplate="appointmentTemplate"
    [currentDate]="currentDate">
    <div *dxTemplate="let model of 'appointmentTemplate'">
        <i>{{model.appointmentData.movie}}</i>
        <p>Price: ${{model.appointmentData.price}}</p>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    schedulerData = [{
        movie: "His Girl Friday",
        price: 5,
        startDate: new Date("2016-04-24T09:10:00.000Z"),
        endDate: new Date("2016-04-24T11:20:00.000Z")
    }, {
        movie: "Royal Wedding",
        price: 10,
        startDate: new Date("2016-04-24T10:05:00.000Z"),
        endDate: new Date("2016-04-24T11:30:00.000Z")
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 24);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
Vue

If you need a more flexible solution, define a custom template. The following code shows how to define templates for appointments.

App.vue
<template>
    <DxScheduler
        :data-source="appointments"
        :current-date="currentDate"
        appointment-template="appointment"
    >
        <template #appointment="{ data }">
            <i>{{data.appointmentData.movie}}</i>
            <p>Price: ${{data.appointmentData.price}}</p>
        </template>
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            currentDate: new Date(2016, 4, 25),
            appointments: [{
                movie: "His Girl Friday",
                price: 5,
                startDate: new Date("2016-04-24T09:10:00.000Z"),
                endDate: new Date("2016-04-24T11:20:00.000Z")
            }, {
                movie: "Royal Wedding",
                price: 10,
                startDate: new Date("2016-04-24T10:05:00.000Z"),
                endDate: new Date("2016-04-24T11:30:00.000Z")
            }, 
            // ...
            ];
        }
    }
}
</script>
React

If you need a more flexible solution, define a rendering function. The following code shows how to define a rendering function for appointments.

App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const appointments = [{
    movie: "His Girl Friday",
    price: 5,
    startDate: new Date("2016-04-24T09:10:00.000Z"),
    endDate: new Date("2016-04-24T11:20:00.000Z")
}, {
    movie: "Royal Wedding",
    price: 10,
    startDate: new Date("2016-04-24T10:05:00.000Z"),
    endDate: new Date("2016-04-24T11:30:00.000Z")
}, 
// ...
];

const renderAppointment = (model) => {
    return (
        <React.Fragment>
            <i>{{model.appointmentData.movie}}</i>
            <p>Price: ${{model.appointmentData.price}}</p>
        </React.Fragment>
    );
}

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={appointments}
                defaultCurrentDate={new Date(2016, 4, 25)} 
                appointmentRender={renderAppointment}
            />
        );
    }
}
export default App;

View Demo

In addition, you can use a 3rd-party template engine to customize the UI component appearance. For more information, see the 3rd-Party Template Engines article.

See Also