columns’ width and timelineWeekview timeRuler.exactTime

[contreformeParticipant]

Hello, i am trying with no success to adapt the columns’ width in views – wether days’ width in weekView or hours/quarter/etc. in timelineWeekview). I’ve notice in the source that it seems fixed in timeline and adapted from scheduler width in other views… Any insight about this ?

Secondly i cannot seem to make use of the timeRuler.exactTime in timelineWeekView, is this a normal behaviour ?

Thanks for your help

Best
Sam

[Peter StoevKeymaster]

Hi Sam,

There is no property for setting the width of the columns in timeline views.
We don’t see an issue with exactTime rendering when it’s applied as shown in the demos.

Example:

$(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, 15, 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, 45, 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, 30, 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, 15, 0),
                end: new Date(2015, 10, 26, 18, 0, 0)
            }
            var appointment5 = {
                id: "id5",
                description: "",
                location: "",
                subject: "Interview with James",
                calendar: "Room 1",
                start: new Date(2015, 10, 25, 15, 45, 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, 30, 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,
                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"
                },
                view: 'timelineWeekView',
                views:
                [
                    {type: 'timelineDayView', appointmentsRenderMode: "exactTime"},
                    { type: 'timelineWeekView', appointmentsRenderMode: "exactTime" },
                    { type: 'timelineMonthView', appointmentsRenderMode: "exactTime" }
                ]
            });
        });

Appointments are rendered in the way they should be. You can check whether you’ve used the same code and not “timeRuler.exactTime” as you mentioned in your post which is incorrect.

Best Regards,
Peter Stoev

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

[contreformeParticipant]

Thanks a lot for your quick reply Peter,

you’re absolutely right, my bad, i misread the documentation and was sure the appointmentsRenderMode was a timeRuler attribute…

I wish the dev team would consider implementing a custom column width feature in a future version as this would be very helpful. I am testing jqxScheduler against some equivalent products to implement it in a event managing app and – though it is the best so far – when you have more than 5 events in parallel on a slot you cannot anymore use the week view, and when you switch to the timeline week view the display could definitely benefit from some squeezing (when you work on the quarter hour you just end up scrolling horizontally for ages with no clear overview of your week). IMHO the best option would be to be able to zoom in/out in timeline view.

Anyway, when buying the commercial licence does the JS comes unpacked so we could more easily implement custom behaviour such as this zoom in/out feature ?

thanks again for your help
Sam

[Peter StoevKeymaster]

Hi Sam,

Yes, it comes with the source code our team works with i.e non-minimized sources. Regarding the Scheduler, there would be a new property for setting the columns width in the new version. However, as far I as know, it would not be possible to be less than 20px or something like that.

Best Regards,
Peter Stoev

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

[contreformeParticipant]

Thanks again for your quick feedbacks Peter, i think we’ll have some more contact soon.

Best
Sam

[contreformeParticipant]

Hello,

i noticed something weird, here’s a working example :

$("#edition_schedule").jqxScheduler({
    date: new $.jqx.date('todayDate'),
    width: 700,
    height: 1140,
    source: new $.jqx.dataAdapter(schedules_src),
    appointmentDataFields:
    {
        from: "start",
        to: "end",
        id: "id",
        location: "venue",
        resourceId: "venue",
        subject: "label"
    },
    showLegend: true,
    theme: 'metrodark',
    toolbarHeight: 35,
    legendPosition: 'top',
    legendHeight: 40,
    rowsHeight:15,
    contextMenu: false,
    editDialog: false,
    resources: {
        dataField: 'venue',
        colorScheme: 'scheme07',
        source: new $.jqx.dataAdapter(venues_src)
    },
    views: [
        {
            type: 'timelineDayView',
            showWorkTime: false,
            columnWidth:10,
            timeRuler: {
                scale: 'tenMinutes',
                formatString: function(date) { return 'HH:mm'; }
            }
        }
    ],
    ready: function () {
        if(schedules.length > 0) $('#edition_schedule').jqxScheduler('ensureAppointmentVisible', schedules[0].id);
    }
});

But now try with :

type: 'timelineDayView',
showWorkTime: false,
columnWidth:20,
timeRuler: {
    scale: 'tenMinutes',
    formatString: function(date) { return 'HH:mm'; }
}

and everything stumble down : the main point being the columns headers being rightfully expanded but the columns width stick to 10px…

[Peter StoevKeymaster]

Hi contreforme,

There is no property: columnWidth in jqxScheduler so I would suggest you to remove it. This will resolve your case, too.

Best Regards,
Peter Stoev
jQWidgets Team
http://www.jqwidgets.com/

[contreformeParticipant]

I found this property while analyzing the source code : it is a property of views->view object not of jqxscheduler.
But anyway, my point was precisely that it does work as i intended when specifying 10px in this views’ object property.
Otherwise the overall scheduler width is way too wide for my use.

[Author]

Posts