Calendar Component: error Node does not exist: calendar.view.start

  • Goal: I am trying to build a list view where i have calendar components inside. On re-rendering of the list i get the error Node does not exist: calendar.view.start and i do not know how to fix it can someone help me with this please?

  • Details:

  1. I select in a filter a club. Based on that club a query is triggered

  2. I trigger a graphQL query that fetches playingFields for a club by passing the id of the club. On success i set the playingfields variable which contains an array of playingfield and his lessons filtered on the selected weekday


  3. i get this view which shows the lessons planned on each playing field

  4. When I clear the club filter and I set the playingFields variable to an empty array, i get the error
    Node does not exist: calendar.view.start and my components or not refreshed with the new data. This also happens when selecting a new club or when retriggering the graphQL query. Meaning i always get this error once the view component has been loaded one time

I think it is a bug inside the component when you use the calendar inside a list view. I have made an example which demonstrates the bug (see json below, i can not upload it as a separate file since i am a new user). In the example I call a rest api for the data. When you run it twice you can see the error in de debug console.

JSON:
{"uuid":"6046d648-532d-11ef-8373-7ff830853806","page":{"id":303749598,"data":{"appState":"["~#iR",["^ ","n","appTemplate","v",["^ ","isFetching",false,"plugins",["~#iOM",["listView1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","listView1","uuid","d3b04468-2137-4f78-92cf-3e14ce6d65a2","type","widget","subtype","ListViewWidget2","namespace",null,"resourceName",null,"resourceDisplayName",null,"template",["^3",["heightType","fixed","layoutType","list","hidden",false,"data","{{ getTodos.data }}","maxHeight","","margin","0","showInEditor",false,"padding","0","formDataKey","{{ self.id }}","itemWidth","500px","primaryKeyFieldNameOverride","","_primaryKeys","{{ item.id }}","numColumns",3,"instanceValues",null,"_type","grid","enableInstanceValues",false,"overflowType","scroll","_enabledInstances",null,"maintainSpaceWhenHidden",false,"direction","horizontal"]],"style",["^3",],"position2",["^0",["^ ","n","position2","v",["^ ","^5","grid","container","","rowGroup","body","subcontainer","","row",0,"col",0,"height",15.2,"width",12,"tabNum",0,"stackPosition",["^ ","ordinal",0,"widthType","fixed","^A",0,"^@",0]]]],"mobilePosition2",null,"mobileAppPosition",null,"tabIndex",null,"^=","","createdAt","~m1722864234089","updatedAt","~m1722865028538","folder","","screen",null]]],"$main",["^0",["^ ","n","pluginTemplate","v",["^ ","id","$main","^4",null,"^5","frame","^6","Frame","^7",null,"^8",null,"^9",null,"^:",["^3",["type","main","sticky",null,"padding","8px 12px","enableFullBleed",false,"isHiddenOnDesktop",false,"isHiddenOnMobile",false]],"^;",["^3",],"^<",null,"^F",null,"^G",null,"^H",null,"^=","","^I","~m1722864234099","^J","~m1722864234099","^K","","^L",null]]],"getTodos",["^0",["^ ","n","pluginTemplate","v",["^ ","id","getTodos","^4",null,"^5","datasource","^6","RESTQuery","^7",null,"^8","2f635113-7ac4-43ac-8e80-cf94c7b57253","^9","todos","^:",["^3",["queryRefreshTime","","paginationLimit","","allowedGroupIds",["~#iL",],"streamResponse",false,"body","","lastReceivedFromResourceAt",null,"queryDisabledMessage","","servedFromCache",false,"offlineUserQueryInputs","","successMessage","","queryDisabled","","playgroundQuerySaveId","latest","workflowParams",null,"resourceNameOverride","","runWhenModelUpdates",true,"paginationPaginationField","","headers","","workflowRunId",null,"showFailureToaster",true,"paginationEnabled",false,"query","todos","playgroundQueryUuid","","playgroundQueryId",null,"error",null,"workflowRunBodyType","raw","privateParams",["^M",],"workflowBlockUuid",null,"queryRunOnSelectorUpdate",false,"runWhenPageLoadsDelay","","data",null,"importedQueryInputs",["^3",],"isImported",false,"showSuccessToaster",true,"cacheKeyTtl","","requestSentTimestamp",null,"cookies","","metadata",null,"workflowActionType",null,"queryRunTime",null,"changesetObject","","errorTransformer","return data.error","finished",null,"confirmationMessage",null,"isFetching",false,"changeset","","rawData",null,"queryTriggerDelay","0","resourceTypeOverride",null,"watchedParams",["^M",],"enableErrorTransformer",false,"showLatestVersionUpdatedWarning",false,"paginationDataField","","timestamp",0,"importedQueryDefaults",["^3",],"enableTransformer",false,"showUpdateSetValueDynamicallyToggle",true,"version",2,"overrideOrgCacheForUserCache",false,"runWhenPageLoads",false,"transformer","return data","events",null,"isMultiplayerEdited",false,"queryTimeout","10000","workflowId",null,"requireConfirmation",false,"type","GET","queryFailureConditions","","changesetIsObject",false,"enableCaching",false,"allowedGroups",["^M",],"bodyType","none","offlineQueryType","None","queryThrottleTime","750","updateSetValueDynamically",false,"notificationDuration",""]],"^;",null,"^<",null,"^F",null,"^G",null,"^H",null,"^=","","^I","~m1722864795114","^J","~m1722866808584","^K","","^L",null]]],"calendar1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","calendar1","^4","c8c2d324-fe19-4919-b050-4d36a91eaea2","^5","widget","^6","CalendarWidget2","^7",null,"^8",null,"^9",null,"^:",["^3",["allDayByIndex",,"selectedInterval",["^ "],"endByIndex",,"_groupIdByIndex",["^M",["123","123","",""]],"groupIdByIndex",,"_allDayByIndex",["^M",["","",true,""]],"dayMaxEvents",2,"_titleByIndex",["^M",["Standup","Lunch","Offsite","Busy"]],"titleByIndex",,"timeFormat","","_eventIdByIndex",["^M",["Event1","Event2","Event3","Event4"]],"displayEventTime",true,"view",["^ ","start","","end",""],"eventIdByIndex",,"_format24HourTime",false,"hidden",false,"data",,"_createEventsEnabled",false,"margin","4px 8px","_changedEvents",,"displayWeekends",true,"showInEditor",false,"initialDate","","changeSet",["^ "],"_hasMigratedNestedItems",true,"itemMode","static","firstDayOfWeek",0,"_colorByIndex",["^M",["{{ theme.automatic[0] }}","{{ theme.automatic[1] }}","","{{ theme.automatic[2] }}"]],"listType","week","colorByIndex",,"_startByIndex",["^M",["{{ moment().hours(8).minutes(0).subtract(1, 'hour') }}","{{ moment().hours(12).minutes(0) }}","{{ moment().hours(0).add(1, 'days') }}","{{ moment().hours(7).minutes(0).add(1, 'days') }}"]],"_hoveredEventId","","events",["^3",],"_ids",["^M",["85d6c","0b13e","898f8","531bb"]],"startByIndex",,"displayAllDaySlot",true,"displayTimeZone","local","_selectedEventId","","eventMaxStack",0,"_deleteEventsEnabled",false,"hoveredEvent",["^ "],"selectedEvent",["^ "],"maintainSpaceWhenHidden",false,"_selectedInterval",["^ "],"_endByIndex",["^M",["{{ moment().hours(8).minutes(0) }}","{{ moment().hours(13).minutes(0) }}","{{ moment().hours(0).add(3, 'days') }}","{{ moment().hours(15).minutes(0).add(1, 'days') }}"]],"_editEventsEnabled",false,"viewType","day"]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^5","grid","^=","listView1","^>","body","^?","","row",0,"col",0,"^@",10,"^A",11,"^B",0,"^C",null]]],"^F",null,"^G",null,"^H",null,"^=","","^I","~m1722864867528","^J","~m1722864876523","^K","","^L",null]]]]],"^I",null,"version","3.76.0","appThemeId",null,"appThemeName",null,"appThemeModeId",null,"appMaxWidth","100%","preloadedAppJavaScript",null,"preloadedAppJSLinks",,"testEntities",,"tests",,"appStyles","","responsiveLayoutDisabled",false,"loadingIndicatorsDisabled",false,"urlFragmentDefinitions",["^M",],"pageLoadValueOverrides",["^M",],"customDocumentTitle","","customDocumentTitleEnabled",false,"customShortcuts",,"isGlobalWidget",false,"isMobileApp",false,"isFormApp",false,"shortlink",null,"multiScreenMobileApp",false,"mobileAppSettings",["^ ","mobileOfflineModeEnabled",false,"mobileOfflineModeDelaySync",false,"mobileOfflineModeBannerMode","default","displaySetting",["^ ","landscapeMode",false,"tabletMode",false]],"formAppSettings",["^ ","customRedirectUrl",""],"notificationsSettings",["^ ","globalQueryShowFailureToast",true,"globalQueryShowSuccessToast",true,"globalQueryToastDuration",4.5,"globalToastPosition","bottomRight"],"folders",["^M",],"pageCodeFolders",["^ ","getTodos",],"queryStatusVisibility",false,"markdownLinkBehavior","auto","inAppRetoolPillAppearance","NO_OVERRIDE","rootScreen",null,"instrumentationEnabled",false,"experimentalFeatures",["^ ","sourceControlTemplateDehydration",false,"multiplayerEditingEnabled",false,"disableMultiplayerEditing",false],"experimentalDataTabEnabled",true,"customComponentCollections",,"savePlatform","web","internationalizationSettings",["^ ","internationalizationEnabled",false,"internationalizationFiles",],"appTesting",null]]]"},"changesRecord":[{"type":"MIGRATIONS_UP_TO_DATE","payload":{"migratedAppTemplate":{"tests":,"folders":,"plugins":{"$main":{"id":"$main","type":"frame","uuid":null,"style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"main","sticky":null,"padding":"8px 12px","enableFullBleed":false,"isHiddenOnMobile":false,"isHiddenOnDesktop":false},"container":"","createdAt":"2024-08-05T13:23:54.099Z","namespace":null,"position2":null,"updatedAt":"2024-08-05T13:23:54.099Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"query1":{"id":"query1","type":"datasource","uuid":null,"style":null,"folder":"","screen":null,"subtype":"RESTQuery","tabIndex":null,"template":{"body":"","data":null,"type":"GET","error":null,"query":"","events":null,"cookies":"","headers":"","rawData":null,"version":2,"bodyType":"none","finished":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"workflowId":null,"cacheKeyTtl":"","transformer":"return data","queryRunTime":null,"queryTimeout":"10000","allowedGroups":,"enableCaching":false,"privateParams":,"queryDisabled":"","watchedParams":,"workflowRunId":null,"streamResponse":false,"successMessage":"","workflowParams":null,"allowedGroupIds":,"changesetObject":"","paginationLimit":"","servedFromCache":false,"errorTransformer":"return data.error","offlineQueryType":"None","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":true,"paginationEnabled":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","workflowBlockUuid":null,"showFailureToaster":true,"showSuccessToaster":true,"workflowActionType":null,"confirmationMessage":null,"importedQueryInputs":{},"paginationDataField":"","playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"workflowRunBodyType":"raw","notificationDuration":"","queryDisabledMessage":"","requestSentTimestamp":null,"resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"offlineUserQueryInputs":"","queryFailureConditions":"","queryRunOnSelectorUpdate":false,"paginationPaginationField":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"overrideOrgCacheForUserCache":false,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2024-08-05T13:23:15.701Z","namespace":null,"position2":null,"updatedAt":"2024-08-05T13:26:32.066Z","resourceName":"27f7c17a-356e-4a22-8765-579b68d6f184","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"getTodos":{"id":"getTodos","type":"datasource","uuid":null,"style":null,"folder":"","screen":null,"subtype":"RESTQuery","tabIndex":null,"template":{"body":"","data":null,"type":"GET","error":null,"query":"todos","events":null,"cookies":"","headers":"","rawData":null,"version":2,"bodyType":"none","finished":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"workflowId":null,"cacheKeyTtl":"","transformer":"return data","queryRunTime":null,"queryTimeout":"10000","allowedGroups":,"enableCaching":false,"privateParams":,"queryDisabled":"","watchedParams":,"workflowRunId":null,"streamResponse":false,"successMessage":"","workflowParams":null,"allowedGroupIds":,"changesetObject":"","paginationLimit":"","servedFromCache":false,"errorTransformer":"return data.error","offlineQueryType":"None","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"paginationEnabled":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","workflowBlockUuid":null,"showFailureToaster":true,"showSuccessToaster":true,"workflowActionType":null,"confirmationMessage":null,"importedQueryInputs":{},"isMultiplayerEdited":false,"paginationDataField":"","playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"workflowRunBodyType":"raw","notificationDuration":"","queryDisabledMessage":"","requestSentTimestamp":null,"resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"offlineUserQueryInputs":"","queryFailureConditions":"","queryRunOnSelectorUpdate":false,"paginationPaginationField":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"overrideOrgCacheForUserCache":false,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2024-08-05T13:33:15.114Z","namespace":null,"position2":null,"updatedAt":"2024-08-05T14:06:48.584Z","resourceName":"2f635113-7ac4-43ac-8e80-cf94c7b57253","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"calendar1":{"id":"calendar1","type":"widget","uuid":"c8c2d324-fe19-4919-b050-4d36a91eaea2","style":{},"folder":"","screen":null,"subtype":"CalendarWidget2","tabIndex":null,"template":{"_ids":["85d6c","0b13e","898f8","531bb"],"data":,"view":{"end":"","start":""},"events":{},"hidden":false,"margin":"4px 8px","itemMode":"static","listType":"week","viewType":"day","changeSet":{},"endByIndex":,"timeFormat":"","_endByIndex":["{{ moment().hours(8).minutes(0) }}","{{ moment().hours(13).minutes(0) }}","{{ moment().hours(0).add(3, 'days') }}","{{ moment().hours(15).minutes(0).add(1, 'days') }}"],"initialDate":"","colorByIndex":,"dayMaxEvents":2,"hoveredEvent":{},"showInEditor":false,"startByIndex":,"titleByIndex":,"_colorByIndex":["{{ theme.automatic[0] }}","{{ theme.automatic[1] }}","","{{ theme.automatic[2] }}"],"_startByIndex":["{{ moment().hours(8).minutes(0).subtract(1, 'hour') }}","{{ moment().hours(12).minutes(0) }}","{{ moment().hours(0).add(1, 'days') }}","{{ moment().hours(7).minutes(0).add(1, 'days') }}"],"_titleByIndex":["Standup","Lunch","Offsite","Busy"],"allDayByIndex":,"eventMaxStack":0,"selectedEvent":{},"_allDayByIndex":["","",true,""],"_changedEvents":,"eventIdByIndex":,"firstDayOfWeek":0,"groupIdByIndex":,"_eventIdByIndex":["Event1","Event2","Event3","Event4"],"_groupIdByIndex":["123","123","",""],"_hoveredEventId":"","displayTimeZone":"local","displayWeekends":true,"_selectedEventId":"","displayEventTime":true,"selectedInterval":{},"_format24HourTime":false,"_selectedInterval":{},"displayAllDaySlot":true,"_editEventsEnabled":false,"_createEventsEnabled":false,"_deleteEventsEnabled":false,"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2024-08-05T13:34:27.528Z","namespace":null,"position2":{"col":0,"row":0,"type":"grid","width":11,"height":10,"tabNum":0,"rowGroup":"body","container":"listView1","subcontainer":"","stackPosition":null},"updatedAt":"2024-08-05T13:34:36.523Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listView1":{"id":"listView1","type":"widget","uuid":"d3b04468-2137-4f78-92cf-3e14ce6d65a2","style":{},"folder":"","screen":null,"subtype":"ListViewWidget2","tabIndex":null,"template":{"data":"{{ getTodos.data }}","_type":"grid","hidden":false,"margin":"0","padding":"0","direction":"horizontal","itemWidth":"500px","maxHeight":"","heightType":"fixed","layoutType":"list","numColumns":3,"formDataKey":"{{ self.id }}","_primaryKeys":"{{ item.id }}","overflowType":"scroll","showInEditor":false,"instanceValues":null,"_enabledInstances":null,"enableInstanceValues":false,"maintainSpaceWhenHidden":false,"primaryKeyFieldNameOverride":""},"container":"","createdAt":"2024-08-05T13:23:54.089Z","namespace":null,"position2":{"col":0,"row":0,"type":"grid","width":12,"height":15.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"","stackPosition":{"width":0,"height":0,"ordinal":0,"widthType":"fixed"}},"updatedAt":"2024-08-05T13:37:08.538Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null}},"version":"3.76.0","appStyles":"","createdAt":null,"isFormApp":false,"shortlink":null,"appTesting":null,"appThemeId":null,"isFetching":false,"rootScreen":null,"appMaxWidth":"100%","isMobileApp":false,"appThemeName":null,"savePlatform":"web","testEntities":,"appThemeModeId":null,"isGlobalWidget":false,"customShortcuts":,"formAppSettings":{"customRedirectUrl":""},"pageCodeFolders":{"getTodos":},"mobileAppSettings":{"displaySetting":{"tabletMode":false,"landscapeMode":false},"mobileOfflineModeEnabled":false,"mobileOfflineModeDelaySync":false,"mobileOfflineModeBannerMode":"default"},"customDocumentTitle":"","preloadedAppJSLinks":,"experimentalFeatures":{"disableMultiplayerEditing":false,"multiplayerEditingEnabled":false,"sourceControlTemplateDehydration":false},"markdownLinkBehavior":"auto","multiScreenMobileApp":false,"notificationsSettings":{"globalToastPosition":"bottomRight","globalQueryToastDuration":4.5,"globalQueryShowFailureToast":true,"globalQueryShowSuccessToast":true},"queryStatusVisibility":false,"instrumentationEnabled":false,"pageLoadValueOverrides":,"preloadedAppJavaScript":null,"urlFragmentDefinitions":,"responsiveLayoutDisabled":false,"inAppRetoolPillAppearance":"NO_OVERRIDE","loadingIndicatorsDisabled":false,"customComponentCollections":,"customDocumentTitleEnabled":false,"experimentalDataTabEnabled":true,"internationalizationSettings":{"internationalizationFiles":,"internationalizationEnabled":false}}}},{"type":"WIDGET_REPOSITION2","payload":{"moves":[{"move":{},"widgetIds":}],"largeScreen":true},"hideChangelogEntry":false},{"type":"PLUGIN_DELETE","payload":["query1"],"hideChangelogEntry":false}],"gitSha":null,"checksum":null,"createdAt":"2024-08-05T14:53:03.430Z","updatedAt":"2024-08-05T14:53:03.430Z","pageId":3355420,"userId":1203689,"branchId":null,"page":{"name":"ListCalendarBug"}},"modules":{}}

ListCalendarBug (2).json (13.6 KB)

Hey @Laura_Devriendt - welcome to the community forum! :wave: And thanks for joining us in office hours today; it's always nice to see a new face.

So I've spent a fair bit of time this afternoon trying to figure out what's going on here and I think I have a better understanding - and what should be an interim solution. Depending on how much data you're working with, you should be able to use the legacy "List View" component without any issues!

The legacy version of the component doesn't virtualize its contents and is less performant, as a result, but is thus able to re-render your calendars without any issues.

I'll talk to our team here about updating the current "List View" component to better support the "Calendar" component, in particular. I'll share any updates here as soon as possible, but hopefully you have a path for moving forward!

Hi @Darren,

Thanks for the warm welcome and I appreciate you taking the time to look into this.

I tried the legacy "List View" component, and it worked! I'll keep an eye out for updates on the current component.

Thanks for your help!

Best,
Laura

1 Like