jQuery UI Widgets Forums Scheduler jqxScheduler Weekdays and Today Highlight on timelineMonthView

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

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

  • tassilo-k
    Participant

    Hey Guys

    how can i add the weekdays to the date column header and higlight the date of today? It’s for a better orientation.

    $(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)
                }
                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)
                }
                var appointment3 = {
                    id: "id3",
                    description: "",
                    location: "",
                    subject: "Course Social Media",
                    calendar: "Room 1",
                    start: new Date(2017, 10, 27, 11, 0, 0),
                    end: new Date(2017, 10, 27, 13, 0, 0)
                }
                var appointment4 = {
                    id: "id4",
                    description: "",
                    location: "",
                    subject: "New Projects Planning",
                    calendar: "Room 2",
                    start: new Date(2017, 10, 23, 0, 0, 0),
                    end: new Date(2017, 10, 25, 23, 59, 59)
                }
                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)
                }
                var appointment6 = {
                    id: "id6",
                    description: "",
                    location: "",
                    subject: "Interview with Nancy",
                    calendar: "Room 3",
                    start: new Date(2017, 10, 26, 14, 0, 0),
                    end: new Date(2017, 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(2017, 11, 23),
                    width: 800,
                    height: 600,
                    dayNameFormat: "abbr",
                    source: adapter,
                    showLegend: true,
                    ready: function () {
                        $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
                    },
                    resources:
                    {
                        colorScheme: "scheme04",
                        dataField: "calendar",
                        orientation: "vertical",
                        source:  new $.jqx.dataAdapter(source)
                    },
                    appointmentDataFields:
                    {
                        from: "start",
                        to: "end",
                        id: "id",
                        description: "description",
                        location: "place",
                        subject: "subject",
                        resourceId: "calendar"
                    },
                    view: 'timelineMonthView',
                    views:
                    [
                        { type: 'timelineMonthView', appointmentHeight: 30 }
                    ]
                });
            });

    Hristo
    Participant

    Hello tassilo-k,

    Could you clarify it what you mean by this “weekdays to the date column header”?
    Because they exist by default and they are separated with a different style.
    About the ‘today’ I would like to suggest you look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    tassilo-k
    Participant

    This is was i mean in red.

    • This reply was modified 5 years, 6 months ago by  tassilo-k.

    Hristo
    Participant

    Hello tassilo-k,

    Thank you for the clarification.
    There is no such feature to override the columns names.
    About the mentioned issue I would like to suggest you try to use this workaround:

    $('#scheduler').on('dateChange', function (event)
    {
    	$('#scheduler').jqxScheduler('refresh');
    });

    Thank you for this feedback.

    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.