jQuery UI Widgets Forums Scheduler Sheduler Click Date??

This topic contains 4 replies, has 4 voices, and was last updated by  Peter Stoev 6 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Sheduler Click Date?? #79363

    jhlee
    Participant

    hi,

    Click a cell in the scheduled event occurs
    I would like to know the date of the click

    Sheduler Click Date?? #79365

    Dimitar
    Participant

    Hi jhlee,

    Please refer to the following example. We hope it is helpful to you:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdate.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscheduler.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscheduler.api.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var appointments = new Array();
    
                var appointment1 = {
                    id: "id1",
                    description: "George brings projector for presentations.",
                    location: "",
                    subject: "Quarterly Project Review Meeting",
                    calendar: "Room 1",
                    start: new Date(2015, 10, 23, 9, 0, 0),
                    end: new Date(2015, 10, 23, 16, 0, 0)
                }
    
                var appointment2 = {
                    id: "id2",
                    description: "",
                    location: "",
                    subject: "IT Group Mtg.",
                    calendar: "Room 2",
                    start: new Date(2015, 10, 24, 10, 0, 0),
                    end: new Date(2015, 10, 24, 15, 0, 0)
                }
    
                var appointment3 = {
                    id: "id3",
                    description: "",
                    location: "",
                    subject: "Course Social Media",
                    calendar: "Room 3",
                    start: new Date(2015, 10, 27, 11, 0, 0),
                    end: new Date(2015, 10, 27, 13, 0, 0)
                }
    
                var appointment4 = {
                    id: "id4",
                    description: "",
                    location: "",
                    subject: "New Projects Planning",
                    calendar: "Room 2",
                    start: new Date(2015, 10, 23, 16, 0, 0),
                    end: new Date(2015, 10, 23, 18, 0, 0)
                }
    
                var appointment5 = {
                    id: "id5",
                    description: "",
                    location: "",
                    subject: "Interview with James",
                    calendar: "Room 1",
                    start: new Date(2015, 10, 25, 15, 0, 0),
                    end: new Date(2015, 10, 25, 17, 0, 0)
                }
    
                var appointment6 = {
                    id: "id6",
                    description: "",
                    location: "",
                    subject: "Interview with Nancy",
                    calendar: "Room 4",
                    start: new Date(2015, 10, 26, 14, 0, 0),
                    end: new Date(2015, 10, 26, 16, 0, 0)
                }
                appointments.push(appointment1);
                appointments.push(appointment2);
                appointments.push(appointment3);
                appointments.push(appointment4);
                appointments.push(appointment5);
                appointments.push(appointment6);
    
                // prepare the data
                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: appointments
                };
                var adapter = new $.jqx.dataAdapter(source);
                $("#scheduler").jqxScheduler({
                    date: new $.jqx.date(2015, 11, 23),
                    width: 850,
                    height: 600,
                    source: adapter,
                    view: 'weekView',
                    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: "place",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    views:
                    [
                        'dayView',
                        'weekView',
                        'monthView'
                    ]
                });
    
                $("#scheduler").on('cellClick', function (event) {
                    var args = event.args,
                        cell = args.cell,
                        dateObject = new $.jqx.date($(cell).attr('data-date')).toDate();
                    $('#log').text('Clicked date: ' + dateObject);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="scheduler">
        </div>
        <br />
        <div id="log">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Sheduler Click Date?? #79435

    jhlee
    Participant

    hi,
    thank you!!!

    very good~~

    Sheduler Click Date?? #96638

    infinitel
    Participant

    Is that still working on ver5.1.0? I have tried that example and it doesn’t work or I haven’t been able to

    Sheduler Click Date?? #96640

    Peter Stoev
    Keymaster

    Yes, it is still working. I tried it with the API sample.

    Full code below:

    $(document).ready(function () {
        var appointments = new Array();
    
        var appointment1 = {
            id: "id1",
            description: "George brings projector for presentations.",
            location: "",
            subject: "Quarterly Project Review Meeting",
            calendar: "Room 1",
            start: new Date(2015, 10, 23, 9, 0, 0),
            end: new Date(2015, 10, 23, 16, 0, 0)
        }
    
        var appointment2 = {
            id: "id2",
            description: "",
            location: "",
            subject: "IT Group Mtg.",
            calendar: "Room 2",
            start: new Date(2015, 10, 24, 10, 0, 0),
            end: new Date(2015, 10, 24, 15, 0, 0)
        }
    
        var appointment3 = {
            id: "id3",
            description: "",
            location: "",
            subject: "Course Social Media",
            calendar: "Room 3",
            start: new Date(2015, 10, 27, 11, 0, 0),
            end: new Date(2015, 10, 27, 13, 0, 0)
        }
    
        var appointment4 = {
            id: "id4",
            description: "",
            location: "",
            subject: "New Projects Planning",
            calendar: "Room 2",
            start: new Date(2015, 10, 23, 16, 0, 0),
            end: new Date(2015, 10, 23, 18, 0, 0)
        }
    
        var appointment5 = {
            id: "id5",
            description: "",
            location: "",
            subject: "Interview with James",
            calendar: "Room 1",
            start: new Date(2015, 10, 25, 15, 0, 0),
            end: new Date(2015, 10, 25, 17, 0, 0)
        }
    
        var appointment6 = {
            id: "id6",
            description: "",
            location: "",
            subject: "Interview with Nancy",
            calendar: "Room 4",
            start: new Date(2015, 10, 26, 14, 0, 0),
            end: new Date(2015, 10, 26, 16, 0, 0)
        }
        appointments.push(appointment1);
        appointments.push(appointment2);
        appointments.push(appointment3);
        appointments.push(appointment4);
        appointments.push(appointment5);
        appointments.push(appointment6);
    
        // prepare the data
        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: appointments
        };
        var adapter = new $.jqx.dataAdapter(source);
        $("#scheduler").on('bindingComplete', function (event) {
            var args = event.args;
            console.log("bindingComplete is raised");
        });
    
        $("#scheduler").jqxScheduler({
            date: new $.jqx.date(2015, 11, 23),
            width: 850,
            height: 600,
            source: adapter,
            showLegend: false,
            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: "place",
                subject: "subject",
                resourceId: "calendar"
            },
            view: 'weekView',
            views:
            [
                'dayView',
                'weekView',
                'monthView'
            ]
        });
                $("#scheduler").on('appointmentDelete', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    console.log("appointmentDelete is raised");
                });
    
                $("#scheduler").on('appointmentAdd', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    console.log("appointmentAdd is raised");
                });
    
                $("#scheduler").on('appointmentDoubleClick', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    // appointment fields
                    // originalData - the bound data.
                    // from - jqxDate object which returns when appointment starts.
                    // to - jqxDate objet which returns when appointment ends.
                    // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                    // resourceId - String which returns the appointment's resouzeId
                    // hidden - Boolean which returns whether the appointment is visible.
                    // allDay - Boolean which returns whether the appointment is allDay Appointment.
                    // resiable - Boolean which returns whether the appointment is resiable Appointment.
                    // draggable - Boolean which returns whether the appointment is resiable Appointment.
                    // id - String or Number which returns the appointment's ID.
                    // subject - String which returns the appointment's subject.
                    // location - String which returns the appointment's location.
                    // description - String which returns the appointment's description.
                    // tooltip - String which returns the appointment's tooltip.
    
                    $("#log").html("appointmentDoubleClick is raised");
                });
    
                $("#scheduler").on('cellClick', function (event) {
                    var args = event.args;
                    var cell = args.cell;
                   var  dateObject = new $.jqx.date($(cell).attr('data-date')).toDate();
                    console.log(dateObject);
                });
    
                $("#scheduler").on('cellDoubleClick', function (event) {
                    var args = event.args;
                    var cell = args.cell;
                   
                    console.log("cellDoubleClick is raised");
                });
                
                $("#scheduler").on('contextMenuOpen', function (event) {
                    var args = event.args;
                    var menu = args.menu;
                    var appointment = args.appointment;
                   
                    console.log("contextMenuOpen is raised");
                });
                
                $("#scheduler").on('contextMenuClose', function (event) {
                    var args = event.args;
                    var menu = args.menu;
                    var appointment = args.appointment;
                   
                    console.log("contextMenuClose is raised");
                });
                
                $("#scheduler").on('contextMenuItemClick', function (event) {
                    var args = event.args;
                    var menu = args.menu;
                    var appointment = args.appointment;
                    var item = args.item;
                   
                    console.log("contextMenuItemClick is raised");
                });
                
                $("#scheduler").on('viewChange', function (event) {
                    var args = event.args;
                    var from = args.from;
                    var to = args.to;
                    var date = args.date;
                    console.log("viewChange is raised");
                });
        
                $("#scheduler").on('dateChange', function (event) {
                    var args = event.args;
                    var from = args.from;
                    var to = args.to;
                    var date = args.date;
                    console.log("dateChange is raised");
                });
                
                $("#scheduler").on('contextMenuCreate', function (event) {
                    var args = event.args;
                    var menu = args.menu;
                    var appointment = args.appointment;
                    var item = args.item;
                   
                    console.log("contextMenuCreate is raised");
                });
                
                $("#scheduler").on('editRecurrenceDialogOpen', function (event) {
                    var args = event.args;
                    var dialog = args.dialog;
                    var appointment = args.appointment;
                   
                    console.log("editRecurrenceDialogOpen is raised");
                });
                
                $("#scheduler").on('editRecurrenceDialogClose', function (event) {
                    var args = event.args;
                    var dialog = args.dialog;
                    var appointment = args.appointment;
                   
                    console.log("editRecurrenceDialogClose is raised");
                });
                
               $("#scheduler").on('editDialogCreate', function (event) {
                    var args = event.args;
                    var dialog = args.dialog;
                    var appointment = args.appointment;
                    var fields = args.fields;
                    
                    console.log("editDialogCreate is raised");
                });
                
                $("#scheduler").on('editDialogOpen', function (event) {
                    var args = event.args;
                    var dialog = args.dialog;
                    var appointment = args.appointment;
                    var fields = args.fields;
                    
                    console.log("editDialogOpen is raised");
                });
                
               $("#scheduler").on('editDialogClose', function (event) {
                    var args = event.args;
                    var dialog = args.dialog;
                    var appointment = args.appointment;
                    var fields = args.fields;
                    
                    console.log("editDialogClose is raised");
                });
                
                
                $("#scheduler").on('appointmentChange', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    // appointment fields
                    // originalData - the bound data.
                    // from - jqxDate object which returns when appointment starts.
                    // to - jqxDate objet which returns when appointment ends.
                    // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                    // resourceId - String which returns the appointment's resouzeId
                    // hidden - Boolean which returns whether the appointment is visible.
                    // allDay - Boolean which returns whether the appointment is allDay Appointment.
                    // resiable - Boolean which returns whether the appointment is resiable Appointment.
                    // draggable - Boolean which returns whether the appointment is resiable Appointment.
                    // id - String or Number which returns the appointment's ID.
                    // subject - String which returns the appointment's subject.
                    // location - String which returns the appointment's location.
                    // description - String which returns the appointment's description.
                    // tooltip - String which returns the appointment's tooltip.
    
                    console.log("appointmentChange is raised");
                });    
                
                    $("#scheduler").on('appointmentClick', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    // appointment fields
                    // originalData - the bound data.
                    // from - jqxDate object which returns when appointment starts.
                    // to - jqxDate objet which returns when appointment ends.
                    // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                    // resourceId - String which returns the appointment's resouzeId
                    // hidden - Boolean which returns whether the appointment is visible.
                    // allDay - Boolean which returns whether the appointment is allDay Appointment.
                    // resiable - Boolean which returns whether the appointment is resiable Appointment.
                    // draggable - Boolean which returns whether the appointment is resiable Appointment.
                    // id - String or Number which returns the appointment's ID.
                    // subject - String which returns the appointment's subject.
                    // location - String which returns the appointment's location.
                    // description - String which returns the appointment's description.
                    // tooltip - String which returns the appointment's tooltip.
    
                    console.log("appointmentClick is raised");
                });    
                
                    $("#scheduler").on('appointmentDoubleClick', function (event) {
                    var args = event.args;
                    var appointment = args.appointment;
                    // appointment fields
                    // originalData - the bound data.
                    // from - jqxDate object which returns when appointment starts.
                    // to - jqxDate objet which returns when appointment ends.
                    // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                    // resourceId - String which returns the appointment's resouzeId
                    // hidden - Boolean which returns whether the appointment is visible.
                    // allDay - Boolean which returns whether the appointment is allDay Appointment.
                    // resiable - Boolean which returns whether the appointment is resiable Appointment.
                    // draggable - Boolean which returns whether the appointment is resiable Appointment.
                    // id - String or Number which returns the appointment's ID.
                    // subject - String which returns the appointment's subject.
                    // location - String which returns the appointment's location.
                    // description - String which returns the appointment's description.
                    // tooltip - String which returns the appointment's tooltip.
    
                    console.log("appointmentDoubleClick is raised");
                });    
    });
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.