[Free] Wheel Calendar & Spin Calendar Extension

[Spicy_Topics]

Wheel Calendar Extension

Description:

I am thrilled to bring the Wheel Calendar Picker to the MIT App Inventor community, a feature I was eager to utilize in my own apps. After much effort, I’m excited to share this customizable and interactive calendar picker that will help you easily integrate a wheel-based calendar into your app. Whether you're building a scheduling app, a form, or anything that requires date selection, the Wheel Calendar Picker offers a user-friendly interface to pick dates with ease..It is a versatile and customizable extension for MIT App Inventor that allows you to integrate a wheel-based calendar picker in your app. It enables users to easily select a day, month, and year with a smooth and intuitive scrollable interface. Perfect for apps that require date selection functionality, the extension is highly flexible and easy to use, with full control over the visual appearance and behavior of the calendar.

Key Features:

• Customizable Background Color: Set a background color that matches the design of your app, providing a personalized touch.
• Font Size Adjustment: Modify the font size to match your layout and design needs.
• Customizable Year Range: Define a specific year range for the picker, which is ideal for apps with date constraints.
• Date Selection: Users can easily select a day, month, and year, and the picker will automatically update the selected date.
• Automatic Text Color: The text color adjusts automatically when the background color is set to dark, ensuring optimal readability.
• Event Handling: Trigger events when the date is changed, allowing developers to respond dynamically to user input.

Blocks Overview:

The Wheel Calendar Picker extension offers several blocks that allow developers to interact with and customize the calendar picker. Here is a breakdown of the available blocks and their functionality:

1. InitializeIn (Procedure)

• Purpose: Initializes the calendar picker and adds it to an arrangement in your app.
• Input:
  • hVArrangement: The arrangement (container) where the calendar picker will be placed.
• Output: None (void procedure).
• Usage: This block must be used to initialize the picker in an arrangement, setting it up for use in your app.

2. SetBackgroundColor (Function)

• Purpose: Sets the background color of the calendar picker.
• Input:
  • Color: A color value (e.g., 0xFFFFFFFF for white, 0xFF000000 for black).
• Output: None (void procedure).
• Usage: Use this block to change the background color of the calendar picker to match your app's design.

3. SetFontSize (Function)

• Purpose: Sets the font size for the text within the calendar picker.
• Input:
  • Size: An integer value representing the font size (e.g., 20 for font size 20).
• Output: None (void procedure).
• Usage: Use this block to modify the font size of the day, month, and year text.

4. SetYearRange (Function)

• Purpose: Sets the range of years available for selection in the calendar picker.
• Input:
  • StartYear: The starting year (e.g., 1900).
  • EndYear: The ending year (e.g., 2100).
• Output: None (void procedure).
• Usage: Use this block to define the minimum and maximum years users can select.

5. AfterDateChanged (Event)

• Purpose: This event is triggered whenever the user changes the selected date (day, month, or year) using the picker.
• Inputs:
  • TimeInMillis: The date in milliseconds (long value).
  • FormattedDate: The selected date formatted as a string in dd/MM/yyyy format.
  • DayOfWeek: The day of the week (e.g., "Monday", "Tuesday").
  • FirstDayOfMonth: The first day of the selected month (e.g., "Monday").
  • LastDayOfWeek: The last day of the selected month (e.g., "Sunday").
  • LastDay: The total number of days in the selected month (e.g., 28, 29, 30, or 31).
• Usage: This event provides all the necessary information about the updated date. You can use it to trigger further actions, such as updating other parts of your app based on the selected date.

Available Blocks

Blocks Setup

Output

Extension
Version 1: WheelCalendarV1.0.aix (14.1 KB) 2025-03-18T18:30:00Z
Version 2: Destroyed
Version 3: SpinCalendarV3.aix (12.7 KB) 2025-03-21T18:30:00Z

Spin Calendar Images:

ageDiff will give the users age compare with current date, Also it will alert you how many days is there yet to attain his next birthday

Published on :
V1: 2025-03-18T18:30:00Z
V2: N/A
V3: 2025-03-21T18:30:00Z

Please test this Very Simple Extension and share your valuable feedback.
Extension created by using Niotron IDE and no external lib are used.

Views are welcome for any updation.

Thanks a lot

[The_K_Studio]

Looks similar to this:

[FREE] WheelDatePicker | Date picker extension

[Spicy_Topics]

Yours is different, mine is different. I was trying it for last few months and unable to solve while setting the font colour. My previous code throws error so i took time. Few days back when i see your code i was surprised but i was convinced that youra is different.

[The_K_Studio]

@Spicy_Topics

Yours is different

It's not mine

I just shared since I found it similar. Anyway you can also show it in a dialog.

[Spicy_Topics]

May be . me too felt the same when i see your extenion. i wa thinking to give the sm for lat few month so stated to write code one after another but tarted to compiled and teted from mar 14th onwards. see this.

i hope no one can edit the time it wa added in the IDE in the niotron extension.

[Spicy_Topics]

Version 3 added : Ref ==> First Post

SpinCalendarV3.aix (12.7 KB)

[Joejsanz]

I like this calendar, good work

[Spicy_Topics]

One more speciality of this spin calendar is either you can use custom HA or it will create dynamically at the end of existing native components visible in the screen..

Default year has been added (1900 to 2100)
In next version just like V1 it will be given to user preference for startYear and endYear

[TIMAI2]

This looks good. Got me to thinking if it is possible to "generalise" a fork of this extension, so that one could provide the "spinner" with a list of items, instead of calendar items ?

[Kevinkun]

@TIMAI2

provide the "spinner" with a list of items, instead of calendar items

Like this?
https://wangsk789.github.io/wheelview/

[Spicy_Topics]

@TIMAI2

instead of calendar items ?

Yea definitely it is possible. We can customize anything to come as list of itema in the spinner. I just use very basic simple code to generate numbers between 1 to 31 and 1900 to 2100.

[TIMAI2]

Looks to be already done, had forgotten about @Kevinkun 's extension

[Spicy_Topics]

Yea he already provided. And i had the feeling to give it in one row. But the wheel i am unable to do in java but react code it was easy to make. So i changed the design in v3 to give the calendar items in a single row and upon click it will give you list of items like number picker with all the needy items in OnDateChanged event listener. Still thinking what other forms can i make the calender to give.

Expectation : Upcoming version will support inbuild tinydb so user can store, retrieve notes. Existing infor will display on another vertical Arrangement without need of any other components

[Spicy_Topics]

Upcoming features in Version 04 - JsrCalendar

• Populates the monthly calender on a given HA or VA only by dynamically.
• Enabled save event
• Enabled to retrieve the saved events
• Enabled to show the list of events saved on a particular day in listview
• Enabled to edit the saved event
• Enabled to update the event as well as nth item of the event
• Enabled to show previous/next month calender by swipe as well as button click
• Present day shows by blue bg
• Clicked date will be distinguished by another bg color
• Single click to see the saved events
• Long click to save event
• No complex codes/library used.
  
  

After the backtest will be relased