B4A Library [B4X] [XUI] AS DatePickerTimeline

Alexander Stolte · May 21, 2022

Date Picker Library that provides a calendar as a horizontal timeline.
This library is inspired by a Flutter library, but the B4X one is better

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.

The view has 2 modes:

Paging - you scroll page by page
List - scrolling without snapping

Make all sundays red:

Private Sub AS_DatePickerTimeline1_CustomDrawDay (Date As Long, BackgroundPanel As B4XView)
    Dim xlbl_Date As B4XView = BackgroundPanel.GetView(0)
 
    'Month Name - January
    Dim xlbl_Month As B4XView = BackgroundPanel.GetView(1) 'Ignore
    'WeekDay Name - Monday
    Dim xlbl_WeekDay As B4XView = BackgroundPanel.GetView(2) 'Ignore
 
    If DateTime.GetDayOfWeek(Date) = 1 Then '1=Sunday
        xlbl_Date.TextColor = xui.Color_ARGB(255,221, 95, 96)
    End If
End Sub

Badge example

Make sure you are using ASViewPager V1.31+
ASDatePickerTimeline
Author: Alexander Stolte
Version: 1.00

ASDatePickerTimeline_BodyProperties
- Fields:
  - DateTextColor As Int
  - DateTextFont As B4XFont
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - MonthTextColor As Int
  - MonthTextFont As B4XFont
  - WeekDayTextColor As Int
  - WeekDayTextFont As B4XFont
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASDatePickerTimeline_MonthNameShort
- Fields:
  - April As String
  - August As String
  - December As String
  - February As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - January As String
  - July As String
  - June As String
  - March As String
  - May As String
  - November As String
  - October As String
  - September As String
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASDatePickerTimeline_SelectedDayProperties
- Fields:
  - Color As Int
  - CornerRadius As Float
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
- Functions:
  - Initialize
    Initializes the fields to their default value.
ASDatePickerTimeline_WeekNameShort
- Fields:
  - Friday As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - Monday As String
  - Saturday As String
  - Sunday As String
  - Thursday As String
  - Tuesday As String
  - Wednesday As String
- Functions:
  - Initialize
    Initializes the fields to their default value.
AS_DatePickerTimeline
- Events:
  - SelectedDateChanged (Date As Long)
- Fields:
  - mBase As B4XView
  - Tag As Object
- Functions:
  - Class_Globals As String
  - CreateASDatePickerTimeline_BodyProperties (DateTextColor As Int, DateTextFont As B4XFont, MonthTextColor As Int, MonthTextFont As B4XFont, WeekDayTextColor As Int, WeekDayTextFont As B4XFont) As ASDatePickerTimeline_BodyProperties
  - CreateASDatePickerTimeline_MonthNameShort (January As String, February As String, March As String, April As String, May As String, June As String, July As String, August As String, September As String, October As String, November As String, December As String) As ASDatePickerTimeline_MonthNameShort
  - CreateASDatePickerTimeline_SelectedDayProperties (Color As Int, CornerRadius As Float) As ASDatePickerTimeline_SelectedDayProperties
  - CreateASDatePickerTimeline_WeekNameShort (Monday As String, Tuesday As String, Wednesday As String, Thursday As String, Friday As String, Saturday As String, Sunday As String) As ASDatePickerTimeline_WeekNameShort
  - DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
    Base type must be Object
  - getBodyProperties As ASDatePickerTimeline_BodyProperties
    Call Refresh if you change something
  - getMonthNameShort As ASDatePickerTimeline_MonthNameShort
    Call Refresh if you change something
  - getSelectedDayProperties As ASDatePickerTimeline_SelectedDayProperties
  - getStartDate As Long
  - getWeekNameShort As ASDatePickerTimeline_WeekNameShort
    Call Refresh if you change something
  - Initialize (Callback As Object, EventName As String) As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - NextWeek As String
  - PreviousWeek As String
  - Refresh
    Rebuilds the visible items
  - setFirstDayOfWeek (number As Int) As String
    1-7
    Friday = 1
    Thursday = 2
    Wednesday = 3
    Tuesday = 4
    Monday = 5
    Sunday = 6
    Saturday = 7
  - setStartDate (StartDate As Long) As String
- Properties:
  - BodyProperties As ASDatePickerTimeline_BodyProperties [read only]
    Call Refresh if you change something
  - FirstDayOfWeek
    1-7
    Friday = 1
    Thursday = 2
    Wednesday = 3
    Tuesday = 4
    Monday = 5
    Sunday = 6
    Saturday = 7
  - MonthNameShort As ASDatePickerTimeline_MonthNameShort [read only]
    Call Refresh if you change something
  - SelectedDayProperties As ASDatePickerTimeline_SelectedDayProperties [read only]
  - StartDate As Long
  - WeekNameShort As ASDatePickerTimeline_WeekNameShort [read only]
    Call Refresh if you change something

