JavaScript/jQuery Calendar Options

$(function() {
    $("#calendarContainer").dxCalendar({
        // ...
        disabledDates: [ 
            new Date("07/1/2017"),  
            new Date("07/2/2017"), 
            new Date("07/3/2017") 
        ]
    });
});

<template>
    <DxCalendar ...
        :disabled-dates="disabledDates"
    />
</template>

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

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    data() {
        return {
            disabledDates: [ 
                new Date("07/1/2017"),  
                new Date("07/2/2017"), 
                new Date("07/3/2017") 
            ]
        }
    }
}
</script>

import React from 'react';

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

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    constructor() {
        this.disabledDates = [ 
            new Date("07/1/2017"),  
            new Date("07/2/2017"), 
            new Date("07/3/2017") 
        ];
    }
    render() {
        return (
            <Calendar ...
                disabledDates={this.disabledDates} 
            />
        );
    }
}
export default App;

$(function() {
    $("#calendarContainer").dxCalendar({
        // ...
        disabledDates: function(args) {
            const dayOfWeek = args.date.getDay();
            const month = args.date.getMonth();
            const isWeekend = args.view === "month" && (dayOfWeek === 0 || dayOfWeek === 6 );
            const isMarch = (args.view === "year" || args.view === "month") && month === 2;

            return isWeekend || isMarch;
        }
    });
});

<template>
    <DxCalendar ...
        :disabled-dates="disableDates"
    />
</template>

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

import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    methods: {
        disableDates(args) {
            const dayOfWeek = args.date.getDay();
            const month = args.date.getMonth();
            const isWeekend = args.view === "month" && (dayOfWeek === 0 || dayOfWeek === 6 );
            const isMarch = (args.view === "year" || args.view === "month") && month === 2;

            return isWeekend || isMarch;
        }
    }
}
</script>

import React from 'react';

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

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    disableDates(args) {
        const dayOfWeek = args.date.getDay();
        const month = args.date.getMonth();
        const isWeekend = args.view === "month" && (dayOfWeek === 0 || dayOfWeek === 6 );
        const isMarch = (args.view === "year" || args.view === "month") && month === 2;

        return isWeekend || isMarch;
    }
    render() {
        return (
            <Calendar ...
                disabledDates={this.disableDates} 
            />
        );
    }
}
export default App;

