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
cpdfGfuVmnKjmJGQi3J5GmP0JJGtEUnDEmmdPYAdcxYL6ambPW.jpeg


1653132764985.png

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
1653141708792.png

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
  • 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 :)
 

Attachments

  • AS DatePickerTimeline Example.zip
    11.8 KB · Views: 54
  • AS_DatePickerTimeline.b4xlib
    7.7 KB · Views: 65
Last edited:
Click to expand...
pliroforikos

pliroforikos

Active Member
Licensed User
Alexander Stolte said:
This makes absolutely no sense.
If you want to select only one month, then use a spinner where the months are listed.
Click to expand...
I don't understand why. Sometimes you need to select only a month of a year or previous year or next year and so on. Or a range of months.
Maybe you mean this is not the purpose of this view...
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
pliroforikos said:
Maybe you mean this is not the purpose of this view...
Click to expand...
Exactly.
pliroforikos said:
Sometimes you need to select only a month of a year or previous year or next year and so on.
Click to expand...
But not with a DatePickerTimeline, there are much more effective ways to do that.

Use

[B4X] [XUI] AS DatePicker - fast navigate to a Month - Year - Decade - Century | RangeDatePicker

This is a simple DatePicker, with which you can quickly reach your target date. With a click on the header the view changes. 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...
www.b4x.com www.b4x.com
Together with

[B4X] AS FloatingPanel

This is a simple panel that can be attached anywhere and opens with an animation. More usecases and updates to come ;) 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...
www.b4x.com www.b4x.com
And

[B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

With this view you can quickly and easily add good looking text fields, with title and or bottom text. Additionally you can make the TextField a button, so that you can open menus, but still keep the design of the text fields. The view speeds up development because you don't have to worry about...
www.b4x.com www.b4x.com
 
BugNot

BugNot

Member
Hi,

Possible to add ListMode to paging or list in programming?

And why Scroll2Date crash my app in list mode, not in paging?

thanks
 
fbritop

fbritop

Active Member
Licensed User
Longtime User
Does Scroll2Date works in List Mode?
It throught an error with:


B4X: 
Error occurred on line: 444 (AS_DatePickerTimeline)
java.lang.RuntimeException: Class instance was not initialized (asviewpager)
 
D

Daica

Active Member
Licensed User
Would it be possible to add the year onto the view? Either before or after the month name?
 
pliroforikos

pliroforikos

Active Member
Licensed User
Hi, just updated from 1.12 to 1.14 and it shows in logs:

Unknown member: getvalue
'next' expected.
Unknown member: getpanel
Unknown member: getpanel
Unknown member: getpanel
Current declaration does not match previous one.<br />Previous: {Type=String,Rank=0, RemoteObject=True}<br />Current: {Type=Long,Rank=0, RemoteObject=True}
'next' expected.
Unknown member: getpanel
Unknown member: getpanel
Unknown member: getvalue
Click to expand...

Now rolled back in 1.12 and it works without problem
Just wanted to mention it.

Rgrds
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 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
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.16
    • Add Designer Property CreateMode - If you set it to Manual then you need to call CreateDatePicker
CreateMode
Use case:
The DatePicker is built as soon as you load the layout. If you then set e.g. a MinDate and or MaxDate, then you must call the rebuild function, because the list must be completely emptied and then filled again. The problem is that there is a visible flickering. And to avoid this, you can now prevent the 1st build after the layout load and let the whole build only when you have made your settings.

Example:
B4X: 
AS_DatePickerTimeline1.MaxDate = DateTime.Now
AS_DatePickerTimeline1.CreateDatePicker
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 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
Example Project updated

Theme
B4X: 
    AS_DatePickerTimeline1.Theme = AS_DatePickerTimeline1.Theme_Dark
    AS_DatePickerTimeline1.Theme = AS_DatePickerTimeline1.Theme_Light
 
You must log in or register to reply here.

Similar Threads

LucaMs
  • Question
B4J Question [B4X] B4XTable and date fields
Replies
17
Views
2K
LucaMs
LucaMs
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS TimePickerDialog based on B4XDialog and AS_TimePicker
Replies
18
Views
4K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS BottomDatePicker
Replies
3
Views
2K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS Timeline
Replies
12
Views
3K
asales
asales
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS DatePicker - fast navigate to a Month - Year - Decade - Century | RangeDatePicker
2 3 4
Replies
67
Views
24K
Alexander Stolte
Alexander Stolte
Top