Changelog

1.00
- Release
1.01
- Add Event CustomDrawDay
1.02
- Add new Type ASDatePickerTimeline_CustomDrawDay
- Breaking Change on Event CustomDrawDay - The second parameter has changed to Views As ASDatePickerTimeline_CustomDrawDay
- Add Designer Property CurrentDateColor
- Add Designer Property SelectedDateColor
- BugFixes
1.03
- Add get and set SelectedDate
- Add Scroll2Date
- BugFixes
1.04
- Add set MonthNameShort
- Add set WeekNameShort
1.05 (read more)
- Add CustomDrawDay - You can make changes on one day without having to reload the entire week, with refresh
1.06
- Function "Refresh" is now even better
  - No visual flickering
  - Changes are instant
1.07
- Add get and set MaxDate - Will restrict date navigations features of forward, and also cannot swipe the control using touch gesture beyond the max date range
- Add get and set MinDate - Will restrict date navigations features of backward, and also cannot swipe the control using touch gesture beyond the max date range
- Add Rebuild - Clears the DatePicker and builds the DatePicker new
1.08
- BugFix
1.09
- BugFixes
1.10
- BugFix
1.11
- BugFixes
1.12
- Add get and set Enabled - If False then click events and scroll (only on paging mode) is disabled
1.13
- Scroll2Date BugFix
1.14
- Add compatibility for AS_ViewPager Version 2.0
1.15
- ListMode List
  - Completely rewritten logic
  - Each day now has its own slot, instead of always adding 1 week to the list
  - MinDate and MaxDate can now be used in a more targeted manner
1.16 (read more)
- Add Designer Property CreateMode - If you set it to Manual then you need to call CreateDatePicker
1.17
- B4A BugFix
1.18
- Add Event PageChanged
1.19
- BugFix - The CustomDrawDayEvent is now also triggered when a different day is selected
  - Old Day and New Day

1.20
- BugFixes
- Add Designer Property SelectedDateTextColor
- Add Designer Property SelectedMonthTextColor
- Add Designer Property SelectedWeekDayTextColor
- Add Designer Property ThemeChangeTransition
- Add set Theme
- Add get Theme_Light
- Add get Theme_Dark
1.21
- BugFix

Have Fun

asales · Aug 18, 2022

pliroforikos said:
I don't know if it helps but lib works fine in Xiaomi 8T and Xiaomi 7A. Tomorrow i'll try to install in XIaomi 9A if my daughter give it to me

Did you use the Release (obfuscated)?
I tested in a Redmi 8A and get the same issue.

asales · Aug 18, 2022

Alexander Stolte said:
I'll look again later with 2 more phones that are even older. But first have to go to the gym. ?

No problem. I need go to sleep.

Alexander Stolte · Aug 18, 2022

asales said:
Did you use the Release (obfuscated)?

yes...
I tried it with a 60€ phone from 2016, works fine....
In Debug and Release (Obfuscated)...
with Android 5.1

asales said:
I tested in a Redmi 8A and get the same issue.

Can you show me your code?

pliroforikos · Aug 18, 2022

asales said:
Did you use the Release (obfuscated)?
I tested in a Redmi 8A and get the same issue.

In Xiaomi 8T works in all modes.

asales · Aug 18, 2022

I check the B4J example and the list is show, but don't show the current day too.

Maybe could be related to my language settings (Brazilian Portuguese - pr_BR - dd/MM/yyyy - first day = Sunday) ?

Alexander Stolte · Aug 18, 2022

asales said:
Maybe could be related to my language settings (Brazilian Portuguese - pr_BR - dd/MM/yyyy - first day = Sunday) ?

No, because the displayed date are in december and not this month.
The problem is that the xCustomListView doesn't jump to the current day after adding the items, normally a Sleep(0) after adding solves that, I extended that and added a Do While loop that does Sleep(0) until the first visible index is greater than 0. But for whatever reason that doesn't work for you either.

You can try this for testing:

B4X:

Sleep(4000)
AS_DatePickerTimeline.Scroll2Date(DateTime.Now)

do you see the current date?

asales · Aug 18, 2022

Alexander Stolte said:
do you see the current date?

In B4J: yes. Started with the initial date (Jan 1) and show the current date after a while.

In B4A, started with the initial date and after a while, I get this error:

B4X:

