jQuery UI Widgets Forums Scheduler Appointment Color

This topic contains 10 replies, has 5 voices, and was last updated by  Hristo 5 years, 7 months ago.

Viewing 11 posts - 1 through 11 (of 11 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

    Appointment Color #104035

    chrisabo
    Participant

    Hi,
    When using the background color the labels doesn’t correspond anymore with the appointment.

    I have 10 calendars, from 1 to 10. There is not always data for each calendar in a view. How can I accomplish that the color for each calendar and the corresponding label is always the same? This is a standard functionality in most calendars. You can define a color for each calendar, or resource, and it is always used.
    An example of this is Google Calendar. Once you have chosen a color for a calendar, it remains always the same.

    It’s annoying for a user to have his calendar in red in one view, and in green in another view. I don’t load all the appointments all the time, so in some views there is only data for 6 calendars, in another view there are 8, and so on.

    I hope you understand the problem?

    Best regards,
    Chris Andries

    Appointment Color #104057

    Hristo
    Participant

    Hello Chris Andries,

    I am not sure I understand you well.
    Could you clarify it?
    You could use the “background” filed of the appointmentDataFields object to define one color for the appointment that you want to have a specific color.
    As in the example above which demonstrates exactly how to set specific color for an appointment.
    Also, what you mean with “10 calendars” do you mean that you have “10 jqxSchedulers?
    I look forward to hearing from you.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Appointment Color #104069

    chrisabo
    Participant

    Hi,

    With the background color, i can use the colors I want, but I’m not able to use the LEGEND in the same color.

    I have one sheduler, and I want to show the appointments of 5 people. I load the data week by week. In the first week I have appointments for person 1,2 and 5. They will get a color, and in the legend I have the same color. Now I go the the following week, and I have data for person 1,2,3,5. The color for person 5 will change. So in each view the appointments for the same person the color changes. This way the sheduler can’t be used in a production environment, my users will never accept this.
    If you use Google Calendar and you have color for the agenda of 1 user, this remains always the same. This is a normal behaviour and should be default.

    The use of a color scheme is maybe a good idea, but if you can’t define a color for each calendar of a person, or for a room as in the samples, you can never use it in production. This continu change of colors won’t be accepted by users of the system. It’s a bad user experience this way.

    Best regards,
    Chris Andries

    Appointment Color #104082

    Hristo
    Participant

    Hello Chris Andries,

    I got your point of view now after I reproduce your scenario.
    Thank you for this feedback.
    I created a work item for this case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Appointment Color #104109

    Hristo
    Participant

    Hello Chris Andries,

    After I discuss this with my colleagues I would like to suggest you look at the right approach to achieve that:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>
            jqxScheduler Add Appointment
        </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/jqxdata.export.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: "Person 1 - Room 1",
                    calendar: "Room 1",
                    start: new Date(2017, 10, 23, 9, 0, 0),
                    end: new Date(2017, 10, 23, 16, 0, 0)
                }
                var appointment2 = {
                    id: "id2",
                    description: "",
                    location: "",
                    subject: "Person 2 - Room 2",
                    calendar: "Room 2",
                    start: new Date(2017, 10, 24, 10, 0, 0),
                    end: new Date(2017, 10, 24, 15, 0, 0)
                }
                var appointment3 = {
                    id: "id3",
                    description: "",
                    location: "",
                    subject: "Person 3 - Room 3",
                    calendar: "Room 3",
                    start: new Date(2017, 10, 24, 15, 0, 0),
                    end: new Date(2017, 10, 24, 17, 0, 0)
                }
                var appointment4 = {
                    id: "id4",
                    description: "",
                    location: "",
                    subject: "Person 4 - Room 4",
                    calendar: "Room 4",
                    start: new Date(2017, 10, 23, 16, 0, 0),
                    end: new Date(2017, 10, 23, 18, 0, 0)
                }
    
                // 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(2017, 11, 23),
                    width: 750,
                    height: 600,
                    source: adapter,
                    view: 'weekView',
                    showLegend: true,
                    ready: function ()
                    {
                        $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id6');
                    },
                    resources:
                    {
                        colorScheme: "scheme05",
                        dataField: "calendar",
                        source: new $.jqx.dataAdapter(
                         {
                             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: [
                                 { calendar: 'Room 1' },
                                 { calendar: 'Room 2' },
                                 { calendar: 'Room 3' },
                                 { calendar: 'Room 4' }
                             ]
                         })
                    },
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "location",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    views:
                    [
                      'dayView',
                      'weekView',
                      'monthView'
                    ]
                });
    
                $("#scheduler").jqxScheduler('scrollTop', 500);
                $('#person1, #person2, #person3, #person4').jqxButton();
    
                $('#person1').click(() =>
                {
                    $('#scheduler').jqxScheduler('addAppointment', appointment1);
                });
    
                $('#person2').click(() =>
                {
                    $('#scheduler').jqxScheduler('addAppointment', appointment2);
                });
    
                $('#person3').click(() =>
                {
                    $('#scheduler').jqxScheduler('addAppointment', appointment3);
                });
    
                $('#person4').click(() =>
                {
                    $('#scheduler').jqxScheduler('addAppointment', appointment4);
                });
            });
        </script>
    </head>
    <body>
        <button id="person1">person1</button>
        <button id="person2">person2</button>
        <button id="person3">person3</button>
        <button id="person4">person4</button>
        <br><br><div id="scheduler"></div>
    </body>
    </html>
    

    I am sorry. that was my fault.
    Thank you for your understanding.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Appointment Color #104425

    chrisabo
    Participant

    Hi,

    I’m afraid this is not a solution. If you open the sheduler on a week where there are no appointments for person2, the color of person3 and person4 will change.

    The goal is that every person has always the same color in the sheduler.

    I accomplished it by creating hidden appointments for every person, each time in the same order, but this is a ‘dirty’ workaround for something that should be possible by default.

    Best Regards,
    Chris Andries

    Appointment Color #104469

    Hristo
    Participant

    Hello Chris Andries,

    This appropriate approach to create default values for “Rooms” that you want to have.
    On the other side, the common case uses the DataAdapter for the jqxScheduler’s resources and it depends on the initial records (appointments).
    You do not need to worry about this.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.