$(function(){
    $("#calendarContainer").dxCalendar({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<template>
    <DxCalendar ...
        :element-attr="calendarAttributes">
    </DxCalendar>
</template>

<script>
import DxCalendar from 'devextreme-vue/calendar';

export default {
    components: {
        DxCalendar
    },
    data() {
        return {
            calendarAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    calendarAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Calendar ...
                elementAttr={this.calendarAttributes}>
            </Calendar>
        );
    }
}
export default App;

$(() => {
    const calendar = $('#calendar').dxCalendar({
        // ...
    }).dxCalendar('instance');

    $('#button').dxButton({
        // ...
        onClick () {
            if (calendar.option('isDirty')) {
                DevExpress.ui.notify("Do not forget to save changes", "warning", 500);
            }
        }
    });
});

<template>
    <DxCalendar ...
        :ref="calendarRef"
    >
    </DxCalendar>
    <DxButton ...
        @click="onClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxCalendar from 'devextreme-vue/calendar';
import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

export default {
    components: {
        DxCalendar,
        DxButton
    },

    data() {
        return {
            calendarRef
        }
    },

    methods: {
        onClick () {
            if (this.calendar.option('isDirty')) {
                notify("Do not forget to save changes", "warning", 500);
            }
        }
    },

    computed: {
        calendar: function() {
            return this.$refs[calendarRef].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import Calendar from 'devextreme-react/calendar';
import Button from 'devextreme-react/button';
import 'devextreme/dist/css/dx.light.css';

const App = () => {
    const calendarRef = useRef(null);

    const onClick = () => {
        if (this.calendarRef.current.instance.option('isDirty')) {
            notify("Do not forget to save changes", "warning", 500);
        }
    };

    return (
        <Calendar ...
            ref={calendarRef}
        >
        </Calendar>
        <Button ...
            onClick={onClick}
        />
    );
};

export default App;

import Calendar from 'devextreme-react/calendar';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.calendarInstance = e.component;
    }

    render() {
        return (
            <div>
                <Calendar onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#calendarContainer").dxCalendar({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxCalendar ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxCalendar from 'devextreme-vue/calendar'; 

export default { 
    components: { 
        DxCalendar
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Calendar from 'devextreme-react/calendar'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Calendar ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    $("#calendarContainer").dxCalendar({
        // ...
        validationMessagePosition: 'right'
    }).dxValidator({
        validationRules: [{
            type: 'required',
            message: 'Required',
        }],
    });
});

<dx-calendar ...
    validationMessagePosition="right">
    <dx-validator>
        <dxi-validation-rule
            type="required"
            message="Required"
        >
        </dxi-validation-rule>
    </dx-validator>
</dx-calendar>

<template>
    <DxCalendar ...
        validation-message-position="right"
    >
        <DxValidator>
            <DxRequiredRule message="Required" />
        </DxValidator>
    </DxCalendar>
</template>

<script>
    // ...
</script>

import React from 'react';
// ...

function App() {
    return (
        <Calendar ...
            validationMessagePosition="right"
        >
            <Validator>
                <RequiredRule message="Required" />
            </Validator>
        </Calendar>
    ); 

};
export default App;

$(function() {
    const calendar = $("#calendarContainer").dxCalendar({
        // ...
    }).dxCalendar("instance");

    function setInvalidStatus(message) {
        calendar.option({
            validationStatus: "invalid",
            validationErrors: [{ message: message }]
        });
    }
});

<template>
    <DxCalendar ...
        :validation-status="validationStatus"
        :validation-errors="validationErrors"
    />
</template>

<script>
    // ...
    export default {
        // ...
        data() {
            return {
                validationStatus: "valid",
                validationErrors: []
            }
        },
        methods: {
            setInvalidStatus(message) {
                this.validationStatus = "invalid";
                this.validationErrors = [{ message: message }];
            }
        }
    }
</script>

import React, { useState } from 'react';
// ...

function App() {
    const [validationStatus, setValidationStatus] = useState("valid");
    const [validationErrors, setValidationErrors] = useState([]);

    const setInvalidStatus = message => {
        setValidationStatus("invalid");
        setValidationErrors([{ message: message }]);
    }

    return (
        <Calendar
            validationStatus={validationStatus}
            validationErrors={validationErrors}
        />
    ); 

};
export default App;

$(function() {
    let lastDateOfWeek;

    function getWeekNumber(date, firstDayOfWeek) {
        // Implement your own week calculation logic
    }

    function getCellTemplate(data) {
        if (data.view === 'month') {
            if (!data.date) {
                cssClass = 'week-number';
                data.text = getWeekNumber(lastDateOfWeek, 0).toString();
            } 
            else {
                lastDateOfWeek = data.date;
            }
        }
        return `<span>${data.text}</span>`;
    }

    $('#calendar-container').dxCalendar({
        value: new Date(2000, 0, 1),
        showWeekNumbers: true,
        cellTemplate: getCellTemplate
    });
});

<template>
    <DxCalendar
        :value="currentValue"
        :show-week-numbers="true"
        cell-template="custom"
    >
        <template #custom="{ data: cell }">
            <span :class="getCellCssClass(cell)">
                {{ cell.text }}
            </span>
        </template>
    </DxCalendar>
</template>

<script>
// ...
function getWeekNumber(date, firstDayOfWeek) {
    // Implement your own week calculation logic
}

export default {
    // ...
    data() {
        return {
            currentValue: new Date(2000, 0, 1),
            lastDateOfWeek: 0
        }
    }
    methods: {
        getCellCssClass({ date, view, text }) {
            let cssClass = '';
            if (view === 'month') {
                if (!date) {
                    cssClass = 'week-number';
                    text = getWeekNumber(this.lastDateOfWeek, 0).toString();
                } 
                else {
                    this.lastDateOfWeek = date;
                }
            }
            return cssClass;
        }
    }
}
</script>

// ...
let lastDateOfWeek;
const currentValue = new Date(2000, 0, 1);

const getWeekNumber(date, firstDayOfWeek) {
        // Implement your own week calculation logic
    }

const getCellCssClass({ date, view, text }) {
    let cssClass = '';
    if (view === 'month') {
        if (!date) {
            cssClass = 'week-number';
            text = getWeekNumber(lastDateOfWeek, 0).toString();
        } 
        else {
            lastDateOfWeek = date;
        }
    }
    return cssClass;
}

const customCell = (cell) => {
    const { text, } = cell;
    const className = getCellCssClass(cell);
    return (
        <span className={className}>
            { text }
        </span>
    );
}

function App() {
    return (
        <Calendar
            value={currentValue}
            showWeekNumbers={true}
            cellRender={customCell}
        >
        </Calendar>
    );
};

export default App;