B4J Question ABMPlanner weird behavior (HELP)

[walterf25]

Hi everyone, I have found yet another issue while using a planner object on ABMaterial v5.12.

Basically I have a ABMTabs component which has a Calendar Object inside of the tab container's cell(1,1) and a Planner inside of the tab container's cell(1,2), so far everything is displayed the way it's supposed to, but I am seeing an issue when setting a different activeday on the planner component.

Here's an image of the how the planner object looks when running the project.

Upon loading today's day is set, today being April 9th 2024, which is a Tuesday here in the U.S.

What I'm trying to do is that if the user clicks on any day on the calendar, it will automatically switch the active day on the planner as well, below is my code that takes care of this in the calendar's DayClicked sub.

Sub calendar1_DayClicked(date As String)
    Log("date clicked: " & date)
    Dim dayofweek As String = DateUtils.GetDayOfWeekName(DateTime.DateParse(date)) '''This retuns the name of the day, for example today it would return Tuesday
    Dim activeday As Int = calendarDays.IndexOf(dayofweek)  '''calendarDays is a list populated with the days starting from Monday-Sunday
    Log("clicked on day: " & activeday)
    Dim tabs As ABMTabs = page.Component("tabs")
    Dim cont As ABMContainer = tabs.GetTabPage("CalendarTab")
    Dim planner As ABMPlanner = cont.Component("dayplanner")
    planner.SetActiveDay(activeday)
    planner.Refresh
End Sub

This works, but the problem is that the planner's top header where it displays the days gets all screwed up once the above code is executed, and I don't understand why.
Here's how it looks for example if I click on the 10th on the calendar which would be April 10th, 2024 or Wednesday.

Notice how while the active day switches to Wednesday, the top header looks screwed up, and Tuesday or TU seems to move After WE which shouldn't happen.

Anyhow, I realize that not many people are very familiar with ABMaterial but I just thought I'd share this and maybe get some help from those who are familiar with this framework and maybe get some suggestions as I am banging my head against the wall here.

 

[walterf25]

Bump, @alwaysbusy do you have any idea why the ABMPlanner component has the above mentioned behavior?

 

[MichalK73]

Check how the planner behaves on the entire page and not on a piece of container.

 

[alwaysbusy]

Yes it must have something to do with the component being in a container. Not all components can do this, especially heavy wraps like the planner. Check also the browsers console log, it may hold a clue. If you can make a small example project that demonstrates this behavior, it would be of great help and I may be able to do something about it.

 

[walterf25]

Yes it must have something to do with the component being in a container. Not all components can do this, especially heavy wraps like the planner. Check also the browsers console log, it may hold a clue. If you can make a small example project that demonstrates this behavior, it would be of great help and I may be able to do something about it.

Ok, I'll try to make a small project to show this behavior, I have checked the console logs but there's nothing that points to the ABMPlanner.

 

[walterf25]

Hi @alwaysbusy and @MichalK73 here's a small example project that shows the issue I am referring to, please note that since I am using the mini-template I had to make so changes to the ABMServer b4xlib file, please use the attached b4xlib otherwise you guys will have problems since I am using the ABMaterial v5.12 version.

One of the changes is the issue I posted on this other thread, so this workaround takes care of that issue for now, until @alwaysbusy finds a permanent solution if there's one at all.

Also note that in order to upload the project I had to delete the css, js and font folders from inside the www folder, just add those folders from the version 5.12 library in order to test the project.

You guys will see the following when clicking on any day of the calendar.

Hope there's a fix for this issue.
Thanks guys for looking into this.

Walter

 

[alwaysbusy]

Try this code:

Sub calendar_DayClicked(date As String)
    Log("date clicked: " & date)
    Dim ticks As Long = DateTime.DateParse(date)
    ActiveDay = DateTime.GetDayOfWeek(ticks)
    
    Log("new activeday is: " & ActiveDay)
    
    Dim tabs As ABMTabs = page.Component("tabs")
    Dim cont As ABMContainer = tabs.GetTabPage("plannerpage")
    Dim planner1 As ABMPlanner = cont.Cell(1,2).Component("plannerpage2")
    
    planner1.SetActiveDay(ActiveDay)
    
    Dim Script As String = $"$("[data-dayn='${ActiveDay}']").trigger("mouseup");"$
    page.ws.Eval(Script, Null)
    page.ws.Flush
    
End Sub

Sub plannerpage2_ActiveDayChanged(day As Int)

End Sub

Alwaysbusy

 

[walterf25]

Try this code:

Sub calendar_DayClicked(date As String)
    Log("date clicked: " & date)
    Dim ticks As Long = DateTime.DateParse(date)
    ActiveDay = DateTime.GetDayOfWeek(ticks)
   
    Log("new activeday is: " & ActiveDay)
   
    Dim tabs As ABMTabs = page.Component("tabs")
    Dim cont As ABMContainer = tabs.GetTabPage("plannerpage")
    Dim planner1 As ABMPlanner = cont.Cell(1,2).Component("plannerpage2")
   
    planner1.SetActiveDay(ActiveDay)
   
    Dim Script As String = $"$("[data-dayn='${ActiveDay}']").trigger("mouseup");"$
    page.ws.Eval(Script, Null)
    page.ws.Flush
   
End Sub

Sub plannerpage2_ActiveDayChanged(day As Int)

End Sub

Alwaysbusy

That works very good, so Is it the issue that the mouse Up event is not performed in the library wrapper, or how did you figure this would fix this issue?