jQWidgets Forums

jQuery UI Widgets › Forums › Scheduler › set allDay via adapter

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 6 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    set allDay via adapter Posts
  • November 28, 2018 at 11:31 am set allDay via adapter #102946

    JosBae
    Participant

    Hello,

    i’m trying to set the allDay attribute for an appointment via adapter, in order to display a custom tooltip.
    When I test the allDay value in renderAppointment function it’s always false.
    What am i doing wrong? Could you please help me?

    Thank you for your consideration.

    Here’s the code:

    $(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(2017, 10, 23, 9, 0, 0),
    end: new Date(2017, 10, 23, 16, 0, 0),
    allDay: “false”
    }
    var appointment2 = {
    id: “id2”,
    description: “”,
    location: “”,
    subject: “IT Group Mtg.”,
    calendar: “Room 2”,
    start: new Date(2017, 10, 24, 10, 0, 0),
    end: new Date(2017, 10, 24, 15, 0, 0),
    allDay: “false”
    }
    var appointment3 = {
    id: “id3”,
    description: “”,
    location: “”,
    subject: “Course Social Media”,
    calendar: “Room 3”,
    start: new Date(2017, 10, 21, 24, 0, 0),
    end: new Date(2017, 10, 22, 23, 59, 59),
    allDay: “true”
    }

    appointments.push(appointment1);
    appointments.push(appointment2);
    appointments.push(appointment3);
    // 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’ },
    { name: ‘allDay’, type: ‘boolean’}
    ],
    id: ‘id’,
    localData: appointments
    };

    var adapter = new $.jqx.dataAdapter(source);
    $(“#scheduler”).jqxScheduler({
    date: new $.jqx.date(2017, 11, 23),
    //width: getWidth(“Scheduler”),
    width: 1050,
    height: 600,
    source: adapter,
    view: ‘agendaView’,
    showLegend: true,
    localization: getLocalization(‘es’),
    editDialogDateTimeFormatString: “dd/MM/yyyy HH:mm”,
    editDialogDateFormatString: “dd/MM/yyyy”,
    appointmentTooltips: false,
    renderAppointment: function(data){

    console.log(data.appointment.id)
    console.log(data.appointment.resourceId)
    console.log(data.appointment.subject);
    console.log(data.appointment.allDay);
    console.log(data.appointment.jqxAppointment.isAllDayAppointment());

    tiempoFrom = null;
    tiempoTo = null;
    if(!data.appointment.jqxAppointment.isAllDayAppointment()){
    tiempoFrom = data.appointment.from.hour()+”:”;
    tiempoFrom += data.appointment.from.minute()<10?”0″+data.appointment.from.minute():data.appointment.from.minute();
    tiempoTo = data.appointment.to.hour()+”:”;
    tiempoTo+= data.appointment.to.minute()<10?”0″+data.appointment.to.minute():data.appointment.to.minute();
    }

    toolTip = data.appointment.subject+” (“;
    toolTip += data.appointment.jqxAppointment.isAllDayAppointment()?”Evento de todo el día”:tiempoFrom+” – “+tiempoTo;
    toolTip += “)”;

    html = “<div title='”+toolTip+”‘>”+data.appointment.subject+”</div>”;
    data.html = html;

    console.log(“————————“);
    return data;
    },

    November 29, 2018 at 11:05 am set allDay via adapter #102975

    Hristo
    Participant

    Hello JosBae,

    You should add ‘datafield’ for this case with value true – allDay: true for the appointment that you desire to set by default.
    We have a similar forum topic, please, take a look at this.
    Also, I would like to present you one example below:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxScheduler widget displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month views
    </title>
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.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" src="../../scripts/demos.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(2017, 10, 23, 9, 0, 0),
                end: new Date(2017, 10, 23, 16, 0, 0),
                allDay: false
            }

            var appointment2 = {
                id: "id2",
                description: "",
                location: "",
                subject: "IT Group Mtg.",
                calendar: "Room 2",
                start: new Date(2017, 10, 24, 10, 0, 0),
                end: new Date(2017, 10, 24, 15, 0, 0),
                allDay: false
            }

            var appointment3 = {
                id: "id3",
                description: "",
                location: "",
                subject: "Course Social Media",
                calendar: "Room 3",
                start: new Date(2017, 10, 27, 11, 0, 0),
                end: new Date(2017, 10, 27, 13, 0, 0),
                allDay: false
            }

            var appointment4 = {
                id: "id4",
                description: "",
                location: "",
                subject: "New Projects Planning",
                calendar: "Room 2",
                start: new Date(2017, 10, 23, 16, 0, 0),
                end: new Date(2017, 10, 23, 18, 0, 0),
                allDay: false
            }

            var appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2017, 10, 25, 15, 0, 0),
                end: new Date(2017, 10, 25, 17, 0, 0),
                allDay: true
            }

            var appointment6 = {
                id: "id6",
                description: "",
                location: "",
                subject: "Interview with Nancy",
                calendar: "Room 4",
                start: new Date(2017, 10, 26, 14, 0, 0),
                end: new Date(2017, 10, 26, 16, 0, 0),
                allDay: true
            }
            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' },
                    { name: 'allDay', type: 'boolean' }
                ],
                id: 'id',
                localData: appointments
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(2017, 11, 23),
                width: getWidth('Scheduler'),
                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: "location",
                    subject: "subject",
                    resourceId: "calendar",
                    allDay: 'allDay'
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="scheduler"></div>
</body>
</html>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.