** Activity (main) Resume **
java.lang.RuntimeException: java.lang.NullPointerException: Attempt to invoke virtual method 'int b4a.example3.customlistview._getsize()' on a null object reference
    at anywheresoftware.b4a.keywords.Common$13.run(Common.java:1719)
    at android.os.Handler.handleCallback(Handler.java:914)
    at android.os.Handler.dispatchMessage(Handler.java:100)
    at android.os.Looper.loop(Looper.java:225)
    at android.app.ActivityThread.main(ActivityThread.java:7563)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:539)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:994)
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int b4a.example3.customlistview._getsize()' on a null object reference
    at com.stoltex.datepickertimeline.asviewpager._getvvvvvvvvvv6(asviewpager.java:560)
    at com.stoltex.datepickertimeline.as_datepickertimeline._vvvvvvvvvvvvvvvvvvvvvvvvv4(as_datepickertimeline.java:1526)
    at com.stoltex.datepickertimeline.b4xmainpage$ResumableSub_B4XPage_Created.resume(b4xmainpage.java:94)
    at anywheresoftware.b4a.keywords.Common$13.run(Common.java:1717)
    ... 7 more

Alexander Stolte · Aug 18, 2022

Please set in the designer the "First Day of Week" property to "Sunday"

asales · Aug 18, 2022

Alexander Stolte said:
Please set in the designer the "First Day of Week" property to "Sunday"

Now I don't get the error, but in B4A it start with 1 Jan and after a while it shows a blink and show the 1 Jan again (don't move to the current date).

Alexander Stolte · Aug 18, 2022

asales said:
Now I don't get the error, but in B4A it start with 1 Jan and after a while it shows a blink and show the 1 Jan again (don't move to the current date).

Remove all code and try it clean.

asales · Aug 18, 2022

Alexander Stolte said:
Remove all code and try it clean.

I tried. I cleaned the project. I created a new project.

Still the same behaviou: it showed 1 Jan and after a while it seems to move a new day, but show 1 Jan again.

The strange is that in Android 7 (Moto G4) works fine.

Edit: tested in a Samsung tablet with Android 6 and works fine too.

Alexander Stolte · Aug 18, 2022

asales said:
The strange is that in Android 7 (Moto G4) works fine.

Edit: tested in a Samsung tablet with Android 6 and works fine too.

Do the devices have the same time zone as the devices where it does not work?
My guess is that the view does not see the right first day of week for the current week. That means StartIndex = 0 = No List scrolling

asales · Aug 18, 2022

Alexander Stolte said:
Do the devices have the same time zone as the devices where it does not work?

Yes, but I made some tests in Android 7:
- If I disable the Automatic time zone and changed the GMT to 00:00 it works.
- If I return to my GMT-03:00 - São Paulo, I can't see the List and date remains in 1 Jan.
- After this tests, I return the settings to automatic and now Moto G4 with Android 7 has the same issues from the others (no List and initial date = 1 Jan).

Same tests in Redmi 9A:
- GMT+00:00 works.
- my GMT-03:00 don't.
- Even without Sleep(4000) and Scroll2Date the GMT 00:00 works; the problem is with GMT-03:00

Alexander Stolte · Aug 18, 2022

I will see what I can do.

Alexander Stolte · Aug 18, 2022

Update

1.11
- BugFixes

asales said:
If I return to my GMT-03:00 - São Paulo, I can't see the List and date remains in 1 Jan.

works now

pliroforikos · Aug 18, 2022

Hello again
Is there any way to lock and unlock day change for a while until my data will be retrieved?

Alexander Stolte · Aug 18, 2022

pliroforikos said:
Is there any way to lock and unlock day change for a while until my data will be retrieved?

However, this does not sound performant. Imagine you want to jump back 4 weeks and have to wait until everything is loaded.

pliroforikos · Aug 18, 2022

Alexander Stolte said:
However, this does not sound performant. Imagine you want to jump back 4 weeks and have to wait until everything is loaded.

I am using this

B4X:

    If AS_DatePickerTimeline2Clicked = True Then 
        Return 
    End If
    AS_DatePickerTimeline2Clicked = True

   Do something ........


  AS_DatePickerTimeline2Clicked = False

but date change in view can occur

asales · Aug 18, 2022

Alexander Stolte said:
Update

1.11

BugFixes

works now

It works! Thanks!
I sent a beer to you (even because a have questions in another libs too) ?.

PayPal:
1HT90976SB1283039

Alexander Stolte · Aug 20, 2022

Update

1.12
- Add get and set Enabled - If False then click events and scroll (only on paging mode) is disabled

pliroforikos said:
Is there any way to lock and unlock day change for a while until my data will be retrieved?

B4X:

AS_DatePickerTimeline2.Enabled = False

B4A Library [B4X] [XUI] AS DatePickerTimeline

Attachments

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency