Calendar day view with lanes and week view js errror

[michalg]

Hi,

I would like to have a calendar with both day and week view:

calendar.setShowDayView(true);
calendar.setShowWeekView(true);
calendar.setShowMonthView(false);


This is working fine, but I would also like to have lanes in day view, so:

calendar.setShowDayLanes(true);

And got this js error:

15:22:34.226:WARN:Log:TypeError: Cannot read property 'getTime' of null
Stack from error.stack:
    cons.getDateTopOffset(<no args: exited>) on [WeekSchedule ID:isc_Calendar_0_weekView] @ CalendarView.js:4155:33
    cons.getSnapData(<no args: exited>) on [WeekSchedule ID:isc_Calendar_0_weekView] @ CalendarView.js:2715:32
    cons.tagDataForOverlap(<no args: exited>) on [WeekSchedule ID:isc_Calendar_0_weekView] @ CalendarView.js:2820:46
    cons.refreshEvents(<no args: exited>) on [WeekSchedule ID:isc_Calendar_0_weekView] @ CalendarView.js:3652:14
    cons.draw(<no args: exited>) on [WeekSchedule ID:isc_Calendar_0_weekView] @ CalendarView.js:4280:18
    cons.layoutChildren(<no args: exited>) on [PaneContainer ID:isc_Calendar_0_mainView_paneContainer] @ Layout.js:2592:20
    cons.drawChildren(<no args: exited>) on [PaneContainer ID:isc_Calendar_0_mainView_paneContainer] @ Layout.js:1381:11
    cons.draw(<no args: exited>) on [PaneContainer ID:isc_Calendar_0_mainView_paneContainer] @ Canvas.js:5187:14
    cons.drawChildren(<no args: exited>) on [TabSet ID:isc_Calendar_0_mainView] @ Canvas.js:6165:37
    cons.draw(<no args: exited>) on [TabSet ID:isc_Calendar_0_mainView] @ Canvas.js:5187:14
    cons.invokeSuper(<no args: exited>) on [TabSet ID:isc_Calendar_0_mainView] @ Class.js:1622:40
    cons.draw(<no args: exited>) on [TabSet ID:isc_Calendar_0_mainView] @ TabSet.js:2033:10
    cons.layoutChildren(<no args: exited>) on [HLayout ID:isc_HLayout_0] @ Layout.js:2592:20
    cons.drawChildren(<no args: exited>) on [HLayout ID:isc_HLayout_0] @ Layout.js:1381:11
    cons.draw(<no args: exited>) on [HLayout ID:isc_HLayout_0] @ Canvas.js:5187:14
    cons.drawChildren(<no args: exited>) on [Calendar ID:isc_Calendar_0] @ Canvas.js:6165:37
    cons.draw(<no args: exited>) on [Calendar ID:isc_Calendar_0] @ Canvas.js:5187:14
    cons.invokeSuper(<no args: exited>) on [Calendar ID:isc_Calendar_0] @ Class.js:1622:40
    cons.draw(<no args: exited>) on [Calendar ID:isc_Calendar_0] @ Calendar.js:5960:10
    Ghh_g$.rye_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:35259:13
    wPm_g$.xPm_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:205864:17
    wPm_g$.yPm_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:205868:8
    Array.HFc_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:14311:27
    initializeModules_0_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:28:30
    qL_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:4414:28
    tL_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:4484:14
    <anonymous>(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:4450:14
    _Ec_g$(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:41:40
    <anonymous>(<no args: exited>) @ 8A4693DFB016126B1C2DFCE4AD45ED74.cache.js:205886:46

Complete test case:

package pl.com.tech4.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.calendar.Calendar;
import com.smartgwt.client.widgets.calendar.Lane;
import java.util.Date;

public class MainEntryPoint implements EntryPoint {

    public void onModuleLoad() {

        layout();
        SC.showConsole();
    }

    private void layout() {

        Calendar calendar = new Calendar();
        calendar.setStartDateField("startTime");
        calendar.setEndDateField("endTime");
        calendar.setShowDayView(true);
        calendar.setShowDayLanes(true);
        calendar.setShowWeekView(true);
        calendar.setShowMonthView(false);
        calendar.setShowWorkday(true);

        Lane[] lanes = new Lane[1];
        lanes[0] = new Lane("lane1", "Lane 1");

        Record[] data = new Record[1];
        data[0] = new Record();
        data[0].setAttribute("name", "test");
        data[0].setAttribute("title", "Test");
        data[0].setAttribute("lane", "lane1");
        Date today = new Date();
        today.setMinutes(0);
        Date hourLater = new Date();
        hourLater.setHours(today.getHours() + 1);
        hourLater.setMinutes(0);
        data[0].setAttribute("startTime", today);
        data[0].setAttribute("endTime", hourLater);

        calendar.setLanes(lanes);
        calendar.setData(data);

        calendar.draw();
    }

}

MichalG

SmartClient Version: SNAPSHOT_v12.1d_2019-05-13/LGPL Development Only (built 2019-05-13)

ps. Hope to get some other hint than "not supported" :-)

[Isomorphic]

We've made a couple of changes here and you shouldn't see any further crashes in this circumstance - you can test out the changes in builds dated May 17 and later.

We also fixed a bug around multi-day events - it remains the case, however, that multi-day events are not supported, and may behave unpredictably, in vertical CalendarViews.

You could consider using a Timeline if you need better support for multi-day events.

[michalg]

OK, thanks - no crashes with build dated 17 May.
There is a side effect though. Events do not overlap if current view is not for today. Please, run the following example and go back to 16 of May view. There are two events for that date and they should overlap but they don't.

package pl.com.tech4.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.calendar.Calendar;
import com.smartgwt.client.widgets.calendar.Lane;
import java.util.Date;

public class MainEntryPoint implements EntryPoint {

    public void onModuleLoad() {

        layout();
        SC.showConsole();
    }

    private void layout() {

        Calendar calendar = new Calendar();
        calendar.setStartDateField("startTime");
        calendar.setEndDateField("endTime");
        calendar.setShowDayView(true);
        calendar.setShowDayLanes(true);
        calendar.setShowWeekView(false);
        calendar.setShowMonthView(false);
        calendar.setShowWorkday(true);

        Lane[] lanes = new Lane[1];
        lanes[0] = new Lane("lane1", "Lane 1");

        Record[] data = new Record[2];

        data[0] = new Record();
        data[0].setAttribute("name", "test");
        data[0].setAttribute("title", "Test");
        data[0].setAttribute("lane", "lane1");
        Date day = new Date();
        day.setMinutes(0);
        day.setDate(16);
        Date hourLater = new Date();
        hourLater.setHours(day.getHours() + 2);
        hourLater.setMinutes(0);
        hourLater.setDate(16);
        data[0].setAttribute("startTime", day);
        data[0].setAttribute("endTime", hourLater);

        data[1] = new Record();
        data[1].setAttribute("name", "test2");
        data[1].setAttribute("title", "Test2");
        data[1].setAttribute("lane", "lane1");
        Date otherDay = new Date();
        otherDay.setMinutes(0);
        otherDay.setDate(16);
        otherDay.setHours(day.getHours() + 2);
        Date hour2Later = new Date();
        hour2Later.setHours(day.getHours() + 3);
        hour2Later.setMinutes(0);
        hour2Later.setDate(16);
        data[1].setAttribute("startTime", otherDay);
        data[1].setAttribute("endTime", hour2Later);

        calendar.setLanes(lanes);
        calendar.setData(data);

        calendar.draw();
    }

}

[Isomorphic]

We've made a change to address this for builds of 12.1 dated May 22 and later.

Note that an event which, in this case, starts at 3pm and ends at 5pm would not be expected to overlap another event that starts at 5pm.

[michalg]

Thanks for correction of event overlapping issue. It is fixed in the latest (12.1 May 22) build.

However I just found a small regression in calendar timeline view: using setHeaderLevels() triggers exception:

TypeError: Cannot read property 'duplicate' of undefined

in CalendarView.js:

    getHeaderSpans : function (startDate, endDate, headerLevels, levelIndex, fields) {
        var date = startDate.duplicate(),
            c = this.calendar,
            headerLevel = headerLevels[levelIndex],
            unit = headerLevel.unit,
            lastUnit = levelIndex > 0 ? headerLevels[levelIndex-1].unit : unit,
            unitsPerColumn = c.timelineUnitsPerColumn,
            titles = headerLevel.titles || [],
            result = [],
            spanIndex = 0
        ;

        if (levelIndex > 0) {
            if (isc.DateUtil.compareTimeUnits(unit, lastUnit) > 0) {
                // the unit on this level is larger than on it's parent-level - warn
                isc.logWarn("The order of the specified HeaderLevels is incorrect - '" + unit +
                    "' is of a larger granularity than '" + lastUnit + "'");
            }
        }

        var DU = isc.DateUtil;

        var firstLoop = true;
        while (date <= endDate) {
            DU.dateAdd(date, "mn", 1, 1);
            if (firstLoop) {
                firstLoop = false;
                var newDate = isc.DateUtil.getEndOf(date.duplicate(), isc.DateUtil.getTimeUnitKey(unit), false, c.firstDayOfWeek);
            } else {
                var newDate = this.addUnits(date.duplicate(), unitsPerColumn, unit);
            }

            var span = { unit: unit,
                hoverDelay: this.hoverDelay+1,
                hoverMoveWithMouse: true,
                canHover: this.shouldShowHeaderHovers(),
                showHover: this.shouldShowHeaderHovers(),
                canFocus: false,
                headerLevel: headerLevel,
                mouseMove : function () {
                    var view = this.creator;
                    if (view.shouldShowHeaderHovers()) {
                        if (isc.Hover.lastHoverTarget != view) view.startHover();
                        else view.updateHover();
                        return isc.EH.STOP_BUBBLING;
                    }
                },
                getHoverHTML : function () {
                    var view = this.creator;
                    return view.calendar._getHeaderHoverHTML(view, this.headerLevel, this,
                        this.startDate, this.endDate
                    );
                }
            };
            span[c.startDateField] = date.duplicate();
            span[c.endDateField] = newDate.duplicate();

            this.setSpanDates(span, date.duplicate());

            newDate = span.endDate;

            var title = this.getHeaderLevelTitle(headerLevel, spanIndex, date, newDate);

            span.title = title;

            // this condition should be re-introduced once LG supports multiple-headers where
            // only the inner-most spans require a fields array
            //if (levelIndex == headerLevels.length-1) {
                span.fields = [];
                for (var i=0; i<fields.length; i++) {
                    var field = fields[i];
                    if (field.isLaneField || field.date < span[c.startDateField]) continue;
                    if (field.date >= span[c.endDateField]) break;
                    field.headerLevel = headerLevels[levelIndex];
                    span.fields.add(field.name);
                }
            //}

            if (levelIndex < headerLevels.length-1) {
                span.spans = this.getHeaderSpans(span[c.startDateField], span[c.endDateField],
                    headerLevels, levelIndex + 1, fields);
                if (span.spans && span.spans.length > 0) span.fields = null;
                if (headerLevel.titles && headerLevel.titles.length != span.spans.length) {
                    // fewer titles were supplied than we have spans - log a warning about it
                    // but don't bail because we'll auto-generate titles for any spans that
                    // don't have one in the supplied title-array
                    isc.logWarn("The titles array provided for the " + headerLevel.unit +
                        " levelHeader has a length mismatch: expected " + span.spans.length +
                        " but " + headerLevel.titles.length + " are present.  Some titles " +
                        " may be auto-generated according to TimeUnit."
                    );
                }
            }

            result.add(isc.clone(span));
            date = newDate.duplicate(); <---ex here
            spanIndex++;
        }

        return result;
    },

It is not logged in the DevConsole, but could be seen in the browser debugger.

Test case as follows:

package pl.com.tech4.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.TimeUnit;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.calendar.Calendar;
import com.smartgwt.client.widgets.calendar.HeaderLevel;
import com.smartgwt.client.widgets.calendar.Lane;
import com.smartgwt.client.widgets.calendar.Timeline;
import java.util.Date;

public class MainEntryPoint implements EntryPoint {

    public void onModuleLoad() {

        layout();
        SC.showConsole();
    }

    private void layout() {

        Timeline timeline = new Timeline();
        timeline.setStartDateField("startTime");
        timeline.setEndDateField("endTime");

        HeaderLevel[] headerLevels = new HeaderLevel[]{
            new HeaderLevel(TimeUnit.MONTH),
            new HeaderLevel(TimeUnit.WEEK),
            new HeaderLevel(TimeUnit.DAY)
        };
        timeline.setHeaderLevels(headerLevels);

        Lane[] lanes = new Lane[1];
        lanes[0] = new Lane("lane1", "Lane 1");

        Record[] data = new Record[2];

        data[0] = new Record();
        data[0].setAttribute("name", "test");
        data[0].setAttribute("title", "Test");
        data[0].setAttribute("lane", "lane1");
        Date day = new Date();
        day.setMinutes(0);
        day.setDate(16);
        Date hourLater = new Date();
        hourLater.setHours(day.getHours() + 2);
        hourLater.setMinutes(0);
        hourLater.setDate(16);
        data[0].setAttribute("startTime", day);
        data[0].setAttribute("endTime", hourLater);

        data[1] = new Record();
        data[1].setAttribute("name", "test2");
        data[1].setAttribute("title", "Test2");
        data[1].setAttribute("lane", "lane1");
        Date otherDay = new Date();
        otherDay.setMinutes(0);
        otherDay.setDate(16);
        otherDay.setHours(day.getHours() + 2);
        Date hour2Later = new Date();
        hour2Later.setHours(day.getHours() + 3);
        hour2Later.setMinutes(0);
        hour2Later.setDate(16);
        data[1].setAttribute("startTime", otherDay);
        data[1].setAttribute("endTime", hour2Later);

        timeline.setLanes(lanes);
        timeline.setData(data);

        timeline.draw();
    }

}

MichalG

SmartClient Version: SNAPSHOT_v12.1d_2019-05-22/LGPL Development Only (built 2019-05-22)

[Isomorphic]

We've addressed this regression for builds dated May 23 and later.

[michalg]

Looks like all is working now (23 May).
Thank you very much.
MichalG