jQuery UI Widgets Forums Scheduler Appointment Color

This topic contains 3 replies, has 4 voices, and was last updated by  Hristo 2 weeks, 3 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Appointment Color #80386

    Jacky
    Participant

    Hello, I have a question, how to confirm a appointment color, for example: i have 3 appointments, app1/app2/app3, how I can make app1 red, app2 blue, app3 green.
    thanks.

    Appointment Color #80413

    Dimitar
    Participant

    Hello Jacky,

    Here is an example that shows how to achieve your requirement:

    <!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),
                    background: '#FF0000'
                }
    
                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),
                    background: '#0000FF'
                }
    
                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),
                    background: '#00FF00'
                }
    
                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: 'background', type: 'string' }
                    ],
                    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",
                        background: 'background'
                    },
                    views:
                    [
                        'dayView',
                        'weekView',
                        'monthView'
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="scheduler">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Appointment Color #103595

    tassilo-k
    Participant

    Hey Dimitar,

    why this background option not work for timelineMonthView with vertical resources?

    Appointment Color #103787

    Hristo
    Participant

    Hello tassilo-k,

    I tested this example and it seems to work fine:

    <!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),
                    background: '#FF0000'
                }
    
                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),
                    background: '#0000FF'
                }
    
                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),
                    background: '#00FF00'
                }
    
                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: 'background', type: 'string' }
                    ],
                    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",
                        orientation: "vertical",
                        source: new $.jqx.dataAdapter(source)
                    },
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "place",
                        subject: "subject",
                        resourceId: "calendar",
                        background: 'background'
                    },
                    view: 'timelineMonthView',
                    views:
                    [
                        'dayView',
                        'weekView',
                        'monthView',
                        'timelineMonthView'
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="scheduler">
        </div>
    </body>
    </html>

    Could you clarify it?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.