I’m stuck on a problem involving: Scheduler. Any suggestions?

[jovanovicParticipant]

How do I block certain hours in the jqxScheduler week view using jQuery? I don’t want users to book between 12am and 6am.

[adminKeymaster]

jqxScheduler lets you “block” hours (so users cannot create appointments in those ranges) using the resources, editDialogCreate, or more directly with the appointments source + appointments rendering.

But the cleanest way to block time ranges in jQuery is with the renderAppointment + cellDoubleClick (or appointmentAdd) event combination, where you:
Catch when the user tries to add a new appointment.
Check if the time falls within the “blocked” window (12 am – 6 am).

Cancel or show a message.

<div id="scheduler"></div>

<script>
$(document).ready(function () {
    let appointments = [];

    let source = {
        dataType: "array",
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'location', type: 'string' },
            { name: 'subject', type: 'string' },
            { name: 'calendar', type: 'string' },
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        localData: appointments
    };

    let adapter = new $.jqx.dataAdapter(source);

    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2025, 9, 4),
        width: 850,
        height: 600,
        source: adapter,
        view: "weekView",
        showLegend: true,
        views: ["dayView", "weekView", "monthView"],
        appointmentDataFields: {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "location",
            subject: "subject",
            resourceId: "calendar"
        }
    });

    // Prevent booking in blocked hours
    $("#scheduler").on('appointmentAdd', function (event) {
        let args = event.args.appointment;
        let startHour = args.from.getHours();
        let endHour = args.to.getHours();

        if (startHour < 6) {
            alert("Booking between 12am and 6am is not allowed.");
            event.cancel = true; // block appointment creation
        }
    });

    // Optional: prevent double-click new appointment creation
    $("#scheduler").on('cellDoubleClick', function (event) {
        let clickedHour = event.args.date.getHours();
        if (clickedHour < 6) {
            alert("This time slot is blocked.");
            event.cancel = true;
        }
    });
});
</script>

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts