Could use some help figuring out: Scheduler. Thanks!

[jovanovicParticipant]

How can I switch the view mode in jqxScheduler using buttons, like switching from week to day view with jQuery?

[adminKeymaster]

Hi,

You can use this:

<!-- Scheduler -->
<div id="scheduler"></div>

<!-- View Switch Buttons -->
<button id="dayViewBtn">Day View</button>
<button id="weekViewBtn">Week View</button>
<button id="monthViewBtn">Month View</button>

<script>
$(document).ready(function () {
    // Scheduler data source (example)
    var 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: [] // your appointments here
    };
    var adapter = new $.jqx.dataAdapter(source);

    // Initialize scheduler
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2025, 7, 13),
        width: 850,
        height: 600,
        source: adapter,
        view: 'weekView', // default view
        showLegend: true,
        ready: function () {
            $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources: {
            colorScheme: "scheme05",
            dataField: "calendar",
            source: new $.jqx.dataAdapter(source)
        },
        appointmentDataFields: {
            from: "start",
            to: "end",
            id: "id",
            description: "description",
            location: "location",
            subject: "subject",
            resourceId: "calendar"
        },
        views: [
            'dayView',
            'weekView',
            'monthView'
        ]
    });

    // Switch views on button click
    $("#dayViewBtn").on('click', function () {
        $("#scheduler").jqxScheduler('view', 'dayView');
    });

    $("#weekViewBtn").on('click', function () {
        $("#scheduler").jqxScheduler('view', 'weekView');
    });

    $("#monthViewBtn").on('click', function () {
        $("#scheduler").jqxScheduler('view', 'monthView');
    });
});
</script>

Best regards,
Peter Stoev

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

[Author]

Posts