B4A Library [B4X] [XUI] AS DatePickerTimeline

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

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

Spoiler: Properties, Functions, Events, etc.

• 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

Spoiler: Version 1.0-1.19

• 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

Have Fun

 

[pliroforikos]

Hello,
Is there any way to allow selection of a small range of days?
For example i need to select days in current year until now and not next days.

Thank you in advance.

 

[Alexander Stolte]

Update

• 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

Example:
One Week

AS_DatePickerTimeline1.MinDate = DateTime.now
AS_DatePickerTimeline1.MaxDate = DateTime.now
AS_DatePickerTimeline1.Rebuild

 

[pliroforikos]

Hello,

I was using

    AS_DatePickerTimeline2.Scroll2Date(DateTime.now)
    AS_DatePickerTimeline2_SelectedDateChanged(DateTime.now)

to go and select today.

Using;

    AS_DatePickerTimeline2.MinDate = DateUtils.SetDate(DateTime.GetYear(DateTime.now), 1, 1)
    AS_DatePickerTimeline2.MaxDate = DateTime.now
    AS_DatePickerTimeline2.Rebuild

    AS_DatePickerTimeline2.Scroll2Date(DateTime.now)
    AS_DatePickerTimeline2_SelectedDateChanged(DateTime.now)

it stays to December and not scrolling to "DateTime.now"

I tried to scroll it but then it stays to previous week of August.

 

[Alexander Stolte]

Update

• 1.08
  • BugFix

I was using

Now, you just need this:

AS_DatePickerTimeline2.MinDate = DateUtils.SetDate(DateTime.GetYear(DateTime.now), 1, 1)
AS_DatePickerTimeline2.MaxDate = DateTime.now
AS_DatePickerTimeline2.Rebuild
AS_DatePickerTimeline2_SelectedDateChanged(DateTime.now)

 

[pliroforikos]

Thank you very much.
It works but the next days of current week are selectable.

i tried

Private Sub AS_DatePickerTimeline2_SelectedDateChanged (Date As Long)
    If Date > DateTime.Now Then
        B4XPages.MainPage.eFuncs.toastMsg("Cant select next days", False)
        AS_DatePickerTimeline2_SelectedDateChanged(DateTime.now)
    Else
        selectedDate = $"${DateTime.GetYear(Date)}-${DateTime.GetMonth(Date)}-${DateTime.GetDayOfMonth(Date)} "$
    End If
End Sub

but the selected color remains in next days

 

[Alexander Stolte]

Update

• 1.09
  • BugFixes

The click is now deactivated on dates, thats are lower than the MinDate or higher than the MaxDate.
But you should now use the CustomDrawDate event to show the user, that he can't tap on this dates.
Like:

Private Sub AS_DatePickerTimeline2_CustomDrawDay (Date As Long, Views As ASDatePickerTimeline_CustomDrawDay)

    If (AS_DatePickerTimeline2.MaxDate > 0 And DateUtils.SetDate(DateTime.GetYear(Date),DateTime.GetMonth(Date),DateTime.GetDayOfMonth(Date)) > DateUtils.SetDate(DateTime.GetYear(AS_DatePickerTimeline2.MaxDate),DateTime.GetMonth(AS_DatePickerTimeline2.MaxDate),DateTime.GetDayOfMonth(AS_DatePickerTimeline2.MaxDate))) Or (AS_DatePickerTimeline2.MinDate > 0 And DateUtils.SetDate(DateTime.GetYear(Date),DateTime.GetMonth(Date),DateTime.GetDayOfMonth(Date)) < DateUtils.SetDate(DateTime.GetYear(AS_DatePickerTimeline2.MinDate),DateTime.GetMonth(AS_DatePickerTimeline2.MinDate),DateTime.GetDayOfMonth(AS_DatePickerTimeline2.MinDate))) Then
        Views.xlbl_Date.TextColor = xui.Color_ARGB(80,255,255,255)
    End If
    
End Sub

 

[asales]

Another great lib. Thanks!

2 questions:
1 - How to start the date in the current day?
I tried with:
AS_DatePickerTimeline2.StartDate = DateTime.Now
but don't works.

2 - I can't scroll the list or page in B4J. In B4A works fine.
I tried putting a button to previous/next week:
AS_DatePickerTimeline2.PreviousWeek
but the calendar stay fixed.

Thanks in advance.

 

[Alexander Stolte]

1 - How to start the date in the current day?

is per default on the current day.
If you mean the selected date, then do this:

AS_DatePickerTimeline1.SelectedDate = DateTime.Now

2 - I can't scroll the list or page in B4J.

On B4J you need buttons for the navigation.
Be sure the List Mode is on "Paging" in B4J, "List" is not supported.

 

[asales]

is per default on the current day.
If you mean the selected date, then do this:

AS_DatePickerTimeline1.SelectedDate = DateTime.Now

I tried this code, but the calendar (when open the app) still show 1 Jan and not 17 Aug.
I want to start the calendar in the actual day (17 Aug).

What am I doing wrong?

 

[Alexander Stolte]

What am I doing wrong?

I think the viewpager does not scroll to the current day. Make sure you have the newest libs. ViewPager...
Or make a example project and show me the issue.

 

[asales]

ASViewPager = 1.34

I think the problem is with the devices.

I tested in a Redmi 9A and in a Samsung A71, and the calendar don't change (still 1 Jan).

I tested in a Moto G7 and it shows the current day

All dates in devices is correct.
Strange behavior.

 

[Alexander Stolte]

Test it in Release mode.

 

[Alexander Stolte]

Update

• 1.10
  • BugFix

I think the problem is with the devices.

I was able to recreate it with my old Android smartphone. Fixed it, at least it scrolls to the right day on my phone now.

 

[asales]

Test it in Release mode.

Yes, I use the release mode.
Nothing change with the new version, but I see another behaviour:
- If I compile using Release (or Release Obfuscated) mode, it don't show the current day in Redmi 9A and A71.
- If I compile using the Debug mode, it shows correctly !!!

 

[Alexander Stolte]

Nothing change with the new version, but I see another behaviour:

Can you please download it again?
I'm using now a Do While loop and it seems working

 

[asales]

Can you please download it again?
I'm using now a Do While loop and it seems working

Download again then lib and the example.

- Release and Release (Obfuscated) modes. Don't see the List and don't show the actual day in Paging:

- Debug mode - works fine:

 

[Alexander Stolte]

please try

 

[asales]

please try

Same issue.
- Moto G4 (Android 7) - Release and Debug - OK
- A71 (Android 12), Redmi 9A (Android 10) - Debug OK - Release: don't show list and don't change the date.
Thanks for your support.

 

[pliroforikos]

Same issue.
- Moto G4 (Android 7) - Release and Debug - OK
- A71 (Android 12), Redmi 9A (Android 10) - Debug OK - Release: don't show list and don't change the date.
Thanks for your support.

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

 

[Alexander Stolte]

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